- Publish database collection
- Setup template subscription
- Wait for datasource to be ready once template is rendered
- Generate Data arrays for charting
- Call charting constructor
Common JS Code:
Students = new Mongo.Collection("students");
Server Side JS Code:
Meteor.publish('students',function(){
return Students.find()});
Client Side JS Code:
Template.chart2.onCreated(function() {
students = this.subscribe('students');
});
Template.chart2.rendered = function(){
Tracker.autorun(function(){
if (students.ready()){
var seriesData = [];
var labelData = [];
var options = Students.find({},{gpa:1,name:1,_id:0});
options.forEach(function(option) {
seriesData.push(parseFloat(option.gpa));
labelData.push(option.name);
});
var returnobject = {
title: {
text: 'GPA data',
x: -20 //center
},
subtitle: {
text: 'Source: Me',
x: -20
},
xAxis: {
categories: labelData
},
yAxis: {
title: {
text: 'GPA Grades'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: ''
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
type:'line',
name: 'GPA',
data: seriesData
}],
}; //return object
jQuery('#container').highcharts(returnobject);
} // if ready
});
}
Client Side HTML:
<template name='chart2'>
<h2>High Charts</h2>
<div id="container" style="width:100%; height:400px;"></div>
</template>