Acacia supports chart creation and management in two primary ways. Both of these methods give you the ability to display information in a way that matches your template and provides extremely high visual appeal without requiring you to upload any images. These displays are built on HTML5 and can be changed quickly on the back end of your site.
First, Chart.js support is built in that allows you to create rich and infinitely useful charts within a mod_custom (Custom HTML) module, or injected directly in an article to add a powerful visual element to your written information.
Acacia introduces built-in support for Chart.js. This element allows you to quickly and easily create dynamic graphs that display information in a variety of ways.
Progressive Knobs are custom made for Acacia, allowing you to add a unique design element to your site that displays progression around an icon. This element is similar a loading icon, which adds a familiar aesthetic quality that visitors can quickly relate to.
In the image above, three Progressive Knobs are displayed. Each one loads a different icon (sourced from FontAwesome) which can be referenced quickly, and requires no additional uploads to your site.
You can toggle this feature on and off by navigating to Administrator -> Extensions -> Template Settings -> Acacia -> Features -> Canvas and toggling the option there.
Virtually everything about a Progressive Knob can be adjusted. From the width of the progression indicator to the size of the icon, all of this information is found and easily adjusted inside a single block of code.
Here is the code related to the Progressive Knob found on the far left in the image above. If you are entering this into an article, you will want to make sure you are either using RokPad or another non-WYSIWYG editor.
icon Shortcode for the icon which appears in the center. You can find a list on our demo.
iconSize The size of your icon (in pixels) at the center of the knob.
radius This sets the radius (multiply by two to get the width) of the circle at the center of the knob.
start This sets the starting amount (in percentage) of the progression indicator. In this case, it is set at 70.
The longshadow div at the end of the line creates that shadow that sweeps across the back of the knob. This div should appear within the primary canvas-graph div that makes up the progressive knob (as seen above).