Question

0

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

rated 0 times [ 4] [ 4] / answers: 1 / hits: 78020 / 12 Years ago, thu, september 13, 2012, 12:00:00

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 ?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jackie

Add To Favorites

Follow

Total Points: 442

Total Questions: 107

Total Answers: 94

Location: Honduras

Member since Sun, Dec 26, 2021

2 Years ago

jackie questions

1 Is it possible to get the selector from a locator object in playwright?

Thu, Apr 28, 22, 00:00, 2 Years ago

1 Upload and preview Video in React

Sat, Sep 18, 21, 00:00, 3 Years ago

1 React countdown timer using new Date()

Wed, Jul 14, 21, 00:00, 3 Years ago

1 How to style the button in bootstrap vue dropdown like a circle

Thu, Oct 22, 20, 00:00, 4 Years ago

1 Vue reactivity, prevent re-rendering component on prop update with input v-model

Wed, Sep 2, 20, 00:00, 4 Years ago

View All

answered 12 Years ago skyler · Accepted Answer

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



      }