reactive chart with chart.js in meteor

chart.js, charts, javascript, meteor, meteorcharts

Solution

You can use Tracker.autorun to rerun `drawChart` whenever reactive data sources it depends on change:

if (Meteor.isClient) {

    function drawChart() {
      ...
    }

    Tracker.autorun(drawChart());
}

Problem

i am using chart.js to generate charts in a meteor app. Here is my code ``` function drawChart(){ var data = [ { value: Policies.find({'purchased_cover.trip_type': 'Single Trip'}).count(), color:"#F38630" }, { value :Policies.find({'purchased_cover.trip_type': 'Annual Multi-Trip'}).count(), color : "#E0E4CC" }, { value : Policies.find({'purchased_cover.trip_type': 'Backpacker'}).count(), color : "#69D2E7" }, { value :Policies.find({'purchased_cover.trip_type': 'Golf Annual'}).count(), color : "green" }, { value :Policies.find({'purchased_cover.trip_type': 'Golf'}).count(), color : "red" }, { value :Policies.find({'purchased_cover.trip_type': 'Winter Sports Annual'}).count(), color : "yellow" } ] var ctx = $("#pieChart").get(0).getContext("2d"); var myPieChart = new Chart(ctx); new Chart(ctx).Pie(data); } Template.charts.rendered = function(){ drawChart(); }; ``` i have few helpers to display the count in html templates and it works fine whenever the counts changes but the chart is not changing until i reload the page..i want the chart to be reactive to the changes in the collection.

Original source