Making dc.js charts reactive in Meteor

I'm using dc.js and crossfilter to create some charts in Meteor. Everything is set, I have all the charts ready, but there is 1 question regarding making the charts reactive. I subscribe number of collections from mongoDB on client side in JavaScript files; here, I have to update the data that I pass to crossfilter every time the data in collections change.

Suppose, for each page on the app I'm subscribing to 8 different collections, each of the collections have about 30 data fields/columns. This data in every field keeps changing or updating for every 30 seconds or so. Now the question is, as the data changes charts in the page must be updated with new data and re-render all the charts.

I learned that there are a couple of methods in Meteor which makes the page reactive like deps.autorun( ) and tracker.autorun( ) . The problem is, what code should I put in the above functions to make my charts reactive?

PS: please comment back if you need any clarification, the question is already getting lengthy.

---

Say you have a 'dcChart' template and you are calling that template from your main page as

{{> dcChart data=dcChartData}} 

helper for data as:

'dcChartData': function () {
    var data = SomeCollection.find(...);
    return data;
}

Your code should look something like this:

Template.dcChart.rendered = function () {
  var template = this;
  buildChart(template.data);

  template.autorun(function () {
     var templateData = Template.currentData();
     buildChart(templateData);
  });
}

In the autorun section you rerender the chart by passing the reactive data(records from the collection). So every time the collection is updated the chart will be rendered again).

链接地址: http://www.djcxy.com/p/32736.html

上一篇: 动态创建和链接dc.js图表

下一篇: 在流星中制作dc.js图