MeteorJS with highchart charting and database

  • 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>