MeteorJS with chart.js 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:

Budget = new Mongo.Collection("budget");

Server Side JS Code:

Meteor.publish("chart1", function () {
    return Budget.find({},{value:1,itemname:1,_id:0});
    
  });

Client Side JS Code:

Template.chart.onCreated(function() {
  chart1 = this.subscribe('chart1');
});
  
  /*global drawchart */  
  drawchart = function(datavalues,datalabels){

     var data = {
    labels: datalabels,
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,0,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: datavalues,
            
        },
       
    ]
}; 
   var ctx = $("#myChart").get(0).getContext("2d");
    new Chart(ctx).Line(data);
  };
 
    
Template.chart.rendered = function(){
      
      Tracker.autorun(function () {
          if (chart1.ready()) {
                var budgetdata = Budget.find();
                var datavalues=[];
                var datalabels=[];
                budgetdata.forEach(function(option) {
                   
                    datavalues.push(option.value);
                    datalabels.push(option.itemname)
                });
             
                drawchart(datavalues,datalabels);
         }   
    
        });

    };

Client Side HTML:

  < template name="chart">
    <h2>Chart:Chart</h2>
     <canvas id="myChart" width="400" height="400"></canvas>

</template>