Динамически добавлять наборы данных разных размеров в Google Visulation Chart

Здесь функция, которую я использую для построения массива для google.visualization.arrayToDataTable. Он нуждается в двумерном массиве, вы можете использовать внутренние значения или литералы для каждого заголовка/значения столбца.

В первом разделе строятся заголовки столбцов. С помощью объекта вы можете назначать значения для id, label и type. возможно, другие...

Для значений столбца объект имеет два ключа: v (значение) и f (форматированное значение).

  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 to be returned
    var rowArray;  // data row array
    var nlItems;   // xml columns
    var nlRows;    // xml rows

    // init return array and column heading array
    gglArray = [];
    colArray = [];

    // get columns heading xml nodes
    nlItems = sender.get_xml().selectNodes('//cog:item');

    // build column headings
    for (var i = 0; i < 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 to return array
    gglArray.push(colArray);

    // get column value xml nodes
    nlRows = sender.get_xml().selectNodes('//cog:row');

    // build data rows
    for (var i = 0; i < nlRows.length; i++) {
      // init row array
      rowArray = [];

      // process each column
      for (var x = 0; x < nlRows[i].childNodes.length; x++) {
        // check if column is null
        if (nlRows[i].childNodes[x].getAttribute('xs:nil')) {
          colValue = null;
        } else {
          // set the text value, depends on the browser
          colValue = nlRows[i].childNodes[x].text || nlRows[i].childNodes[x].textContent;
        }

        // check the data type
        switch(colArray[x].type) {
          // format date columns
          case 'datetime':
            // ensure there is a value
            if (colValue) {
              // set date value
              colValue = new Date(colValue);

              // add column value to row array
              rowArray.push({
                v: colValue,                  // column value
                f: colValue.toLocaleString()  // column formatted value
              });
            } else {
              rowArray.push(colValue);
            }
            break;

          default:
            // add column value to row array, no object needed
            rowArray.push(colValue);
        }
      }

      // add column values to return array
      gglArray.push(rowArray);
    }

    return gglArray;
  }

XML, который я использую, похож на этот...

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