How to dynamically add rows/columns to a Google Column Chart

Question

I want to create a Column Chart , using Google Visualization API , I can send the data to populate the chart's DataTable in array form. But I need to generate the chart with variable number of columns/rows , depending on what my arrays contain and i don`t know how to correctly iterate them and add them to the DataTable.

Here is an example for parsing STATIC data to generate the chart : (all this is in javascript)

var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses'],
      ['2004',  1000,      400],
      ['2005',  1170,      460],
      ['2006',  660,       1120],
      ['2007',  1030,      540]
    ]);

The API has these methods for adding columns and rows : - different method for obtaining the same data as above :

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', 660, 1120], ['2007',1030,540]
  ]);

What i need is a for loop or a double for loop to iterate the arraylists that i send and dynamically add rows content.

To be more precise let`s say in one case i would have the data written above , and in other case i would have this :

['Year', 'Sales', 'Expenses' , 'Other'],
['2004',  1000,      400     ,  232   ],
['2005',  1170,      460    ,  421   ],
['2006',  660,       1120    ,  4324  ],
['2007',  1030,      540     ,  4234  ],
['2008',  1530,      50     ,    234  ],

so i would parse these data through parameters in the function let's say ( i don't know if this would be the right ideea) many arraylists containing each row : Row1=['2004', 1000, 400 , 232 ] Row2=['2005', 1170, 460 , 421 ] and ....

How can i use a for loop , or a double for loop , to iterate the arraylists that i am sending to dynamic generate the datatable (with variable numbers of rows and column ) containing the data ?

Answer 1

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);        

      }