title: Highcharts - how to display multiple graphs on one page using multiple xml files
body: <p>Is there a way to list let's say 2 charts on the same page where each chart has its data xml file? What I'm doing is generating xml files from rrdtool and I would like to view all charts for the same device on one page.</p>
  
  <p>Here's the code I have that works for one chart:</p>
  
  <p><strong>test.html:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.highcharts.com/modules/data.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.highcharts.com/modules/exporting.js"&gt;&lt;/script&gt;
  &lt;script src="js/test.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $.ajax({
      type: "GET",
      url: "xml/test.xml",
      dataType: "xml",
      success: function(xml) {
          var series = []
  
          //define series
          $(xml).find("entry").each(function() {
              var seriesOptions = {
                  name: $(this).text(),
                  data: []
              };
              options.series.push(seriesOptions);
          });
  
          //populate with data
          $(xml).find("row").each(function() {
              var t = parseInt($(this).find("t").text()) * 1000
  
              $(this).find("v").each(function(index) {
                  var v = parseFloat($(this).text())
                  v = v || null
                  if (v != null) {
                      options.series[index].data.push([t, v])
                  };
              });
          });
  
          options.title.text = "CPU - Last 3 hours"
          $.each(series, function(index) {
              options.series.push(series[index]);
          });
          chart = new Highcharts.Chart(options);
      }
  })
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="cpu" style="width: 800px; height: 400px; margin: 0 auto; padding: 20px"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>test.js</strong></p>
  
  <pre><code>Highcharts.setOptions({
      global: {
          useUTC: false
      }
  });
  
  options = {
      chart: {
          renderTo: 'cpu',
          type: 'area',
      },
      title: {
          text: 'CPU'
      },
      subtitle: {
          text: ''
      },
      xAxis: {
          type: 'datetime',
          dateTimeLabelFormats: {
              hour: '%H. %M',
          }
      },
      yAxis: {
          title: {
              text: 'Utilization %'
          }
      },
      tooltip: {
          formatter: function() {
              return '&lt;b&gt;' + this.series.name + '&lt;/b&gt;&lt;br/&gt;' + Highcharts.dateFormat('%H:%M', this.x) + ': ' + Highcharts.numberFormat(this.y, 2) + ' %';
          }
      },
  
  plotOptions: {
                  area: {
                      fillColor: {
                          linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
                          stops: [
                              [0, Highcharts.getOptions().colors[1]],
                              [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                          ]
                      },
                      lineWidth: 1,
                      marker: {
                          enabled: false
                      },
                      shadow: true,
                      states: {
                          hover: {
                              lineWidth: 1
                          }
                      },
                      threshold: null
                  }
              },
  
  
      series: []
  }
  </code></pre>
  
  <p>And XML file - test.xml:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="ISO-8859-1"?&gt;
  
  &lt;xport&gt;
    &lt;meta&gt;
      &lt;start&gt;1396030800&lt;/start&gt;
      &lt;step&gt;300&lt;/step&gt;
      &lt;end&gt;1396030800&lt;/end&gt;
      &lt;rows&gt;4&lt;/rows&gt;
      &lt;columns&gt;1&lt;/columns&gt;
      &lt;legend&gt;
        &lt;entry&gt;cpu&lt;/entry&gt;
      &lt;/legend&gt;
    &lt;/meta&gt;
    &lt;data&gt;
      &lt;row&gt;&lt;t&gt;1396030800&lt;/t&gt;&lt;v&gt;2.8000000000e+01&lt;/v&gt;&lt;/row&gt;
      &lt;row&gt;&lt;t&gt;1396031100&lt;/t&gt;&lt;v&gt;2.9780000000e+01&lt;/v&gt;&lt;/row&gt;
      &lt;row&gt;&lt;t&gt;1396031400&lt;/t&gt;&lt;v&gt;3.1596666667e+01&lt;/v&gt;&lt;/row&gt;
      &lt;row&gt;&lt;t&gt;1396041600&lt;/t&gt;&lt;v&gt;NaN&lt;/v&gt;&lt;/row&gt;
    &lt;/data&gt;
  &lt;/xport&gt;
  </code></pre>