Come aggiungere dinamicamente righe/colonne a un grafico a colonne di Google

Question

Voglio creare un grafico a colonne, utilizzando l'API di visualizzazione di Google, posso inviare i dati per popolare il DataTable del grafico sotto forma di array. Ma ho bisogno di generare il grafico con un numero variabile di colonne/righe, a seconda di cosa contengono i miei array e non so come iterarli correttamente e aggiungerli al DataTable.

Ecco un esempio per l'analisi di dati statici per generare il grafico: (tutto questo è in javascript)

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

L'API ha questi metodi per aggiungere colonne e righe: - metodo differente per ottenere la dati come sopra:

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

cosa ho bisogno è un ciclo for o un doppio ciclo for per iterare i ArrayLists che inviare e aggiungere dinamicamente contenuti righe.

Per essere più precisi Let `s dire in un caso avrei dovuto i dati scritti sopra, e in altri casi avrei questo:

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

quindi vorrei analizzare questi dati con i parametri del diciamo (non so se sarebbe l'ideea giusta) molti arraylists contenenti ogni riga: Row1 = ['2004', 1000, 400, 232] Row2 = ['2005', 1170, 460, 421] e ....

Come posso usare un ciclo for, o un ciclo double for, per iterare gli arraylists che sto inviando alla generazione dinamica del datatabl e (con numeri variabili di righe e colonne) contenenti i dati?

Answer 1

Ecco una soluzione funzionante in jsfiddle.

Vedere la seguente funzione. Questo itera su un array di dati e aggiorna la tabella:

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

     } 

Answer 2

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 
          } 
         } 
        } 

Answer 3

È possibile inserire i dati in una stringa e utilizzare JSON.parse (StringData). La colonna dell'anno deve essere tra virgolette

var data = new google.visualization.DataTable(); 
data.addColumn('string', 'Year'); 
data.addColumn('number', 'Sales'); 
data.addColumn('number', 'Expenses'); 

var stringData = '[["2004", 1000 , 400], ["2005", 1170, 460], ["2006", 660, 1120], ["2007",1030,540]]'; 

data.addRows(JSON.parse(stringData));