amCharts4 Анимированная диаграмма шкалы времени XY Bubble

Question

Когда я изучил связанную диаграмму, я понял, что у некоторой части кода диаграммы может быть проблема. В разделе slider.events.on определен «dataContext». Однако «DataContext» не идет никуда. Он существует только там. Это ошибка, или я могу упустить момент? https://www.amcharts.com/demos/animated-xy-bubble-timeline-chart/

slider.events.on("rangechanged", function() {
  var year = firstYear + Math.round(slider.start * (lastYear - firstYear - 1));
  var data = yearData[year];
  for (var i = 0; i < series.data.length; i++) {
    var dataContext = series.data[i];
    dataContext.x = data[i].x;
    dataContext.y = data[i].y;
    dataContext.radius = data[i].radius;
  }

полный код:

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end


var yearData = {};
var firstYear = 1950;
var lastYear = 2020;

for (var year = firstYear; year < lastYear; year++) {
  var data = []
  yearData[year] = data;

  for (var i = 0; i < 50; i++) {
    if (year == firstYear) {
      data.push({ x: Math.round(Math.random() * 180 - 90), y: Math.round(Math.random() * 140 - 70), radius: Math.round(Math.random() * 1000) });
    }
    else {
      var previous = yearData[year - 1][i];
      data.push({ x: previous.x + Math.round(Math.random() * 8 - 4), y: previous.y + Math.round(Math.random() * 8 - 4), radius: Math.abs(previous.radius + Math.round(Math.random() * 200 - 100)) });
    }
  }
}

// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.cursor = new am4charts.XYCursor();
chart.cursor.behavior = "zoomXY";

// Create axes
var xAxis = chart.xAxes.push(new am4charts.ValueAxis());
xAxis.min = -100;
xAxis.max = 100;
xAxis.keepSelection = true;
xAxis.renderer.grid.template.above = true;

var yAxis = chart.yAxes.push(new am4charts.ValueAxis());
yAxis.min = -100;
yAxis.max = 100;
yAxis.keepSelection = true;
yAxis.renderer.grid.template.above = true;

// bubble series

var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueX = "x";
series.dataFields.valueY = "y";
series.dataFields.value = "radius";
series.strokeOpacity = 0;


var bullet = series.bullets.push(new am4core.Circle());
bullet.fill = am4core.color("#000000");
bullet.strokeOpacity = 0;
bullet.strokeWidth = 2;
bullet.fillOpacity = 0.5;
bullet.stroke = am4core.color("#ffffff");
bullet.hiddenState.properties.opacity = 0;
bullet.tooltipText = "value:{value.value} x:{valueX.value} y:{valueY.value}";


bullet.events.on("over", function(event) {
  var target = event.target;
  chart.cursor.triggerMove({ x: target.pixelX, y: target.pixelY }, "hard");
  chart.cursor.lineX.y = target.pixelY;
  chart.cursor.lineY.x = target.pixelX - chart.plotContainer.pixelWidth;
  xAxis.tooltip.disabled = false;
  yAxis.tooltip.disabled = false;
})

bullet.events.on("out", function(event) {
  chart.cursor.triggerMove(event.pointer.point, "none");
  chart.cursor.lineX.y = 0;
  chart.cursor.lineY.x = 0;
  xAxis.tooltip.disabled = true;
  yAxis.tooltip.disabled = true;
})

series.heatRules.push({ target: bullet, min: 2, max: 30, property: "radius" });
series.data = yearData[firstYear];



// Scrollbars
chart.scrollbarX = new am4core.Scrollbar();
chart.scrollbarY = new am4core.Scrollbar();




var label = chart.plotContainer.createChild(am4core.Label)
label.fontSize = 60;
label.fillOpacity = 0.4;
label.align = "center";
label.zIndex = 1000;


var sliderContainer = chart.bottomAxesContainer.createChild(am4core.Container);
sliderContainer.width = am4core.percent(100);
sliderContainer.layout = "horizontal";


var playButton = sliderContainer.createChild(am4core.PlayButton);
playButton.valign = "middle";
playButton.events.on("toggled", function(event) {
  if (event.target.isActive) {
    playSlider();
  }
  else {
    stopSlider();
  }
})

var slider = sliderContainer.createChild(am4core.Slider);
slider.valign = "middle";
slider.margin(0, 0, 0, 0);
slider.marginLeft = 30;
slider.height = 15;

slider.startGrip.events.on("drag", stop);


var sliderAnimation = slider.animate({ property: "start", to: 1 }, 80000, am4core.ease.linear).pause();
sliderAnimation.events.on("animationended", function() {
  playButton.isActive = false;
})

slider.events.on("rangechanged", function() {
  var year = firstYear + Math.round(slider.start * (lastYear - firstYear - 1));
  var data = yearData[year];
  for (var i = 0; i < series.data.length; i++) {
    var dataContext = series.data[i];
    dataContext.x = data[i].x;
    dataContext.y = data[i].y;
    dataContext.radius = data[i].radius;
  }

  chart.invalidateRawData();

  label.text = year.toString();
})


function playSlider() {
  if (slider) {
    if (slider.start >= 1) {
      slider.start = 0;
      sliderAnimation.start();
    }

    sliderAnimation.setProgress(slider.start);

    sliderAnimation.resume();
    playButton.isActive = true;
  }
}

function stopSlider() {
  sliderAnimation.pause();
  playButton.isActive = false;
}

setTimeout(function() {
  playSlider()
}, 2000);