javascript - Dynamically add different sized data sets to Google Visulation Chart -

i loop through data using simplexml. i'm looking flexible way loop through data purposes of drawing google chart. keeping in mind number of columns google chart vary @ stage.

below sample of data trying plot on chart.

<dealers>   <dealer>     <dealer>sydney</dealer>     <sales>265</sales>     <year>2015 fy</year>   </dealer>   <dealer>     <dealer>sydney</dealer>     <sales>218</sales>     <year>2016 fy</year>   </dealer>   <dealer>     <dealer>melbourne</dealer>     <sales>143</sales>     <year>2016 fy</year>   </dealer>   <dealer>     <dealer>brisbane</dealer>     <sales>181</sales>     <year>2016 fy</year>   </dealer> </dealers> 

how can loop through produce below draw chart?

var data = google.visualization.arraytodatatable([                   ['year', 'sydney', 'melbourne', 'brisbane'],                   ['2015 fy', 265, 0, 0],                   ['2016 fy', 218, 143, 181]                 ]); 

remembering in future may have new dealer , hence loop need flexible enough add new dealer column, , correspondingly values in correct position in rows. shown in sample data above, need add 0 row no value specified year.

here's function use build array google.visualization.arraytodatatable. needs two-dimensional array, can use intrinsic values or literal objects each column heading/value.

the first section builds column headings. object, can assign values id, label, , type. maybe others...

for column values, object has 2 keys: v (value) , f (formatted value).

  var data = new google.visualization.arraytodatatable(getxmldataarray(xmlobj), false);    function getxmldataarray(sender, args) {     var colarray;  // column heading array     var colhdr;    // column heading     var colvalue;  // column value     var gglarray;  // array returned     var rowarray;  // data row array     var nlitems;   // xml columns     var nlrows;    // xml rows      // init return array , column heading array     gglarray = [];     colarray = [];      // columns heading xml nodes     nlitems = sender.get_xml().selectnodes('//cog:item');      // build column headings     (var = 0; < nlitems.length; i++) {       // column literal       colhdr = {};       colhdr.id = 'column_' + i;       colhdr.label = nlitems[i].getattribute('name');        // check data type       switch(nlitems[i].getattribute('type')) {         case 'xs:double':           colhdr.type = 'number';           break;          case 'xs:datetime':           colhdr.type = 'datetime';           break;          default:           colhdr.type = 'string';       }        // add column       colarray.push(colhdr);     }      // add column headings return array     gglarray.push(colarray);      // column value xml nodes     nlrows = sender.get_xml().selectnodes('//cog:row');      // build data rows     (var = 0; < nlrows.length; i++) {       // init row array       rowarray = [];        // process each column       (var x = 0; x < nlrows[i].childnodes.length; x++) {         // check if column null         if (nlrows[i].childnodes[x].getattribute('xs:nil')) {           colvalue = null;         } else {           // set text value, depends on browser           colvalue = nlrows[i].childnodes[x].text || nlrows[i].childnodes[x].textcontent;         }          // check data type         switch(colarray[x].type) {           // format date columns           case 'datetime':             // ensure there value             if (colvalue) {               // set date value               colvalue = new date(colvalue);                // add column value row array               rowarray.push({                 v: colvalue,                  // column value                 f: colvalue.tolocalestring()  // column formatted value               });             } else {               rowarray.push(colvalue);             }             break;            default:             // add column value row array, no object needed             rowarray.push(colvalue);         }       }        // add column values return array       gglarray.push(rowarray);     }      return gglarray;   } 

the xml i'm using looks similar this...

<dataset>     <metadata>           <item name="site" type="xs:string" length="18"/>           <item name="id" type="xs:double" precision="2"/>     </metadata>     <data>         <row>             <value>abc</value>             <value>4886</value>         </row>         <row>             <value>def</value>             <value>4667</value>         </row>         <row>             <value>ghi</value>             <value>2892</value>         </row>         ...     </data> </dataset>