How to use external data plot a multi lineseries chart - json

Question

I am using amcharts4 plugin to plot a multi-lineseries graph.
But the plotted points do not locate at the right position (Blue dot at the edge of y-axe)
Here is the output chart that I get. (pls see the attached above)
Not sure what had done wrong with the following codes. Hope someone can help me out.
Thanks in advance!
var chart = am4core.create("chartdiv", am4charts.XYChart);
//Create axes
var categoryAxis = chart.xAxes.push(new
am4charts.CategoryAxis()); categoryAxis.dataFields.category = "date";
categoryAxis.title.text = "Month-Year";
categoryAxis.title.fontWeight = "bold";
/* Create value axis */
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.title.text = "Total Sales ($)";
valueAxis.title.fontWeight = "bold";
/* Add data */
var ds = new am4core.DataSource();
ds.url = window.location.origin+"/home/salesVolumnVersusPeriod"; //Sample of external JSON DATA = [{"date":"02-2020","FS":6288, 'IO':2342}]
ds.events.on("done", function(ev) {
chart.config = ev.data;
var u = ev.data; var data =
ev.target.data[0]; var datakey = Object.keys(data);
var text = '';
for (var i = 1; i < datakey.length; i++) {
addSeries(datakey[i], u);
text += datakey[i]+' : {'+datakey[i]+'}'+"\n";
}
$('#chartdiv').append('<div id="test">'+text+'</div>');
});
ds.load();
/* Create series */
function addSeries(b, data) {
// Create series
var series = new am4charts.LineSeries();
series.data = data;
series.dataFields.valueY = b;
series.dataFields.categoryX = "date";
series.name = b;
series.strokeWidth = 3;
series.tensionX = 0.7;
series.bullets.push(new am4charts.CircleBullet());
series = chart.series.push(series);
series.events.on("hidden", updateTooltipText);
series.events.on("shown", updateTooltipText);
}
function getToolstipItemValue(text) {
return `[bold]Date {categoryX}[/]
---- `+text;
}
/* Set up tooltip attachment to other series whenever series is hidden */
function updateTooltipText() {
var added = false;
tooltipText = $('#test').text();
chart.series.each(function(series)
{
if (series.visible && !added) {
series.tooltipText = getToolstipItemValue(tooltipText);
added = true;
}
else {
series.tooltipText = "";
}
});
}
/* Add legend */
chart.legend = new am4charts.Legend();
/* Create a cursor */
chart.cursor = new am4charts.XYCursor();

Answer 1

Finally knew what is wrong. It should use chart.data instead of chart.config.
Now the graph works. Hope this could help you too. Cheers!
chart.config = ev.data;