Is it possible to redraw a Line Chart partially for frequently updated time-series data?

[Ingo Jaeckel]

Hey everyone,

To plot time-series data, I append new rows to my Line Chart frequently, delete the oldest rows, and redraw the graph (code below). However, each google.visualization.LineChart.draw() call takes about 35ms; specifically gvjs_.draw from jsapi_compiled_ui_module.js (some more details attached). If there is interest, I can share more profiling results.

Is there a more efficient way to let Line Chart only draw the new data and move the unchanged part along the x-axis? If not, is it still a good idea to use Line Chart for frequently live-updating data?

Thanks,

Ingo

For reference, this is the code that I currently use to create the graph initially and redraw it:

// (1) initial creation & draw

data = new google.visualization.DataTable();

chart = new google.visualization.LineChart(document.getElementById('chart'));

data.addColumn('date', 'Time');

data.addColumn('number', 'Value');

chart.draw(data, options);

// (2) new data arrived, insert & truncate, redraw

data.addRow([someTime, someFloat)])

if (data.getNumberOfRows() > threshold) {

data.removeRow(0);

}

chart.draw(data, options)