How to dynamically add rows/columns to a Google Column Chart
var obj = JSON.parse(r.d);//Json data will come from any web service or any other source
var data2 = new google.visualization.DataTable();
//To Add Column Dynamically
for (var j = 0; j < array.length; j++) // this array contains columns
{
if (j == 0)
{
data2.addColumn(typeof (array[j]), array[j]);
}
else
{
data2.addColumn('number', array[j]);//if 2nd column must be integer
}
}
// To Add Rows Dynamically to a google chart
data2.addRows(obj.length);\\Total Rows
for (var i = 0; i < obj.length; i++)
{
for (var k = 0; k < array.length; k++)//Total Column
{
if (k == 0)
{
data2.setCell(i, k, obj[i][array[k]].toString());//if first Column is String
}
else
{
data2.setCell(i, k, parseInt([obj[i][array[k]]]));//if other columns are int type... for charts mostly we treat just first column as string
}
}
}
Here's a working solution in jsfiddle.
Look at the following function. This iterates over an array of data and updates the chart:
// function to update the chart with new data.
function updateChart() {
dataTable = new google.visualization.DataTable();
var newData = [['Year', 'Sales', 'Expenses' , 'Other'],
['2004', 1000, 400 , 232 ],
['2005', 1170, 460 , 421 ],
['2006', 660, 1120 , 4324 ],
['2007', 1030, 540 , 4234 ],
['2008', 1530, 50 , 234 ]];
// determine the number of rows and columns.
var numRows = newData.length;
var numCols = newData[0].length;
// in this case the first column is of type 'string'.
dataTable.addColumn('string', newData[0][0]);
// all other columns are of type 'number'.
for (var i = 1; i < numCols; i++)
dataTable.addColumn('number', newData[0][i]);
// now add the rows.
for (var i = 1; i < numRows; i++)
dataTable.addRow(newData[i]);
// redraw the chart.
chart.draw(dataTable, options);
}