Highcharts and Meteor

This article will describe how to install and use Highcharts in Meteor.

1. Installation

To install Highcharts in Meteor, run in the terminal:

> meteor add highcharts:highcharts-meteor

Now, you have installed Highcharts in your project. If you want to include modules from the Highcharts library like exporting, drilldown, 3D charts etc., read more here.

2. Live chart

The example below shows how to create a live chart in Meteor using Highcharts:

Note: All examples in this article are based on Meteor’s tutorial.

> index.html

<div id="chart">{{createChart}}</div>

Code above will create empty div which will require a helper in our template. Let’s add it:

if (Meteor.isClient) {
  Meteor.subscribe("Tasks");

  Template.body.helpers({
    createChart: function () {
      // Gather data: 
      var allTasks = Tasks.find().count(),
            incompleteTask = Tasks.find({checked: {$ne: true}}).count(),
            tasksData = [{
                y: incompleteTask,
                name: "Incomplete"
             }, {
                 y: allTasks - incompleteTask,
                 name: "Complete"
             }];
      // Use Meteor.defer() to craete chart after DOM is ready:
      Meteor.defer(function() {
        // Create standard Highcharts chart with options:
        Highcharts.chart('chart', {
          series: [{
            type: 'pie',
            data: tasksData
          }]
        });
      });
    }
  });

3. Live chart with Highcharts API

The example above recreates a new chart for each new data added to the chart. As long as the amount of data is low, the chart’s responsiveness will not be challenged. Nevertheless, for a larger amount of data such as 50 000 points, the chart’s responsiveness will no longer be guaranteed. One way to resolve that issue is by using Highcharts’ API to update the chart (check the example below):

 Template:

 > index.html

{{> reactiveChart chart_id="liveChart"}} <template name="reactiveChart"> <div id="{{chart_id}}"></div> </template>

> template.js

  Template.reactiveChart.onRendered(function () {
		var cursor = Template.currentData(),
				query = Tasks.find(),
				initializing = true, // add initializing variable, see:  http://docs.meteor.com/#/full/meteor_publish
				liveChart;
	
		// Create basic line-chart:
		liveChart = Highcharts.chart(cursor.chart_id, {
				title: {
						text: 'Number of elements'
				},
				series: [{
						type: 'column',
						name: 'Tasks',
						data: [query.count()]
				}]
		});
	
		// Add watchers:
		query.observeChanges({
				added: function () {
					if (!initializing) {
						// We will use Highcharts API to add point with "value = previous_value + 1" to indicate number of tasks
						var points = liveChart.series[0].points;
						liveChart.series[0].addPoint(
								points[points.length - 1].y + 1
						);
					}
				},
				removed: function () {
					if (!initializing) {
						// We will use Highcharts API to add point with "value = previous_value - 1" to indicate number of tasks
						var points = liveChart.series[0].points;
						liveChart.series[0].addPoint(
								points[points.length - 1].y - 1
						);
					}
			}
		});   
		initializing = false;
	});