chart display freaks out when using collection.find().observeChanges to update chart

[ecofriend]

Here is a link to the partial, relevant code: http://jsbin.com/dutiqadovu/edit?html,js,output

If I use the Questions.find().observeChanges method, the chart becomes jumpy when I hover over the segments. If I leave this method out, then the chart behaves normally.

Please let me know if I need to provide additional information.

[ecofriend]

I am using observerChanges because that is the only way I could figure out to update the chart reactively. If there is a better way, that doesn't also redraw the chart, that would be great.

[froatsnook]

In your code, showAgeGroups is called every time something in the collection changes. This means you're creating a new Chart on the same canvas over and over without cleaning up the old canvas. The behavior is much better if you call destroy before creating the new chart. You're also creating a new Chart twice for some reason.

var lastChart;
function showAgeGroups() {
    var data = [...];

    // ...

    if (lastChart) {
        lastChart.destroy();
    }
    lastChart = new Chart(ctx);
    lastChart.Pie(data);
}

I hope that fixes it for you! At least the jumpiness should go away.

[ecofriend]

Thanks for the suggestion! It fixed the jitter!
Thanks also for pointing out the problem with the chart being created twice. :)

[froatsnook]

OK great. Glad I could help :).

[dandv]

Thanks for the suggestion! It fixed the jitter!

@ecofriend: would this be a reason to provide an actual Meteor wrapper for Chart.js, vs. just using it from npm?

[ecofriend]

@dandv sorry, I can't answer that question with any confidence.