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; });
Comments
There are no comments on this post
Want to leave a comment?
Comments are moderated. They will publish only if they add to the discussion in a constructive way. Please be polite.