WordPress Chartify Plugin User Manual

This is the official documentation(user guide) of the Chartify plugin. We are continually updating our plugin, and with each update, we are introducing new features that match the demands of the market and feedback that we receive from our clients. Any feedback that you have for us will be taken into consideration with great interest.

Let's get started together!

Show both dynamic and static data on your website. Create data visualizations by manually entering data or importing it from external sources.

Installation

There are two ways to install the Chartify plugin:

You can install the Chartify from your WordPress dashboard.
You can install it from WordPress.org.

How to create a chart in 3 steps with the help of the Chartify plugin

Go to the Chartify plugin and create your chart by clicking on the Add New button.
Choose the suitable chart type for you and customize it by adding the title, the data and choose the appropriate styles
Copy the shortcode [ays_chart id="your id"] of the chart and paste it into any post or page.

Now let's see what options are available in the Chartify plugin!

1. Edit chart

1.1 Title - Write the chart title. It will be displayed on the dashboard and in the Front-end.

1.2 Live Preview - On the dashboard, you will be able to see the live preview of the chart. Make changes and preview them write in your dashboard.

2. Source

Choose what results you want to be displayed in your charts.

2.1 Import data from file - By choosing this source, you can import a file in CSV file format.

2.2 Connect to Google Sheets - By enabling the Google Sheets Integrations you will be able to connect your Google Sheet to the chart and import the information from it. It will automatically display the results, providing you with dynamic charts. For activating Google Integration you will need to go to General Settings submenu > Integration.

2.3 Connect to Database - Connect to the Database query and display the appropriate information in the charts. Add the needed query to the given field and display dynamic charts. By clicking on the "Show Results" button you will see the results of the connected query. The "Show on Chart" button is responsible for previewing all the changes in the live preview example. Do not forget to click on the "Save Query" button to save the connected query, otherwise, the dynamic results will not be displayed on your chart. Use Control+Space for autocompleting keywords or table names.

2.4 Get Woocommerce data - By activating this source you can display the Woocommerce statistics through charts. It will allow you to display the following data: Total Score, Ordered Items Count, Average Order Value, Refunds, Total Tax, and Mixed Analysis.

2.5 Manual data - Add static data to the charts manually. By clicking on the "Add Row" button you will be able to add as many rows as you need. By choosing the Line Chart type you will be able to also add the columns. Again, click on the "Show on Chart" button for the live preview.

3 Settings

Fully customize your chart. Choose the desired style for them.

3.1 General Settings

1.3.1 Chart Status - By enabling this option, the chart will be active. If the chart is a draft, it won't be shown anywhere on your website (you don't need to remove shortcodes).

1.3.2 Chart description - In this field, you can add the description of the chart.

1.3.3 Change the author of the current chart - With the help of this feature, you will be able to change the author of the current chart to your preferred one. All you need to write the User ID here.

1.3.4 Show chart title - By enabling this feature the chart title will be displayed on the front end.

1.3.5 Show chart description - If you have a description for your chart, by enabling this option you can show it.

1.3.6 Enable interactivity - With the help of this feature, you can decide if the chart shows events based on user actions or responses to user interaction. If not, the chart won't generate 'select' or similar interaction-based events (but will generate ready or error events), and won't show hover text or change based on user input.

1.3.7 Maximized view - If this option is checked the area of the chart will be maximized.

3.2 Styles

General

3.2.1 Width - Customize the width of the chart in percentage only.

3.2.2 Responsive Width - Tick this option if you want to keep the chart's width fixed at 100%, no matter what is set for the Width option. With the help of this feature you can make the chart more responsive.

3.2.3 Height - Set the height of the chart by entering a numeric value in pixels.

3.2.4 Font size - Set the Font size of the text in pixels.

3.2.5 Background Colour - You can specify the background colour of the chart container.

3.2.6 Border Width - You can set the width of the chart container border.

3.2.7 Border Colour - Choose the border colour of the chart container.

Chart Area

3.2.8 Background Color - Choose the background colour of the chart area.

3.2.9 Border Width - Set the border width of the chart area.

3.2.10 Border Color - Specify the border colour of the chart area.

3.2.11 Left Margin - Specify the chart's distance from the left border. For auto-positioning, you will need to leave it blank.

3.2.12 Right Margin - Specify the chart's distance from the right border. For auto-positioning, you will need to leave it blank.

3.2.13 Top Margin - Specify the chart's distance from the top border. For auto-positioning, you will need to leave it blank.

3.2.14 Botttom Margin - Specify the chart's distance from the bottom border. For auto-positioning, you will need to leave it blank.

Title

3.2.15 Chart title color - Choose the colour of the chart title. There are 3 ways for choosing the colour: RGB, HSL, HEX

3.2.16 Chart title font size - Set the font size for the chart title.

3.2.17 Bold title - If this option is activated the chart title will be in bold.

3.2.18 Italic title - If this option is activated the chart title will be in italic.

3.2.19 Chart title position - Choose the title position. It can be on the left, in the center, and on the right.

3.2.20 Chart title gap - Specify the space between the chart title and the chart container in pixels.

Description

3.2.21 Chart description color - Choose the colour of the chart description.

3.2.22 Chart description font size - Set the font size for the chart description.

3.2.23 Bold description - Tick this option to make the chart description text bold.

3.2.24 Italic description - If this option is activated the chart description will be in italic.

3.2.25 Chart description position - Choose the chart description position. It can be on the left, in the center, and on the right.

3.3 Tooltip

3.3.1 Trigger - The triggers will help you to choose when to display the results on the chart. You will be able to, display the result while hovering, when selected and also you can disable it.

3.3.2 Show Color Code - If this option is enabled, when clicking on a particular part of the chart its color will be displayed next to the option.

3.3.3 Text color - Choose the colour of the tooltip text.

3.3.4 Font size - Specify the font size for all text within the chart tooltip in pixels. If an invalid value is entered, it will revert to the default global font size.

3.3.5 Italic text - Enable this option to make the chart tooltip text in italic.

3.3.6 Bold text - Enable this option to make the chart tooltip text bold.

3.4 Legend

3.4.1 Position - Choose the appropriate position for the chart legend. You will be able to also hide it by choosing the 'Omit the legend' option. You can choose between these options: Right of the chart, Above the chart, Below the chart, Inside the chart, Omit the legend.

3.4.2 Alignment - Choose the alignment for your chart. The following options are available: Start, Center, End

3.4.3 Font Color - Choose the font color for the chart legend.

3.4.4 Font size - Set the font size of the legend in pixels.

3.4.5 Italic text - Enable this option to make the chart legend italic.

3.4.6 Bold text - Enable this option to make the chart legend bold.

3.5 Horizontal Axis Settings

3.5.1 Axis label - In this field, you can write the title of the horizontal axis.

3.5.2 Label font size - Choose the font size of the horizontal axis label.

3.5.3 Label colour - Specify the colour of the horizontal axis label.

3.5.4 Italic label - Enable this option to make the Horizontal axis label italic.

3.5.5 Bold label - Enable this option to make the Horizontal axis label bold.

3.5.6 Text position - Choose the position of the horizontal axis text, relative to the chart area. You can choose the following options: Inside the Chart, Outside the Chart, Hide

3.5.7 Reverse Direction - This feature is responsible for the direction in which the values grow along the horizontal axis.

3.5.8 Axis text color - Choose the color of the horizontal axis text.

3.5.9 Axis text font size - Set the horizontal axis text font size.

3.5.10 Italic text - Enable this to make the text of the horizontal axis italic.

3.5.11 Bold text - Enable this to make the text of the horizontal axis bold.

3.5.12 Slanted text - By choosing true the text will be slanted. In false it will be horizontal. In Automatic based on the size, it will be displayed either in horizontal or slanted. Note: This option only works, if 'Text position' option is set to 'Outside the chart"

3.5.13 Slanted text angle - The slanted text angle will define the angle. It will tilt between -90 from 90 (except 0).

3.5.14 Format - The format string is for numeric axis labels. You can choose between these options: None, Decimal, Scientific, Currency, Percent, Short, Long

3.5.15 Max value - Specify the maximum value for the axis.

3.5.16 Min value - Specify the minimum value for the axis.

3.5.17 Gridlines count - Set the approximate number of vertical gridlines inside the chart area.

3.5.18 Gridlines color - Select the color of the horizontal axis gridlines.

3.6 Vertical Axis Settings

3.6.1 Axis label - In this field, you can write the title of the vertical axis.

3.6.2 Label font size - Choose the font size of the vertical axis label.

3.6.3 Label color - Select the label color of the vertical axis.

3.6.4 Italic label - Enable this option to make the vertical axis label italic.

3.6.5 Bold label - Enable this option to make the vertical axis label bold.

3.6.6 Text position - Choose the position of the vertical axis text, relative to the chart area. It can be: Inside the Chart, Outside the Chart, or Hidden

3.6.7 Reverse Direction - This option shows the direction in which the values along the vertical axis grow. By default, low values are at the bottom of the chart.

3.6.8 Axis text color - Choose the color of the vertical axis text.

3.6.9 Axis text font size - Set the vertical axis text font size.

3.6.10 Italic text - Enable this option to make the chart vertical axis text italic.

3.6.11 Bold text - Enable this option to make the chart's vertical axis text bold.

3.6.12 Format - The format string is for numeric axis labels. You can choose between these options: None, Decimal, Scientific, Currency, Percent, Short, Long

3.6.13 Max value - Set the maximum value of the axis.

3.6.14 Min value - Set the minimum value of the axis.

3.6.15 Gridlines count - Choose the approximate number of vertical gridlines inside the chart area.

3.6.16 Gridlines color - Choose the color of the vertical axis gridlines.

3.7 Chart Animation

3.7.1 Chart Animation - This feature is responsible for the chart animation.

3.8 Live Chart

3.8.1 Live Chart - If you enable this option, the chart data will be dynamically updated on the front end. Note: If the option is enabled, the chart data will be updated without refreshing the page.

3.9 Frontend Actions

3.9.1 Print - After activating this option the users can print the chart data.

3.9.2 Excel - Enable the toggle and the users can export the chart data in Excel file format.

3.9.3 CSV - Enable this option and the users can export the chart data in CSV file format.

3.9.4 Copy - Activate the toggle and the users can copy the chart data (CTRL+C, CTRL+V).

3.9.5 Download Image - Enable the toggle and the users can download the chart as an image.

4. Particular Chart Settings

Line, Area, Stepped Area, Combo, Buble, Scatter and Candlestick Settings

Focus target - Choose how you want to focus the data table elements. You have two options: Single Data and Group Data
Opacity - Set the transparency of data points.
Chart line width - Set data line width in pixels.
Multiple data selection - By activating this option, you can select multiple data points at once.
Multiple data format - With this feature, you can choose how the multiple data will be rolled up into tooltips. The following options are available:Category, Series, Auto, None
Point shape - This feature is responsible for the shape of individual data elements. You can choose between Circle, Triangle, Square, Diamond, Star, or Polygon.
Point Size - This feature is responsible for the diameter of the points in pixels.
Line curve type - If you want the lines in the chart to be curved, you will need to enable this option.
Rotate Vertical - If you want to change the direction of the chart from horizontal to vertical, you will need to enable this option.
Autofill nulls - If this option is activated, the chart will automatically fill the value of any missing data based on the nearest points.
Crosshair trigger - With the help of this feature, you can choose when to display crosshairs. Crosshairs are thin vertical and horizontal lines centered on a data point in a chart.
Crosshair orientation - With this feature, you can choose the crosshair orientation. The crosshair orientation, can be 'vertical' for vertical hairs only, 'horizontal' for horizontal hairs only, or 'both' for traditional crosshairs.
Crosshair opacity - This feature is responsible for the crosshair opacity, with 0.0 being fully transparent and 1.0 fully opaque.

Bar and Column Settings

Is stacked - If this option is enabled, the chart will be displayed in the proportional contribution of individual data points in comparison to a total.
Focus target - With this option, you can choose how to focus the data table elements. You will have two possible options: Single Data and Group Data
Opacity - With this feature, you can choose the transparency of data points.
Bars width - Specify the width of the bars in pixels or in percentages.

Pie, Donut, and 3D Pie Settings

Degree of chart rotation - Set the angle, in degrees, to rotate the chart.
Reverse Categories - If this option is enabled, the pie slices will be drawn counterclockwise.
Slice Border Color - Choose the color of the slice borders.
Slice text - Choose the content of the text to be displayed on the pie slice.
Slice tooltip text - Choose how to display the text in the chart tooltip.
Chart Data Grouping Limit - Specify the percentage value of the pie, below which a slice will not show individually.
Chart Data Grouping Label - This feature includes a label for the combination slice that holds all slices below the chart data grouping limit.
Chart Data Grouping Color - Choose the color for the combination slice that holds all slices below the chart data grouping limit.
Donut hole size - Set the donut hole size.

Histogram Settings

Opacity - Set the transparency of the data points.
Bars width - Choose the width of the bars in pixels or in percentages.

Geo Settings

Keep aspect ratio - If this option is activated, the chart will be drawn at the largest size that can fit inside the chart area at its natural aspect ratio, otherwise, the chart will be stretched to the exact size of the chart as specified by the width and height options.

Gauge Settings

Minor ticks count - With this feature, you can choose the number of minor tick sections in each major tick section.

Table Settings

Sort column index - In this feature, you can set an index of a column in the data table, by which the table is initially sorted.
Show row number - Activate this option if you want to show the row number as the first column of the table.

Timeline Settings

Show row labels - Activate this option to show the row labels of the chart.
Single color - If this option is checked, all the bars in the chart will be drawn in a single color.
Color - Choose the color of the chart.

Gantt Settings

Percent Enabled - If you tick this option the task bar will be filled based on the percentage completed for the task.

Sankey Diagram Settings

Link Color - With the help of this feature you can set the color for the links between nodes.
Border color - Set the border color for the links between nodes.
Border width - Specify the width for the links between nodes.

Treemap Settings

Show scale bar - Tick this option to show a color gradient scale from min color to max color along the top of the chart.
Min Color - Choose the color corresponding to the min value of the data.
Max Color - Choose the color corresponding to the max value of the data..

Word Tree Settings

Maximum font size - Specify the font size of the words.

5. General Settings

5.1 Who will have permission to Chart Builder

Select user role for giving access to Chart Builder menu - Choose who will have access to the menu. You can add more than one user role.
Select user role for giving access to change all chart data - All the user roles who have access will be able to make changes in all chart data.

5.1.2 Except words count in list table

Charts list table - Set the length of the questions to be shown in the Charts List Table by putting your preferred count of words in the following field.

5.2 Integrations

Google Integration - After activating Google Integration you will be able to connect your Google Data to the charts. For activating the integration, write the Google Client ID and Google Client Secret then click on the "Connect" button. For more instructions go to the Integrations > Google > click on the "Instructions" button