title: Chart.js - Creating multiple charts on one page
body: <p>I would like to use <a href="http://chartjs.org" rel="nofollow">chart.js</a> in my joomla-component called "bestia".
  To do so I imported chart.js as media-element in the manifest.xml. </p>
  
  <p>I'm calling the js by doing the following:</p>
  
  <p><code>JHtml::script(Juri::root() . 'media/com_hostinghelden/chartjs/Chart.js');</code></p>
  
  <p>Now I would like to use a helper to shorten things up a bit. My helper should draw a graph...</p>
  
  <pre><code>abstract class JHtmlGraphs 
  {
      public function draw($title = NULL, $labelset = NULL, $data = NULL, $data2 = NULL)
      {
          $script = "&lt;script&gt; var barChartData_$title = { labels : [ {$labelset} ], datasets : [ { fillColor : 'rgba(220,220,220,0.5)', strokeColor : 'rgba(220,220,220,0.8)', highlightFill: 'rgba(220,220,220,0.75)', highlightStroke: 'rgba(220,220,220,1)', data : [ $data ] }, { fillColor : 'rgba(151,187,205,0.5)', strokeColor : 'rgba(151,187,205,0.8)', highlightFill : 'rgba(151,187,205,0.75)', highlightStroke : 'rgba(151,187,205,1)', data : [ $data2 ] } ] }; window.onload = function(){ var ctx_$title = document.getElementById('canvas_$title').getContext('2d'); window.myBar = new Chart(ctx_$title).Bar(barChartData_$title, { responsive : true }); } &lt;/script&gt;";
          $canvas = "&lt;div style='width: 100%'&gt;&lt;canvas id='canvas_$title' height='20' width='20'&gt;&lt;/canvas&gt;&lt;/div&gt;";
          return $script . $canvas;
      }
  }
  </code></pre>
  
  <p>Well, if I call this Jhtml-Graphs, the graph is rendered correctly:</p>
  
  <pre><code>&lt;?php echo JHtml::_('graphs.draw', "Titel", $labelset, $data, $data2);  ?&gt;
  </code></pre>
  
  <p>But if I want to add a second graph to my page, the first graph is no longer shown:</p>
  
  <pre><code>&lt;?php echo JHtml::_('graphs.draw', "Titel2", $labelset, $data, $data2); ?&gt;
  </code></pre>
  
  <p>What can I do?</p>