title: Displaying multiple Highcharts from single json
body: <p>In this fiddle : <a href="http://jsfiddle.net/LLExL/5018/" rel="nofollow">http://jsfiddle.net/LLExL/5018/</a> 
  I'm displaying a chart with dates on X axis and counts on Y axis.</p>
  
  <p>I'm attempting to generalize this a little by displaying multiple charts using a single snippet of json. So have defined this modified json file : </p>
  
  <pre><code>[
      {
          "header": "test1",
          "children": [
              {
                  "date": "2015-01-02",
                  "count": "36"
              },
              {
                  "date": "2015-01-03",
                  "count": "29"
              }
          ]
      },
      {
          "header": "test2",
          "children": [
              {
                  "date": "2015-01-02",
                  "count": "36"
              },
              {
                  "date": "2015-01-03",
                  "count": "29"
              }
          ]
      }
  ]
  </code></pre>
  
  <p>Does Highcharts support this type of functionality out of box ? If so how it be achieved ? Each header element above is chart header.</p>
  
  <p>fiddle code : </p>
  
  <pre><code>html  :
  
  &lt;script src="http://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.highcharts.com/modules/exporting.js"&gt;&lt;/script&gt;
  
  &lt;div id="container" style="width: 350px; height: 300px;"&gt;&lt;/div&gt;
  
  javascript : 
  
  var pointStart = new Date().getTime();
  
  var jsonString = '[ {"date":"2015-01-02","count":"36"} , {"date":"2015-01-03","count":"29"} ]';
  
  var myData = JSON.parse(jsonString);
  var data = []
  
  var combinedHeights=[]
  
  $.each(myData, function(i, obj) {
      var d = new Date(obj.date)
      data.push([Date.parse(d), parseInt(obj.count)])
      combinedHeights.push(parseInt(obj.count))
  });
          jQuery(document).ready(function() { 
  
   $('#container').highcharts({
          chart       : { type    : 'line' },
           title: {
              text: 'test' // Title for the chart
          },
          subtitle    : { },
          legend      : { enabled : true },
          tooltip     : { },
          plotOptions : {
              series  : {
                  pointStart      : pointStart,
                  pointInterval   : 24 * 3600 * 1000 * 30
              }
          },
          xAxis      : { 
  
              type           : 'datetime'
          },
          yAxis: {
          minPadding:0,
          maxPadding:0,
          gridLineColor:'rgba(204,204,204,.25)',
          gridLineWidth:0.5,
          title: { 
              text: 'Access Count',
              rotation:0,
              textAlign:'right',
              style:{ 
                  color:'rgba(0,0,0,.9)',
              }
          },
          labels: { 
              style: {
                  color: 'rgba(0,0,0,.9)',
                  fontSize:'9px'
              }
          },
          lineWidth:.5,
          lineColor:'rgba(0,0,0,.5)',
          tickWidth:.5,
          tickLength:3,
          tickColor:'rgba(0,0,0,.75)'
      }
      }); 
      var chart = $('#container').highcharts();
      chart.addSeries({ 
          data: data    
      });
  
      }); 
  </code></pre>
  
  <p>Update : </p>
  
  <pre><code>http://jsfiddle.net/LLExL/5081/
  
  Code : 
  
  &lt;script src="http://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.highcharts.com/modules/exporting.js"&gt;&lt;/script&gt;
  
  &lt;div id="container0" style="width: 350px; height: 300px;"&gt;&lt;/div&gt;
  &lt;div id="container1" style="width: 350px; height: 300px;"&gt;&lt;/div&gt;
  
  
  jQuery(document).ready(function() { 
  
      var jsonString2 = '[ { "header": "test1", "children": [ { "date": "2015-01-02", "count": "36" }, { "date": "2015-01-03", "count": "29" } ] }, { "header": "test2", "children": [ { "date": "2015-01-02", "count": "16" }, { "date": "2015-01-03", "count": "15" } ] } ]'
  
      var myData = JSON.parse(jsonString2);
  
      $.each(myData, function(i, obj) {
          create(JSON.stringify(obj) , 'container'+i)
      });
  
  
      var jsonString = '{ "header": "tester", "children": [ { "date": "2015-01-02", "count": "76" }, { "date": "2015-01-03", "count": "29" } ] }'
  
     // for (i = 1; i &lt;= 2; i++) { 
      // create(jsonString , 'container'+i)
  //  }
  
  
  function create(jsonString , containerName) {
  var pointStart = new Date().getTime();
  
  var myData = JSON.parse(jsonString);
  var data = []
  
  var combinedHeights=[]
  
  $.each(myData.children, function(i, obj) {
      var d = new Date(obj.date)
      data.push([Date.parse(d), parseInt(obj.count)])
      combinedHeights.push(parseInt(obj.count))
  });
  
   $('#'+containerName).highcharts({
          chart       : { type    : 'line' },
           title: {
              text: myData.header // Title for the chart
          },
          subtitle    : { },
          legend      : { enabled : true },
          tooltip     : { },
          plotOptions : {
              series  : {
                  pointStart      : pointStart,
                  pointInterval   : 24 * 3600 * 1000 * 30
              }
          },
          xAxis      : { 
  
              type           : 'datetime'
          },
          yAxis: {
          minPadding:0,
          maxPadding:0,
          gridLineColor:'rgba(204,204,204,.25)',
          gridLineWidth:0.5,
          title: { 
              text: 'Access Count',
              rotation:0,
              textAlign:'right',
              style:{ 
                  color:'rgba(0,0,0,.9)',
              }
          },
          labels: { 
              style: {
                  color: 'rgba(0,0,0,.9)',
                  fontSize:'9px'
              }
          },
          lineWidth:.5,
          lineColor:'rgba(0,0,0,.5)',
          tickWidth:.5,
          tickLength:3,
          tickColor:'rgba(0,0,0,.75)'
      }
      }); 
      var chart = $('#'+containerName).highcharts();
      chart.addSeries({ 
          data: data    
      });
  }
      }); 
  </code></pre>