it-swarm.com.de

So fügen Sie Zeilen/Spalten dynamisch zu einem Google Column Chart hinzu

Ich möchte ein Säulendiagramm mit der Google Visualisierungs-API erstellen. Ich kann die Daten senden, um die DataTable des Diagramms in Array-Form aufzufüllen. Aber ich muss das Diagramm mit einer variablen Anzahl von Spalten/Zeilen generieren, je nachdem, was meine Arrays enthalten. Ich weiß nicht, wie ich sie richtig durchlaufen und sie der DataTable hinzufügen muss.

Hier ist ein Beispiel für das Analysieren von STATIC-Daten, um das Diagramm zu generieren: (Alles in Javascript)

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

Die API verfügt über die folgenden Methoden zum Hinzufügen von Spalten und Zeilen: - Eine andere Methode zum Abrufen der gleichen Daten wie oben: 

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

Was ich brauche, ist eine for-Schleife oder eine double-for-Schleife, um die von mir gesendeten Arraylisten zu iterieren und Zeileninhalt dynamisch hinzuzufügen. 

Um genauer zu sein, sagen wir in einem Fall, dass ich die Daten oben geschrieben hätte, und in einem anderen Fall hätte ich.

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

ich würde diese Daten durch Parameter in der Funktion analysieren, sagen wir (ich weiß nicht, ob dies die richtige Idee wäre). Viele Arraylisten enthalten jede Zeile: Row1 = ['2004', 1000, 400, 232] Row2 = ['2005', 1170, 460, 421] und ....

Wie kann ich eine for-Schleife oder eine double-for-Schleife verwenden, um die Array-Listen zu iterieren, die ich an dynamisch sende, und die datable (mit variablen Anzahlen von Zeilen und Spalten) mit den Daten generieren?

11
Adrian Bob

Hier ist eine funktionierende Lösung in jsfiddle .

Schauen Sie sich die folgende Funktion an. Dies durchläuft ein Array von Daten und aktualisiert das Diagramm:

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

      }
22
Greg Ross
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
                             }
                         }
                    }
1
Khurram Gulzar

Sie können die Daten in einen String schreiben und JSON.parse (stringData) verwenden. Die Jahresspalte muss in doppelte Anführungszeichen gesetzt werden

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