title: multiple highcharts on one page
body: <p>I'm wishing to render multiple charts using mysql data, there will be more or less charts depending on a particular search.  I've successfully created a single chart, and my php file echoes the required json format nicely.</p>
  
  <p>Now, what I would like is to be able to loop over an array and draw new charts based on the array vales being parsed to the php which in turn provides different json data to be rendered.</p>
  
  <p>by the way, my javasript is very limited so here goes my code and thoughts:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(function () {
          var chart;
          var venue = &lt;?php echo json_encode($venue_name); ?&gt;; /* parsed to php file */
          var distances = &lt;?php echo json_encode($data); ?&gt;; /* array to be looped over */
          $(document).ready(function() {
  
              var options = {
                      ....
                  series: []
                      ....
               };
  
               //
              $.each(distances, function() {
                 $.each(this, function(name, value) {
                 // do some ajax magic here:... 
                  GET 'myphpfile.php?venue='+venue+'&amp;'+distances
  
                    function drawNewChart(){
                        $('#mainSite').append('&lt;div id="container" style="float:left; display:inline"&gt;&lt;/div&gt;');
  
                  chart = new Highcharts.Chart(options); 
          });
      });        
  
      &lt;/script&gt;
  </code></pre>
  
  <p>What I have learnt is that I cannot loop an include php file which has the completed php and jquery... </p>