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 merging two feeds, or do API authentication.
And: Usually, you need to have the JSON on the same Domain as WordPress. The JCI-PRO-Plugin can”proxy” the JSON for local use.”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 merging two feeds, or do API authentication.
And: Usually, you need to have the JSON on the same Domain as 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: http://api.json-content-importer.com/extra/json/amchart.json located at another Domain. amCharts tries to load this URL – but might fail due to security reasons “COR”).
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. “Let’s have this JSON-Example: http://api.json-content-importer.com/extra/json/amchart.json 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 http://api.json-content-importer.com/jsonproxy/?show=oc.
[
{ "category": "Research", "value": 10 },
{ "category": "Marketing", "value": 2 },
{ "category": "Distribution", "value": 3 }
]
Step 2: Create a new Chart within the amChart-Plugin Resources:
//www.amcharts.com/lib/4/core.js //www.amcharts.com/lib/4/charts.js
HTML:
<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="http://api.json-content-importer.com/extra/json/amchart.json"]
In Action:
see at http://api.json-content-importer.com/pro-display-json-with-amchart/
or here http://api.json-content-importer.com/chart-amcharts-com/