title: how do you chart multiple variables as line chart using highcharts
body: <p>I need to put multiple variables as a line chart to highcharts. Since the number of variables are very high, I need to be able to grab the data and chart it dynamically. </p>
  
  <p>I have multiple of servers that I need to put the cpu utilization of all of the servers in one chart with different lines. My Data would look something like this from the sql query:</p>
  
  <pre><code>ServerName  DateTime           CPU
  ServerA     1/2/2013 12:00:00  30
  ServerA     1/2/2013 01:00:00  20
  ServerA     1/2/2013 02:00:00  50
  ServerB     1/2/2013 12:00:00  30
  ServerB     1/2/2013 01:00:00  30
  ServerB     1/2/2013 02:00:00  5
  ServerC     1/2/2013 01:00:00  10
  serverC     1/2/2013 02:00:00  50
  ServerC     1/2/2013 03:00:00  70
  </code></pre>
  
  <p>I was looking at the below code, but since I cannot see the data, I cannot really make anything out of it. How would I add the result of a sql query as above to the multiple line series chart using highstock charts?</p>
  
  <pre><code>$(function() {
      var seriesOptions = [],
          yAxisOptions = [],
          seriesCounter = 0,
          names = ['MSFT', 'AAPL', 'GOOG'],
          colors = Highcharts.getOptions().colors;
  
      $.each(names, function(i, name) {
  
          $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename='+ name.toLowerCase() +'-c.json&amp;callback=?',   function(data) {
  
              seriesOptions[i] = {
                  name: name,
                  data: data
              };
  
              // As we're loading the data asynchronously, we don't know what order it will arrive. So
              // we keep a counter and create the chart when all the data is loaded.
              seriesCounter++;
  
              if (seriesCounter == names.length) {
                  createChart();
              }
          });
      });
  
  
  
      // create the chart when all data is loaded
      function createChart() {
  
          $('#container').highcharts('StockChart', {
              chart: {
              },
  
              rangeSelector: {
                  selected: 4
              },
  
              yAxis: {
                  labels: {
                      formatter: function() {
                          return (this.value &gt; 0 ? '+' : '') + this.value + '%';
                      }
                  },
                  plotLines: [{
                      value: 0,
                      width: 2,
                      color: 'silver'
                  }]
              },
  
              plotOptions: {
                  series: {
                      compare: 'percent'
                  }
              },
  
              tooltip: {
                  pointFormat: '&lt;span style="color:{series.color}"&gt;{series.name}&lt;/span&gt;: &lt;b&gt;{point.y}&lt;/b&gt; ({point.change}%)&lt;br/&gt;',
                  valueDecimals: 2
              },
  
              series: seriesOptions
          });
      }
  
  });
  </code></pre>