Metero Error with Highcharts - Exception from Tracker afterFlush function?

I am using the maazalik:highcharts package and I’m getting the error message in my console “Exception from Tracker afterFlush function” and undefined.

What I did was simply take his example for the ‘gaugeReactiveDemo’ demo and copied them into my application. I then renamed the files and template to “cumulativeCheckIn” and called using {{>cumulativeCheckIn}} from my main template page and I get the error mentioned above.

The template:


In this example the data is reactive and is dependent on a session variable. Feel free to test it:

   <select id="reactive">
      <option value="10">10</option>
      <option value="20">20</option>
      <option value="30">30</option>
      <option value="30">30</option>
      <option value="40">40</option>
      <option value="50">50</option>
      <option value="60">60</option>
      <option value="70">70</option>
      <option value="80">80</option>
      <option value="90">90</option>
      <option value="100">100</option>
      <option value="120">120</option>
      <option value="140">140</option>
      <option value="160">160</option>
      <option value="180">180</option>
      <option value="200">200</option>

   <div id="container-gauge-reactive" style="width: 300px; height: 200px;"></div>

and the javascript:

var chart;
 * Function to draw the gauge
function builtGaugeReactive() {

    var data = new Array();

    data[0] = 80;

    if(Session.get('reactive') !== undefined)
        data[0] = Session.get('reactive');

    chart = $('#container-gauge-reactive').highcharts({

        chart: {
            type: 'solidgauge'

        title: null,

        pane: {
            center: ['50%', '85%'],
            size: '140%',
            startAngle: -90,
            endAngle: 90,
            background: {
                backgroundColor: '#EEE',
                innerRadius: '60%',
                outerRadius: '100%',
                shape: 'arc'

        tooltip: {
            enabled: false

        yAxis: {
            stops: [
                [0.1, '#55BF3B'], // green
                [0.5, '#DDDF0D'], // yellow
                [0.9, '#DF5353'] // red
            lineWidth: 0,
            minorTickInterval: null,
            tickPixelInterval: 400,
            tickWidth: 0,
            title: {
                y: -70
            labels: {
                y: 16
            min: 0,
            max: 200,
            title: {
                text: 'Speed'

        plotOptions: {
            solidgauge: {
                dataLabels: {
                    y: 5,
                    borderWidth: 0,
                    useHTML: true

        credits: {
            enabled: false

        series: [{
            name: 'Speed',
            data: data,
            dataLabels: {
                format: '<div style="text-align:center"><span style="font-size:25px;color:black">{y}</span><br/>' +
                       '<span style="font-size:12px;color:silver">km/h</span></div>'
            tooltip: {
                valueSuffix: ' km/h'

 * Call the function to built the chart when the template is rendered
Template.cumulativeCheckIn.rendered = function () {
    // Tracker.autorun(function () {
    // });

 * Template events
 */ = {

    'change #reactive': function (event, template) {
        var newValue = $(;
        Session.set('reactive', parseInt(newValue));

I’ve searched on the forums and Google and while I see references to the error, I can’t seem to find a solution. Things I’ve tried:

  1. I see references on the web stating that it can happen if I’m calling jQuery twice, but I don’t think I am. I’m just using the built-in meteor jQuery & blaze.
  2. Tried wrapping it in Meteor.setTimeout.

The template text and the dropdown does display, but no gauge / chart displays. TIA!

Your code worked fine for me, although it’s using a deprecated API.

For example, you use Template.cumulativeCheckIn.rendered = function () { instead of Template.cumulativeCheckIn.onRendered(function () {

and = { instead of{

(There are other changes I would make, too). However, having said that, it works fine for me and reactively updates the gauge (with the autorun uncommented).

Hmm, strange. Ok, thanks for trying this.

I uncommented that out as well and still get the error. Totally perplexed, any idea what could be causing me to get that error then? I do have other templates on the same page that are working fine, including a googles maps area.

Nevermind, I removed that package and installed what looks like the official highcharts for meteor: highcharts:highcharts-meteor. The demo at least seems to work for me.

1 Like