This page shows an amChart-Chart fueled by a JSON feed:
- JSON-Feed: https://api.json-content-importer.com/json-amchart-input/?show=oc
- amChart-Shortcode:
[amcharts id="examplechart" data-file="https://api.json-content-importer.com/json-amchart-input/?show=oc"]
amChart-Chart:
- Name of amChart: examplechart
- 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:
// 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";