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

Activity

1. kamalsprasad commented on Aug 8, 2015

   

   kamalsprasad

   on Aug 8, 2015

   Author

   More actions

   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.
2. froatsnook commented on Sep 8, 2015

   

   froatsnook

   on Sep 8, 2015

   More actions

   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.
3. kamalsprasad commented on Sep 8, 2015

   

   kamalsprasad

   on Sep 8, 2015

   Author

   More actions

   Thanks for the suggestion! It fixed the jitter!
   Thanks also for pointing out the problem with the chart being created twice. :)
4. froatsnook commented on Sep 9, 2015

   

   froatsnook

   on Sep 9, 2015

   More actions

   OK great. Glad I could help :).
5. dandv commented on Aug 17, 2016

   

   dandv

   on Aug 17, 2016

   More actions

   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?
6. kamalsprasad commented on Aug 17, 2016

   

   kamalsprasad

   on Aug 17, 2016

   Author

   More actions

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