Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Google Charts LineChart example with updating.
// Google Chart Visualization Playground's LineChart Example
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['x', 'Data 1', 'Data 2', 'Data 3'],
[1, 1, 1, 0.5],
[2, 2, 0.5, 1],
[3, 4, 1, 0.5],
[4, 8, 0.5, 1],
[5, 7, 1, 0.5],
[6, 7, 0.5, 1],
[7, 8, 1, 0.5],
[8, 4, 0.5, 1],
[9, 2, 1, 0.5],
[10, 3.5, 0.5, 1],
[11, 3, 1, 0.5],
[12, 3.5, 0.5, 1],
[13, 1, 1, 0.5],
[14, 1, 0.5, 1]
]);
// Create and draw the visualization.
var v = new google.visualization.LineChart(document.getElementById('visualization'));
v.draw(data, {curveType: "function",
width: 500, height: 400,
vAxis: {maxValue: 10}});
// Quick example of updating
var i = 15;
setInterval(function() {
// Add a new row of data
data.addRow([i++, Math.random()*10, Math.random()*10, Math.random()*10]);
// Remove the oldest row of data
data.removeRow(0);
// Redraw the data
v.draw(data, {curveType: "function",
width: 500, height: 400,
vAxis: {maxValue: 10}});
}, 1000);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment