Pro Charts shortcode for WordPress

The Pro Charts shortcode for WordPress can be used to display and compare multiple datasets in different chart types like line, column grouped, column stacked, bar grouped, bar stacked, bullet, diverging-bar, radar or area. The charts can be included inside the content, interactively presenting and comparing different datasets. Check below for example implementations and shortcode documentation:

Pro Chart Examples

Bar Grouped
Bar Stacked
Column Grouped
Column Stacked

Pro Charts are interactive. You may click on the labels in the Legend to activate/deactivate a dataset.

Line
Area
Bullet
Diverging Bar
Radar

Pro Charts are interactive. You may click on the labels in the Legend to activate/deactivate a dataset.

Pro Chart Shortcodes

Shortcode

[x3m-prochart type="bar-grouped" labels="Jan;Feb;Mar" value-1="CompanyA;red;75;78;64" value-2="CompanyB;blue;44;67;62" maxwidth="100%" maxheight="300px"]

Pro Charts shortcode with X3M Tables integration
[x3m-prochart type="bar-grouped" x3m-tables-source="id=1; labels=row1; source-rows=1-7; source-columns=A,C; filter-include=keyword; filter-exclude=other keyword; source-limit=10;" maxwidth="100%" maxheight="300px"]

The shortcode can be used to display a pro chart with multiple sets of data. This allows a comparison between various labels. Various types of charts are available, with complete color and value customisations. Above example displays pro charts for each of the available styles, with 2 datasets.

Pro Chart Documentation

Here are the shortcode option settings available for Pro Charts:

Shortcode Settings	Details
type=”bar-grouped”	used to set the chart type: – “bar-grouped” used to display group of bars style chart – “bar-stacked” used to display staked bars style chart – “column-grouped” used to display group of columns style chart – “column-stacked” used to display staked columns style chart – “line” used to display line style chart – “area” used to display area style chart – “bullet” used to display donut style chart – “diverging-bar” used to display radial style chart – “radar” used to display radar style chart
labels=”Jan;Feb;Mar”	used to set the labels displayed on the chart axis (labels separated by “;”) The labels attribute can use dynamic data by using shortcodes inside it with double accolade brackets (instead of single square bracket [..]) like this: labels=”{{shortcode}}”
value-1=”CompanyA;red;75;78;64″	used to set the Dataset 1 (separated by “;”): – first value is Dataset Name (appears on the Legend) – second value is Color of dataset (color of line, bar, column). Color names or HEX color codes can be used to set the desired color. – next values are numeric values for the dataset (numeric values should be of same count as with chart labels set earlier) Subsequent datasets can be set with value-2=””, value-3=”” and so on. The value attribute can use dynamic data by using shortcodes inside it with double accolade brackets (instead of single square bracket [..]) like this: value-1=”{{shortcode}}”
maxwidth=”100%”	defines maximum chart width. It can be set both in percentage (ex “100%”) or pixels (ex “300px”)
maxheight=”300px”	defines maximum chart height. It can be set both in percentage (ex “50%”) or pixels (ex “300px”)

Pro Charts shortcode can also be used to display data from a table. The table data needs to be generated/managed with X3M Tables plugin, a WordPress plugin for managing and displaying tables with manual and automatic import and export features. To generate a chart based on a table data, you need to replace the labels=”” and values like value-1=”” attributes with a new setting in the format x3m-tables-source=”id=1; labels=row1/columnA; source-rows=1-7; source-columns=A,C; filter-include=keyword; filter-exclude=other keyword; source-limit=10;” .

Shortcode Settings	Details
x3m-tables-source=”…”	used to set the data retrieval from a table managed with X3M Tables plugin. It comes with several settings, separated by “;”: – id=1 – sets the ID of the table to be used for data retrieval. In our example is 1, but it should be used the ID from the list of X3M Tables – labels=row1 or labels=columnA – sets where it takes the labels from (row 1 or column A). This way it also sets how datasets are retrieved – when set in row=1 than value1, value2 data is pulled from rows 2,3,4.. with column A used for Dataset name displayed in chart and rest of columns for data; if set as columnA, than value1, value2.. data is pulled from column, with row1 used as Dataset name in chart. – source-rows=1-7 (optional) – sets the rows where data is pulled/displayed from (rows 1 to 7, or if set 1,3,4 it takes data from rows 1, 3 and 4), or if set like 3-… it will pull data from row 3 to the last. – source-columns=A,C (optional) – sets the columns where data is pulled/displayed from (columns A and C, or if set A-C it takes data from columns A, B and C), or if set like C-… it should pull data from column C to the last. – filter-include=keyword (optional) – sets the keyword/expression to filter on and display. The rest of the rows/columns data will not be displayed in chart. – filter-exclude=other keyword (optional) – sets the keyword/expression to filter out on and display the remain datasets. All data will be displayed in chart except the rows/columns having that keyword/expression. – source-limit=10 (optional) – sets the limit of data values in each dataset shown

Shortcode Settings

Details

x3m-tables-source=”…”

used to set the data retrieval from a table managed with X3M Tables plugin. It comes with several settings, separated by “;”:

– id=1 – sets the ID of the table to be used for data retrieval. In our example is 1, but it should be used the ID from the list of X3M Tables
– labels=row1 or labels=columnA – sets where it takes the labels from (row 1 or column A). This way it also sets how datasets are retrieved – when set in row=1 than value1, value2 data is pulled from rows 2,3,4.. with column A used for Dataset name displayed in chart and rest of columns for data; if set as columnA, than value1, value2.. data is pulled from column, with row1 used as Dataset name in chart.
– source-rows=1-7 (optional) – sets the rows where data is pulled/displayed from (rows 1 to 7, or if set 1,3,4 it takes data from rows 1, 3 and 4), or if set like 3-… it will pull data from row 3 to the last.
– source-columns=A,C (optional) – sets the columns where data is pulled/displayed from (columns A and C, or if set A-C it takes data from columns A, B and C), or if set like C-… it should pull data from column C to the last.
– filter-include=keyword (optional) – sets the keyword/expression to filter on and display. The rest of the rows/columns data will not be displayed in chart.
– filter-exclude=other keyword (optional) – sets the keyword/expression to filter out on and display the remain datasets. All data will be displayed in chart except the rows/columns having that keyword/expression.
– source-limit=10 (optional) – sets the limit of data values in each dataset shown

The pro charts can use any number of values. A minimum of 1 dataset and 1 value should be used. When using multiple datasets and labels, make sure to list labels and dataset values in the same order across the settings.