Refresh Chart on Reactive Data Update


#1

I’m using this charting package:
http://benpickles.github.io/peity/

I have this rendering fine on load, but I can’t seem to get it working on reactive data changes. Since I have many of these charts rendering in a single table, I cannot hardcode the lookups to refresh the chart.

Any suggestions on how to get this charting package to refresh when data changes? This package requires you to run a refresh() function on the element that is initialized with a chart. The trouble I’m having is passing a dom reference to a helper function I write to initiate the refresh. This doesn’t seem possible.

Any suggestions on how to get a package like this to have live refreshes? Here is an example of a similar table to what I have:
http://webapplayers.com/inspinia_admin-v2.3/table_basic.html


#2

Hello @bstar,

The fastest solution:

Template.Foo.onRendered(function () {
   var chart = $(this.find('.updating-chart').peity('line', { width: 64 });
   var values = [0,0,0,0,0,0,0];

   this.autorun(function () {
      var doc = SomeMongoCollection.findOne();

      if(!doc) { return; }

      values.shift();
      values.push(doc.value);

      chart
         .text(values.join(','))
         .change()
   });
});

#3

Thanks amigasan. This didn’t really work for me. Instead I just used Deps.autorun to re-initialize all of the charts when content content updates for certain types of records. Targeting each record and doing the refresh did not seem feasible with the potential of a hundred records updating at once. This approach isn’t the most efficient, but it will work for the short term.

Anyway, thanks for the suggestion.