Print

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: 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/

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.
Previous JCI and ContactForm7
Next more 3rd party plugins
On this page: