title: What's the best way to draw multiple charts using NVD3.js from an array of chart data
body: <p>I am trying to render an array of charts using NVD3.  Let's assume that data is an array of charts (object with an array of key values)</p>
  
  <p>Since I am using a selector to insert the chart data at a specific svg element, how can I create multiple charts (data.length) and append them in my html?</p>
  
  <p>my HTML is simple:</p>
  
  <pre><code>&lt;div class="span12"&gt;
       &lt;div id="chart" class="col-md-12"&gt;
            &lt;svg&gt;&lt;/svg&gt;
       &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JavaScript is the standard NVD3 example, with a click event registered on each bar:</p>
  
  <pre><code>  nv.addGraph(function() {
      var chart = nv.models.multiBarChart();
  
      chart.xAxis
          .tickFormat(d3.format(',f'));
  
      chart.yAxis
          .tickFormat(d3.format(',.1f'));
  
      d3.select('#chart svg')
          .datum(data())
          .transition().duration(500)
          .call(chart)
          ;
  
      nv.utils.windowResize(chart.update);
  
      return chart; };
  }, function () {
     d3.selectAll(".nv-bar").on('click',
         function () {
           $('#modalMonthlySubcategory').modal('show')
                });
        });
  );
  </code></pre>
  
  <p>I need to render all charts at once, without knowing how many there are in the array.  IDs need to be unique and the clock events need to work on each bar, it shows a bootstrap modal.</p>