I would like to use chart.js in my joomla-component called “bestia”. To do so I imported chart.js as media-element in the manifest.xml.
I’m calling the js by doing the following:
JHtml::script(Juri::root() . 'media/com_hostinghelden/chartjs/Chart.js');
Now I would like to use a helper to shorten things up a bit. My helper should draw a graph…
abstract class JHtmlGraphs { public function draw($title = NULL, $labelset = NULL, $data = NULL, $data2 = NULL) { $script = "<script> 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 }); } </script>"; $canvas = "<div style='width: 100%'><canvas id='canvas_$title' height='20' width='20'></canvas></div>"; return $script . $canvas; } }
Well, if I call this Jhtml-Graphs, the graph is rendered correctly:
<?php echo JHtml::_('graphs.draw', "Titel", $labelset, $data, $data2); ?>
But if I want to add a second graph to my page, the first graph is no longer shown:
<?php echo JHtml::_('graphs.draw', "Titel2", $labelset, $data, $data2); ?>
What can I do?
Advertisement
Answer
You are redeclaring window.onload
function. Thats why you will draw only one (last) chart.
window.onload = function(){ var ctx_$title = document.getElementById('canvas_$title').getContext('2d'); window.myBar = new Chart(ctx_$title).Bar(barChartData_$title, { responsive : true }); }
What you can do to fix that. Im proposing to change JHtmlGraphs
class as following:
abstract class JHtmlGraphs { private $titles = array(); public function draw($title = NULL, $labelset = NULL, $data = NULL, $data2 = NULL) { $script = "<script> 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 ] } ] };</script>"; $canvas = "<div style='width: 100%'><canvas id='canvas_$title' height='20' width='20'></canvas></div>"; $this->titles[] = $title; //storing titles return $script . $canvas; } public function finishDrawing() { $launchCharts = ''; foreach($this->titles as $title) { $launchCharts .= "var ctx_$title = document.getElementById('canvas_$title').getContext('2d'); window.myBar_$title = new Chart(ctx_$title).Bar(barChartData_$title, { responsive : true });"; } $this->titles = array(); $script = "<script>window.onload = function(){ $launchCharts }</script>"; return $script; } }
I modified your scripts. Now your onload
function will be generated one time, from finishDrawing
method:
<?php echo JHtml::_('graphs.draw', "Titel", $labelset, $data, $data2); ?> <?php echo JHtml::_('graphs.draw', "Titel2", $labelset, $data, $data2); ?>
And somewhere at the bottom you have to call new function:
<?php echo JHtml::finishDrawing(); //you better know than me how to call this function?>