How to add another data series to a Google chart
13,099
You need to add new data to 'data' variable and call the chart.draw() method again. See the DataTable docs or play a bit at http://code.google.com/apis/ajax/playground/?type=visualization#line_chart
Example:
// Add columns
data.addColumn('string', 'Employee Name');
data.addColumn('date', 'Start Date');
// Add empty rows
data.addRows(6);
data.setCell(0, 0, 'Mike');
data.setCell(0, 1, {v:new Date(2008,1,28), f:'February 28, 2008'});
data.setCell(1, 0, 'Bob');
data.setCell(1, 1, new Date(2007, 5, 1));
data.setCell(2, 0, 'Alice');
data.setCell(2, 1, new Date(2006, 7, 16));
data.setCell(3, 0, 'Frank');
data.setCell(3, 1, new Date(2007, 11, 28));
data.setCell(4, 0, 'Floyd');
data.setCell(4, 1, new Date(2005, 3, 13));
data.setCell(5, 0, 'Fritz');
data.setCell(5, 1, new Date(2007, 9, 2));
Author by
Tys
Updated on July 21, 2022Comments
-
Tys almost 2 years
I have setup a simple Google Chart by following the example on this page: http://code.google.com/apis/chart/interactive/docs/gallery/linechart.html
google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Year'); data.addColumn('number', 'Sales'); data.addColumn('number', 'Expenses'); data.addRows([ ['2004', 1000, 400], ['2005', 1170, 460], ['2006', 860, 580], ['2007', 1030, 540] ]); var options = { width: 400, height: 240, title: 'Company Performance' }; var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, options); }
But now, after it's rendered, with some javascript i want to dynamically add another series of data. Can anyone point me in the right direction on how to do this?
The data i want to add, a number column with the number of employees, should show a new line in the chart, in another color and doesn't start at year 2004 but at 2005, -
Tys over 12 yearsIs there a way to add the new data, without altering the original array? The problem with the above suggestion is that i first have to 'fit' the new data into that array. I could do that, but it doesn't really fit by default. Therefore my question..
-
acanimal over 12 yearsSee the DataTable docs. You have the addColum and setCell methods. addColum to add a new serie and with setCell you can fill it.Also it is a good idea to hold a copy of your data in a variable different than the format required by the library you use. This way you can add more data to your source array and pass again to the visual library.
-
Tys over 12 yearsI was hoping for something more flexible, but i did it this way for now.