Display JSON-data in Charts and Maps

Challenge:

Show JSON-data in Charts and Maps

---

Solution:

Install the Plugin amCharts: Charts and Maps
In the best case the “JSON to be displayed” is already ok for this plugin. If not: Either the PRO Version of the “JSON Content Importer Plugin” can transform the data into fitting JSON (and handle things like merge 2 feeds or authentication). Or you change the JavaScript used by the amCharts-Plugin (see below)

---

Example:

JSON-Example: https://api.json-content-importer.com/extra/json/amchart.json

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

Step 1: Create a new Chart within the Amchart-Plugin Resources:

//www.amcharts.com/lib/4/core.js
//www.amcharts.com/lib/4/charts.js

HTML:

Javascript:

// 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 2: Use a Shortcode

[amcharts id="examplechart" data-file="https://api.json-content-importer.com/extra/json/amchart.json"]

---

In action: