title: javascript display multiple Highcharts using single function
body: <p>I am trying to display multiple highcharts on the same webpage in different containers.  I know that I can just copy and paste a standard highcharts function a bunch of time to render many graphs to a page in different containers, but since the number of highcharts I want to display is going to depend on a value that is extracted from a database (in the example below the number of charts will be equal to @value) I ideally want to write just one highcharts function, and loop over it many times, where in each iteration I would like to set the chart options to be something different.  I've tried various permutations the following code:</p>
  
  <pre><code>for (i = 0; i &lt;= &lt;% @value %&gt;; i ++){
      $(function (i) {
         graphTitleArray = &lt;% @markers.split(',') %&gt;
         graphTitle = graphTitleArray[i]
         graphData = &lt;% @array[i].to_json %&gt;
         switch(i){
            case 0:
               containerNum =  'container0'
            case 1:
               containerNum = 'container1'
  
            ...
         }
         $(containterNum).highcharts({
            title: {
               text: graphTitle
            }
            series: [{
                  name: 'something',
                  data : graphData
              }]
           //more options here
         })
      }
  }
  </code></pre>
  
  <p>After trying this type of strategy multiple times, I can't get the graphs to render or get the function to recognize the correct value of 'i'.  Does anyone know a better way to do this?
  Thanks!</p>