Meteor 1.3 - Highcharts usage help

Hi - I need some help configuring Highcharts with meteor 1.3 (using blaze). I currently can’t get the chart to display at all even with the very basic example and the hardcoded data.

I’ve tried a few things, few examples, but most are old, not working, or using react.

I installed Highcharts using “npm install highcharts --save” and I can see it the modules folder.

All other aspects of the app are still functional. Nothing crashes and I see no errors but the chart is simply not being displayed.

I’m not really sure what I’m doing wrong/missing. Any suggestions would be much appreciated.

myapp/client/Test.js

import Highcharts from 'highcharts/highcharts';
//import Highcharts from 'highcharts'  --- this also didn't work

function createHigh() { 
    $('#container').highcharts({
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Fruit Consumption'
        },
        xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges']
        },
        yAxis: {
            title: {
                text: 'Fruit eaten'
            }
        },
        series: [{
            name: 'Jane',
            data: [1, 0, 4]
        }, {
            name: 'John',
            data: [5, 7, 3]
        }]
    });
}

Template.Test.onCreated(function() {
	var self = this;
	self.autorun(function() {
		self.subscribe('someIrrelevantSub');
	});
});

Template.Test.onRendered(function() {
	var self = this;
	self.autorun(function () {
		createHigh();
	});
});

Template.Test.helpers({
	irrelevantHelper: function(){
		var x;
                ...
                ...
	}
});

Test.html

<template name="Test">
        <span class="huge-text">Reserved for charts</span>
        <div id="container"></div>
</template>	

You may get some ideas here (uses a highcharts package, rather than an NPM module, but the basics are the same):

Thanks for the quick reply. I had read through that post earlier and tried your sample. Using the code from your sample and substituting the highcharts:highcharts-meteor for the npm highcharts module did exactly the same thing. No chart, nothing loaded, no errors.

This worked for me

set up

meteor create bar
cd bar
meteor npm install
meteor npm install highcharts --save

client.html

<head>
  <title>simple</title>
</head>

<body>
  {{> Test}}
</body>

<template name="Test">
        <span class="huge-text">Reserved for charts</span>
        <div id="container"></div>
</template>

client.js

import Highcharts from 'highcharts';
import { Template } from 'meteor/templating';

function createHigh() {
  $('#container').highcharts({
    chart: {
      type: 'bar'
    },
    title: {
      text: 'Fruit Consumption'
    },
    xAxis: {
      categories: ['Apples', 'Bananas', 'Oranges']
    },
    yAxis: {
      title: {
        text: 'Fruit eaten'
      },
    },
    series: [
      {
        name: 'Jane',
        data: [1, 0, 4]
      }, {
        name: 'John',
        data: [5, 7, 3]
      }
    ]
  });
}

Template.Test.onCreated(function() {
});

Template.Test.onRendered(function() {
  this.autorun(() => {
    createHigh();
  });
});
1 Like

Thanks! I tried that fresh setup and it did work. Copied the same code into my project / template and it didn’t display anything again. I immediately realized, the problem right simply be because I have my layout wrapped around {{#if Template.subscriptionsReady}} which was simply my fault.

I placed the container div outside of the subscription ready and it worked perfectly.

I’m not 100% sure the cause, but I want to believe the container div element was not available to highcharts because its been locked while waiting for my subscriptions.

Thanks again for all your help.

1 Like

That’s correct: using {{#if Template.subscriptionsReady}} (which is reactive) means that the <div> would not be created until the subscription became ready. In my code, I created the <div> upfront and managed the reactivity in the code.

@robfallows, you have experiance with Highcharts, will you look at my situation moving to a imports style project with Highcharts?