JCI and amCharts – Plot JSON Data

Challenge: Plot

Show JSON-data in Charts and Maps

Solution: JCI and amCharts

Install the Plugin amCharts: Charts and Maps
In the best case the “JSON to be displayed” is already ok for this plugin. If not: The JCI-PRO-Plugin can transform the data into fitting JSON, handle things like merge two feeds or do API-authentication.
And: Usually you need to have the JSON on the same Domain as the WordPress. The JCI-PRO-Plugin can “proxy” the JSON for local use.

Example: Code for amCharts

Step 1: “Proxy” JSON-Data

Let’s have this JSON-Example: located at another Domain. amCharts tries to load this URL – but might fail due to security reasons (“CORS“).
In this case the JCI-PRO-Plugin can get the data and provide it locally (that is what “proxy” means). See here how this is done.

In the end we have the JSON at

 { "category": "Research", "value": 10 },
 { "category": "Marketing", "value": 2 },
 { "category": "Distribution", "value": 3 }

Step 2: Create a new Chart within the amChart-Plugin Resources:



<div id="$CHART$" style="width: 100%; height: 300px;"></div>

JavaScript (mind the uppercase CATEGORY and VALUE coming from the slightly modified JSON):

// Create chart instance
var chart = am4core.create("$CHART$", am4charts.XYChart);

// Add data

chart.dataSource.url = AmCharts.wpChartData.file;

// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "CATEGORY";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 30;

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

// Create series
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueY = "VALUE";
series.dataFields.categoryX = "CATEGORY";

Set the Slugname for that amChart-Chart e. g. “examplechart”

Step 3: Use a Shortcode

[amcharts id="examplechart" data-file=""]

In Action:

see at

or here

Was this article helpful?
0 out Of 5 Stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.
On this page: