How can I connect an auto-updating dataset to the JS code?

  • 0
    Hello, help me, please, connect the auto-updating JSON dataset to the code that uses the am4chart library. I need to plot the number of confirmed cases of covid infection in each country on the x-axis, and the countries themselves on the y-axis. There is a function in the code to display the number of cases for the last day. Everything is written, but for some reason it is not possible to connect the date itself. The error "Uncaught TypeError: Cannot read property 'new_cases' of undefined" appears.

    Thanks in advance!

    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))
    JavaScript Anonymous, Jun 20, 2019

  • 0 Answers
Your Answer
To place the code, please use CodePen or similar tool. Thanks you!