Здравствуйте, помогите мне, пожалуйста, подключить автоматически обновляющийся датасет JSON в код, в котором использована библиотека am4chart. Мне необходимо по оси х расположить количество подтвержденных случаев заражения ковидом в каждой стране, а по оси y - сами страны. В коде есть функция, чтобы выводилось число случаев за последний день. Все написано, только почему то не получается подключить саму дату. Выходит ошибка "Uncaught TypeError: Cannot read property 'new_cases' of undefined".
Заранее спасибо!
var getJSON = function(url, callback) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'json';
xhr.onload = function() {
var status = xhr.status;
if (status === 200) {
callback(null, xhr.response);
} else {
callback(status, xhr.response);
}
};
xhr.send();
};
getJSON ("https://covid.ourworldindata.org/data/owid-covid-data.json", function (err, data)
{
var chart = am4core.create("chartdiv", am4charts.XYChart);
var keys = Object.keys(data);
var values = Object.values(data);
for (let i = 0; i < 200; i++) {
var new_cases = values[i][values[i].length - 1].new_cases;
chart.data.push({"country": keys[i], "litres": new_cases});
console.log(chart.data);
};
var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "country";
var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueX = "litres";
series.dataFields.categoryY = "country";
series.columns.template.strokeOpacity = 0;
series.tooltipText = "{categoryY}: [bold]{valueX}[/]";
series.columns.template.column.cornerRadiusBottomRight = 5;
series.columns.template.column.cornerRadiusTopRight = 5;
series.columns.template.adapter.add("fill", function(fill, target){
return chart.colors.getIndex(target.dataItem.index);
});
categoryAxis.sortBySeries = series;
series.heatRules.push({
"target": series.columns.template,
"property": "fill",
'min': am4core.color("#ff0"),
"max": am4core.color("#F00505"),
"dataField": "valueX",
});
chart.cursor = new am4charts.XYCursor();
chart.cursor.lineX.disabled = true;
chart.cursor.lineY.disabled = true;
valueAxis.cursorTooltipEnabled = true;
chart.arrangeTooltips = true;
chart.scrollbarX = new am4core.Scrollbar();
chart.scrollbarY = new am4core.Scrollbar();
am4core.useTheme(am4themes_animated);
var scrollbarY = new am4charts.XYChartScrollbar();
chart.scrollbarY = scrollbarY;
chart.scrollbarY.startGrip.background.states.getKey("hover").properties.fill = am4core.color("#00FFFF");
chart.scrollbarY.endGrip.background.states.getKey("hover").properties.fill = am4core.color("#00FFFF");
chart.scrollbarY.thumb.background.states.getKey("hover").properties.fill = am4core.color("#00FFFF");
chart.scrollbarY.startGrip.background.fill = am4core.color("#30008B");
chart.scrollbarY.endGrip.background.fill = am4core.color("#30008B");
var scrollbarX = new am4charts.XYChartScrollbar();
scrollbarX.series.push(series);
chart.scrollbarX = scrollbarX;
scrollbarX.scrollbarChart.seriesContainer.hide();
chart.scrollbarX.startGrip.background.states.getKey("hover").properties.fill = am4core.color("#00FFFF");
chart.scrollbarX.endGrip.background.states.getKey("hover").properties.fill = am4core.color("#00FFFF");
chart.scrollbarX.thumb.background.states.getKey("hover").properties.fill = am4core.color("#00FFFF");
chart.scrollbarX.startGrip.background.fill = am4core.color("#30008B");
chart.scrollbarX.endGrip.background.fill = am4core.color("#30008B");
var title = chart.titles.create();
title.text = "Covid-19";
title.fill= am4core.color("#F00505");
title.fontSize = 30;
title.tooltipText = "Количество подтвержденных случаев заражения за день";
series.columns.template.hoverOnFocus = true;
var heatLegend = chart.createChild(am4charts.HeatLegend);
heatLegend.width = am4core.percent(100);
heatLegend.minColor = am4core.color("#ff0");
heatLegend.maxColor = am4core.color("#F00505");
series.columns.template.events.on("over", function(ev) {
if (!isNaN(ev.target.dataItem.value)) {
heatLegend.valueAxis.showTooltipAt(ev.target.dataItem.value)
}
else {
heatLegend.valueAxis.hideTooltip();
}
});
series.columns.template.events.on("out", function(ev) {
heatLegend.valueAxis.hideTooltip();
});
}.bind(this))