Comment ajouter dynamiquement des lignes / colonnes à un graphique à colonnes Google

Je veux créer un Graphique en Colonnes , à l'aide de Google Visualisation de l'API , je peux envoyer les données pour remplir le tableau de la DataTable dans la matrice de la forme. Mais j'ai besoin de générer le graphique avec un nombre variable de colonnes/lignes , en fonction de ce que mes tableaux contiennent et je ne sais pas comment correctement itérer et de les ajouter à la DataTable.

Voici un exemple pour l'analyse STATIQUE de données pour générer le graphique :
(tout cela est en javascript)

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

L'API a ces méthodes pour ajouter des colonnes et des lignes :
- autre méthode pour obtenir les mêmes données que ci-dessus :

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

Ce dont j'ai besoin est d'une boucle for ou une double boucle for pour parcourir les arraylists que j'envoie et ajouter dynamiquement des rangées de contenu.

Pour être plus précis, disons que dans un cas, j'aurais les données écrites ci-dessus , et dans d'autres cas, j'aurais
ce :

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

je voudrais donc analyser ces données par l'intermédiaire des paramètres dans la fonction disons ( je ne sais pas si ce serait le droit de ideea) de nombreux arraylists contenant chaque ligne : Row1=['2004', 1000, 400 , 232 ]
Row2=['2005', 1170, 460 , 421 ] et ....

Comment puis-je utiliser une boucle for ou une double boucle for pour parcourir les arraylists que je l'envoie à la dynamique de générer de la datatable (avec un nombre variable de lignes et de colonnes ) contenant les données ?

source d'informationauteur Adrian Bob

  1. 21

    Voici une solution qui fonctionne dans jsfiddle.

    Oeil à la fonction suivante. Ce parcourt un tableau de données et les mises à jour de la carte:

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

      }
  2. 1
    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
                             }
                         }
                    }
  3. 0

    Vous pouvez mettre les données dans une chaîne de caractères et l'utilisation de JSON.parse(stringData). L'année de la colonne doit être entre guillemets doubles

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