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