Display JSON-data in Charts and Maps


Show JSON-data in Charts and Maps


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)


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:



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