web-dev-qa-db-fra.com

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

Je souhaite créer un graphique à colonnes, à l'aide de l'API de visualisation Google, je peux envoyer les données pour renseigner le tableau DataTable du graphique. Mais je dois générer le graphique avec un nombre variable de colonnes/lignes, en fonction de ce que contiennent mes tableaux et je ne sais pas comment les itérer correctement et les ajouter au DataTable.

Voici un exemple d’analyse de données STATIC pour générer le graphique: (Tout cela en javascript)

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

L'API utilise ces méthodes pour ajouter des colonnes et des lignes: - méthode différente 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 une boucle for ou une double boucle for pour itérer les listes que je veux envoyer et ajouter de manière dynamique au contenu des lignes. 

Pour être plus précis, disons que, dans un cas, j’aurais écrit les données ci-dessus, et dans d’autres, j’aurais eu Ceci:

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

donc je voudrais analyser ces données à travers des paramètres dans la fonction, disons (je ne sais pas si ce serait la bonne idée) 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 itérer les arraylists que j’envoie à dynamic générer le datatable (avec un nombre variable de lignes et de colonnes) contenant les données?

javascriptgoogle-apivisualization
11
Adrian Bob

Voici une solution de travail dans jsfiddle .

Regardez la fonction suivante. Ceci itère sur un tableau de données et met à jour le graphique:

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

Vous pouvez mettre les données dans une chaîne et utiliser JSON.parse (stringData). La colonne année doit être entre guillemets

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