javascript - Meteor update flot chart -

when using meteor 0.8.0, how update flot chart when new data arrives? looked @ example @ meteor-flot, updating fake data via timer on page. , not reactive data coming collection.

so far have like:

// returns object label , array of timestamp, value // { label:'test', data:[[1397605016000, 1332],[1397605616000,1356],[1397606216000,1380]]} template.example.helpers({   readings: function(){     datareadings.find();   } });  template.example.rendered = function() {   $.plot ($("#flot"), [this.data.data], {     series: {       lines: {         show: true       },       points: {         show: true       }     },     xaxis: {       mode: 'time',       timeformat: '%h:%m'     }   }); }; 

this works great initial render, not sure how go updating chart once new data arrives, once every 5 minutes. how call plot.setdata(newdata) & plot.draw() when new data arrives?

one way using cursor/collection observer. i'm using method in meteor app update flot chart , works great.

after initial plot creation in template.example.rendered function, add cursor observer updates chart anytime new document added (or removed) on collection:

//  subscribe collection (or no need if it's done on route) meteor.subscribe('datareadings', somefiltervarornot);  //  add cursor observer documents added date greater  //  right (uses moment.js) //  (if don't this, you'll "added" fire every document  //  that's been added - not sure why datareadingsobservehandle = datareadings.find({   createdat: {$gte: moment().todate()}}).observe({      //  fires anytime new document added     added: function(datareading) {       $('#flot').data("plot").setdata(datareading.data);       $('#flot').data("plot").draw();        //  or setup whatever query/calculation need assemble        //  new data set chart, there other observers       //  observechanges() let see how document has changed versus       //  being added or removed     },      //  fires anytime document removed     removed: function(removeddatareading) {       //  update , redraw chart above...   } }); 

the datareadingsobservehandle intentionally global can destroy later because apparently collection observer server intensive. doesn't have global if have scope access wherever need destroyed:

//  once chart no longer needs updated call... datareadingsobservehandle.stop(); datareadingsobservehandle = null; 

i believe when user navigates different template , no longer looking @ chart, observer automatically gets destroyed. see http://docs.meteor.com/#observe more information.

i love hear other methods using reactivevar or deps.dependency. if they're more efficient