Challenge:
Show JSON-data in Charts and MapsSolution:
Install the Plugin amCharts: Charts and MapsIn 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"]]