Multiple charts per template

[dpatte]

I notice your highchartHelper depends on a yield > in blaze to draw the chart. I would like to include several charts per template. How would I do this? I cannot seem to use two yields, and tried to add the divs directly as follows, with no luck:

<div id="activeChart" style="height: 100%; width: 100%"></div>
<div id="passiveChart" style="height: 100%; width: 100%"></div>

[jhuenges]

I am not sure how this could be done with the helper. However, you can use multiple divs: https://github.com/jhuenges/highcharts-demo Maybe this helps until @MaazAli can answer

[dpatte]

I have looked through his highcharts helper code, and it should be possible to get the same effect as his yield using onRendered directly. Thanks.

[MaazAli]

Haven't looked at the helper code in a while, but it should be possible with the helper. I'm assuming you're unable to do this

{{> highchartsHelper chartId="test" chartWidth="100%" charHeight="100%" chartObject=topGenresChart}}
{{> highchartsHelper chartId="test"2 chartWidth="100%" charHeight="100%" chartObject=test2ChartObject}}

[dpatte]

Hi MaazAli. Yes, I tried that. Blaze doesn't seem to like two yields on the same template, though. Only the first one works.

[dpatte]

Got a solution working...

in my template i use <div id="myChart" style="height:100%, width:100%"></div> <div id="myChart2" style="height:100%, width:100%"></div>

For the JS I use

Template.myPage.onRendered(function(){
  this.autorun(function() {
    $('#myChart').highcharts(chartfunc());
    $('#myChart2').highcharts(chartfunc2());
  });
})

chartfunc = function()
{
  return hicharts object from here;
}

chartfunc2 = function()
{
  return hicharts object from here;
}