reactive chart with chart.js in meteor

Question

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.

Answer 1

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

if (Meteor.isClient) {

    function drawChart() {
      ...
    }

    Tracker.autorun(drawChart());
}