amCharts 4: External Data Source - amcharts

Question

I'm struggling to generate a simple XY horizontal bar chart in amCharts 4 using an external data source.
Everything works fine with static data (where I adapted one of the chart demos from the amCharts documentation).
But when I replace the static data with the external dataSource URL, the chart won't generate.
I suspect that the problem might be the Airtable JSON output is a different structure to the static data.
However, I could be completely wrong on that suspicion, so I'd really appreciate any help to a solution please.
(I've obviously XXX'd out the Airtable information in the code below.)
Static Data Source
// Create chart instance
var chart = am4core.create("CHARTDIV", am4charts.XYChart);
// Add data
chart.data = [{
"Name": "Brand Guidelines",
"Aggregate Responses": 7
}, {
"Name": "SAP",
"Aggregate Responses": 3
}, {
"Name": "Email",
"Aggregate Responses": 5
}, {
"Name": "Social Media",
"Aggregate Responses": 3
}, {
"Name": "Google Drive",
"Aggregate Responses": 3
}, {
"Name": "OneDrive",
"Aggregate Responses": 4
}, {
"Name": "SharePoint",
"Aggregate Responses": 1
}, {
"Name": "Slack",
"Aggregate Responses": 3
}, {
"Name": "Drupal",
"Aggregate Responses": 2
}, {
"Name": "Telephone",
"Aggregate Responses": 3
}];
// Create axes
var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "Name";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 30;
var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
// Create series
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueX = "Aggregate Responses";
series.dataFields.categoryY = "Name";
series.name = "Aggregate Responses";
series.columns.template.tooltipText = "{categoryY}: [bold]{valueX}[/]";
series.columns.template.fillOpacity = .8;
var columnTemplate = series.columns.template;
columnTemplate.strokeWidth = 2;
columnTemplate.strokeOpacity = 1;
External Data Source
// Create chart instance
var chart = am4core.create("CHARTDIV", am4charts.XYChart);
// External data source
chart.dataSource.url = "https://api.airtable.com/v0/appXXXXXXX/airtable-table-name?api_key=keyXXXXXXX";
// Create axes
var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "Name";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 30;
var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
// Create series
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueX = "Aggregate Responses";
series.dataFields.categoryY = "Name";
series.name = "Aggregate Responses";
series.columns.template.tooltipText = "{categoryY}: [bold]{valueX}[/]";
series.columns.template.fillOpacity = .8;
var columnTemplate = series.columns.template;
columnTemplate.strokeWidth = 2;
columnTemplate.strokeOpacity = 1;
Airtable JSON Output
{
"records": [
{
"id": "recXXXXXX",
"fields": {
"Name": "EpiServer",
"Typeform Responses": [
"recXXXXXX",
"recXXXXXX",
"recXXXXXX"
],
"Aggregate Responses": 3
},
"createdTime": "2020-05-22T16:11:01.000Z"
},
{
"id": "recXXXXXX",
"fields": {
"Name": "OneDrive",
"Typeform Responses": [
"recXXXXXX",
"recXXXXXX",
"recXXXXXX",
"recXXXXXX"
],
"Aggregate Responses": 4
},
"createdTime": "2020-05-22T16:50:41.000Z"
},
]
}

Answer 1

Your suspicion about the format being different is the right one. AmCharts needs a simple, flattened array of objects where it can find the fields you've specified, so you'll need to convert your external data into a format that AmCharts can accept. You can use the parseended event to re-map your data like so:
chart.dataSource.events.on("parseended", function(ev) {
// parsed data is assigned to data source's `data` property
// pluck data from the records array in your raw data
ev.target.data = ev.target.data.records.map(function(dataItem) {
return {
"Aggregate Responses": dataItem.fields["Aggregate Responses"],
"Name": dataItem.fields.Name
}
});
});
Example below using your code and a base64 encoded data URL of your sample data as demonstration:
// Create chart instance
var chart = am4core.create("CHARTDIV", am4charts.XYChart);
// External data source
//chart.dataSource.url = "https://api.airtable.com/v0/appXXXXXXX/airtable-table-name?api_key=keyXXXXXXX";
chart.dataSource.url = dataURI(); //fake URL for demonstration purposes
chart.dataSource.events.on("parseended", function(ev) {
// parsed data is assigned to data source's `data` property
ev.target.data = ev.target.data.records.map(function(dataItem) {
return {
"Aggregate Responses": dataItem.fields["Aggregate Responses"],
"Name": dataItem.fields.Name
}
});
});
// Create axes
var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "Name";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 30;
var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
// Create series
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueX = "Aggregate Responses";
series.dataFields.categoryY = "Name";
series.name = "Aggregate Responses";
series.columns.template.tooltipText = "{categoryY}: [bold]{valueX}[/]";
series.columns.template.fillOpacity = .8;
var columnTemplate = series.columns.template;
columnTemplate.strokeWidth = 2;
columnTemplate.strokeOpacity = 1;
// base64 encoded version of sample data as a data URI
function dataURI() {
return "data:application/json;base64,eyAicmVjb3JkcyI6IFsgeyAiaWQiOiAicmVjWFhYWFhYIiwgImZpZWxkcyI6IHsgIk5hbWUiOiAiRXBpU2VydmVyIiwgIlR5cGVmb3JtIFJlc3BvbnNlcyI6IFsgInJlY1hYWFhYWCIsICJyZWNYWFhYWFgiLCAicmVjWFhYWFhYIiBdLCAiQWdncmVnYXRlIFJlc3BvbnNlcyI6IDMgfSwgImNyZWF0ZWRUaW1lIjogIjIwMjAtMDUtMjJUMTY6MTE6MDEuMDAwWiIgfSwgeyAiaWQiOiAicmVjWFhYWFhYIiwgImZpZWxkcyI6IHsgIk5hbWUiOiAiT25lRHJpdmUiLCAiVHlwZWZvcm0gUmVzcG9uc2VzIjogWyAicmVjWFhYWFhYIiwgInJlY1hYWFhYWCIsICJyZWNYWFhYWFgiLCAicmVjWFhYWFhYIiBdLCAiQWdncmVnYXRlIFJlc3BvbnNlcyI6IDQgfSwgImNyZWF0ZWRUaW1lIjogIjIwMjAtMDUtMjJUMTY6NTA6NDEuMDAwWiIgfSBdIH0=";
}
<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<div id="CHARTDIV" style="width: 100%; height: 98vh"></div>
Make sure your data is valid JSON as your sample has an incorrect trailing comma.