Прокрутка в реальном времени Google LineChart

Question

Исходя из этого вопроса, я пытаюсь реализовать прокрутку Google LineChart.Диаграмма отображает данные за 10 секунд (рассчитывается как 10 * период каждого обновления данных) и добавляет в таблицу DataTable нулевые значения при инициализации для заполнения требуемых данных за 10 секунд.

График выполняетсянепрерывно на частоте 20 Гц (период 50 мс), в результате чего первая видимая точка данных удаляется и добавляется новая точка данных, так что общее количество точек данных (data.getNumberOfRows ()) является постоянным.Я близок к достижению этой функциональности, но, как показывает приведенная ниже скрипка, я пропускаю несколько вещей.Новая точка строится и подключается к более ранней точке, а не ко второй конечной точке, и число видимых точек данных со временем увеличивается.

google.load('visualization', '1.0', {
'packages': ['corechart']
});

google.setOnLoadCallback(loadChart);

function loadChart() {

    var options = {
        width: 1000,
        height: 400,
        vAxis: {
            minValue: 0,
            maxValue: 100
        },
        curveType: 'none',
        pointSize: 5,
        series: {
            0: {
                color: 'Blue'
            }
        }
    };

    var data = new google.visualization.DataTable();
    data.addColumn('number', 'X');
    data.addColumn('number', 'Data');

    data.addRows([
        [0, 0]
    ]);

    var interval = 50;
    var dataSize = data.getNumberOfRows();
    var plotSize = (10 * ((1/interval) * 1000));

    if (dataSize < plotSize) {
        for (i = 0; i < (plotSize - dataSize); i++ ) {
            data.addRows([[i, 0]]);
        }
    }

    var chart = new google.visualization.LineChart(document.getElementById('google_chart_div'));
    setInterval(drawChart, interval);

    function drawChart() {
        for (i = 1; i < data.getNumberOfRows() - 1; i++) {
            data.setValue(i-1, 1, data.getValue(i, 1));
        }
        data.insertRows(data.getNumberOfRows()-1, [[data.getNumberOfRows()-1, Math.floor(Math.random() * 100) + 1 ]]);
        chart.draw(data, options);
    }
}

Пример кода Fiddle

Answer 1

Я понял, что должен просто сбрасывать значения X на каждой итерации в соответствии со следующим кодом, который работает как нужно.

google.load('visualization', '1.0', {
    'packages': ['corechart']
});

google.setOnLoadCallback(loadChart);

function loadChart() {

    var options = {
        width: 1000,
        height: 400,
        vAxis: {
            minValue: 0,
            maxValue: 100
        },
        curveType: 'none',
        pointSize: 5,
        series: {
            0: {
                color: 'Blue'
            }
        }
    };

      var data = new google.visualization.DataTable();
      data.addColumn('number', 'X');
      data.addColumn('number', 'Data');

      data.addRows([
          [0, 0]
      ]);

      var interval = 50;
      var dataSize = data.getNumberOfRows();
      var plotSize = (10 * ((1/interval) * 1000));

      if (dataSize < plotSize) {
          for (i = 0; i < (plotSize - dataSize); i++ ) {
              data.addRows([[i, 0]]);
          }
      }

    var chart = new google.visualization.LineChart(document.getElementById('google_chart_div'));
    setInterval(drawChart, interval);

    function drawChart() {
        data.removeRow(0);
        for (i = 0; i < data.getNumberOfRows(); i++) {
            data.setValue(i, 0, i);
        }
        data.insertRows(data.getNumberOfRows(), [[data.getNumberOfRows()-1, Math.floor(Math.random() * 100) + 1 ]]);
        chart.draw(data, options);
    }
}