javascript - Template level reactivity in Meteor -

i'm working on problem want display data in dashboard both chart (via perak:c3) , in table (via aslagle:reactive-table). issue data pulled collection in mongodb, , it's format instantly amenable plotting via c3, needs transformed local collection used reactive-table package, suggested in this answer previous question.

when change dataset displayed want chart updated, , table also. requires changing values in local collection, however, slows things down , rather chart being smoothly redrawn, there freeze on page, , new data displayed.

i have created sample project on github here problem can replicated easily. if run app , select dataset in browser see mean

to see reactive behaviour want preserve in chart go client/templates/dashboard/dashboard.html , comment out table template {{> dashboardtable}}

and change dataset see how chart smoothly redrawn. trying ensure both templates dashboardchart , dashboardtable render independently of 1 another.

---

update

following michael floyd's suggestion of using timeout helped bit

meteor.settimeout(function(){createlocalcollection(data)},200); 

but although chart gets smoothly drawn, when table finishes being filled, chart drawn again. looks jumps intermediate state can't understand. here video showing mean.

i'm adding separate answer because it's different approach.

use onrendered callback in d3 invoke local collection update.

where have:

chart = c3.generate({   bindto: '#dataset-chart', 

in dashboard_chart.js, add:

chart = c3.generate({   onrendered: createlocalcollection(),   bindto: '#dataset-chart', 

of course need remove createlocalcollection(data) event handler.

to avoid having pass data context through onrendered handler in d3 update createlocalcollection function use reactive variable datasetid defined earlier establish current dataset:

var createlocalcollection = function() {     var values = my_first_collection.find({datasetid: datasetid.get()}).fetch();     var tempdoc = {};     local.remove({});     tempdoc = {};     (var in values[0].value) {       tempdoc.value = values[0].value[i];       tempdoc.date = values[0].date[i];       local.insert(tempdoc);     } }; 

using method let d3 tell when chart rendering done , table can start getting populated. result instantaneous chart update followed table updating. no mucking timeouts either.