javascript - reactive chart with chart.js in meteor - Stack Overflow

admin管理员组

文章数量:1313121

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.

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.

• javascript
• charts
• meteor
• chart.js
• meteorcharts

Share Improve this question Follow asked Jan 28, 2014 at 7:43 Rajanand02Rajanand02 1,3031313 silver badges1919 bronze badges 2

• in html i am just using '<canvas id="pieChart" width="400" height="400"></canvas>' to render the charts – Rajanand02 Commented Jan 28, 2014 at 7:45
• 1 How are you including the chartjs.js file in your meteor app if i may ask? thank you. – Mustafa Commented Nov 8, 2014 at 1:32

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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

if (Meteor.isClient) {

    function drawChart() {
      ...
    }

    Tracker.autorun(drawChart());
}

本文标签： javascriptreactive chart with chartjs in meteorStack Overflow