Cómo agregar dinámicamente filas/columnas a un gráfico de columna de Google

Question

Quiero crear un gráfico de columnas, usando la API de visualización de Google, puedo enviar los datos para rellenar la tabla de datos del gráfico en forma de matriz. Pero necesito generar el gráfico con un número variable de columnas/filas, dependiendo de lo que contengan mis matrices y no sé cómo iterarlas correctamente y agregarlas a DataTable.

Aquí se muestra un ejemplo para analizar los datos estáticos para generar el gráfico: (todo esto es en javascript)

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

El API tiene estos métodos para agregar columnas y filas: - método diferente para la obtención de la mismos datos que el anterior:

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

lo que necesito es un bucle o un doble bucle for para los ArrayLists que envío y añadir dinámicamente el contenido filas.

Para ser más preciso decir que `s en un caso que tendría los datos escritos anteriormente, y en otro caso tendrían que esto:

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

así que habría analizar estos datos a través de parámetros en el función digamos (no sé si esta sería la ideea correcta) muchas listas de arreglos que contienen cada fila: Fila1 = ['2004', 1000, 400, 232] Fila2 = ['2005', 1170, 460, 421] y ....

¿Cómo puedo usar un bucle for, o un bucle for for para iterar las listas de arreglos que estoy enviando a dynamic generate the datatabl e (con números variables de filas y columnas) que contiene los datos?

Answer 1

Aquí hay una solución de trabajo en jsfiddle.

Observe la siguiente función. Este itera sobre una matriz de datos y actualiza la tabla:

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

Usted puede poner los datos en una cadena y usar JSON.parse (StringData). La columna del año debe estar entre comillas dobles

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