XY Chart dynamically line series using dataSource

Question

I'm using amcharts4 to display some charts using vanilla javascript and a .Net Core API to get the data (on json format).

I need to create a Line Chart (XY chart) with a category X axis (time) and a value Y axis (temperatures). The chart must contain dynamically series (I don't know in advanced how much series will be) and get the data using dataSource.

I can't find the way to get it working.

I have already read all of the documentation, guides and examples that have found about this: - List templates - Adapters - XY-charts - DataSource - Dynamically adding and removing series - Line series - Series

And here on SO I only found this Stacked Area Amchart passing dynamic data (all the other post I can find aren't about amcharts4). But I need both using dataSource to get the data and have dynamically added series simultaneously.

I can modify the API to change the json data structure. I'm using the javascript way to define the charts and series.

I already tried to add an event when the datasource load the data ("load" event),and in that function I parse the data of the chart, separated in different arrays, make the json with all the pairs (value, timestamp) for each serie and then create the series dynamically. But it didn't work, the Legend of the serie load properly but the data never appears. I also have set the error event of the datasource but no errors appear (in the browser console either).

I can't find the way of using dataSource and have dynamically Line series, may be there are a simple way of doing this using amchart but can't get it.

Thank you!

Data example:

[
{
    "deviceName": "device1",
    "dateTime": "30/12/2019 0:45:12",
    "value": "35"
},
{
    "deviceName": "device2",
    "dateTime": "30/12/2019 0:45:12",
    "value": "30"
},
{
    "deviceName": "device3",
    "dateTime": "30/12/2019 0:45:12",
    "value": "20"
},
{
    "deviceName": "device4",
    "dateTime": "30/12/2019 0:45:12",
    "value": "23"
},
{
    "deviceName": "device1", (---> again)
    "dateTime": "30/12/2019 1:15:12",
    "value": "36"
},

(...),

{
    "deviceName": "device4",
    "dateTime": "30/12/2019 12:18:51",
    "value": "29"
}

]

xorspark xorspark · Accepted Answer · 2019-12-28T02:15:32

You might find done to be a more appropriate event as you know that the parse/load is successful at this point. Not knowing exactly what you tried to do in your attempt since you didn't post your code, you might not be setting up your series correctly with the correct X and Y data fields.

The following works correctly for me:

chart.dataSource.url = "/path/to/your/data/payload";
chart.dataSource.events.on('done', function(ev) {
  var data = ev.data;
  var chart = ev.target.component;

  //the following assumes all series value fields are present 
  //in the first element in your array.
  Object.keys(data[0]).filter(function(item) {
    return item !== 'year'; //filter out non-series value fields
  }).forEach(function(valueField) { 
    //create your series
    var series = chart.series.push(new am4charts.LineSeries);
    series.name = valueField;
    series.dataFields.categoryX = 'year';
    series.dataFields.valueY = valueField;
  });
});

Demo

XY Chart dynamically line series using dataSource

1 Answers