@ksena_morokova
Python программист

Как мне подключить автоматически обновляющийся датасет в код JS?

Здравствуйте, помогите мне, пожалуйста, подключить автоматически обновляющийся датасет 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))
  • Вопрос задан
  • 85 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы