Changing the data group in a dc.js line chart and redrawing it
I have a created an intial dc.js stacked area line chart from time series data coming in from a local database. All of the calculations are handled by the database server, data is grabbed in time intervals (several minutes to several hours). The crossfilter dimension used is date (given in millisecond epoch time) and includes 2 groups to be graphed together on one chart. The values in these 2 groups is averaged over the time intervals chosen, again this is done by the db server and I would very much like to avoid loading the entire data set into the script.
The initial chart renders and works just fine, but in my chart.on('zoomed', function(c, f) {..}) I parse the database again for a new, more accurate set of data.
ie zooming in on the chart selects data from a smaller time interval and zooming out selects data from a larger time interval.
I understand the the old data needs to be removed from the crossfilter and new data needs to added to it, source from this thread. However, when I implement that into my chart.on('zoomed', function(c,f) {..}) , after the first zoom it returns a TypeError: group is undefined .
I don't understand where this error is coming from, chart.group(..) is defined when the page first loads. Here is my function,
.on('zoomed', function(chart, filter) {
var nextLower = stackedLine.x().domain()[0];
var nextUpper = stackedLine.x().domain()[1];
$.getJSON('/_try_db', {
lower : Date.parse(nextLower),
upper : Date.parse(nextUpper)
}, function(data) {
stackedLine.expireCache()
.stack()
.x(d3.time.scale().domain([Date.parse(nextLower), Date.parse(nextUpper)]))
;
var new_arr = [];
$.each(data.result, function() {
new_arr.push({
"timestamp" : ($.parseJSON(this)).timestamp,
"running" : ($.parseJSON(this)).running,
"waiting" : ($.parseJSON(this)).waiting
});
});
dd.filter(null);
ndx.remove();
ndx.add(new_arr);
dc.redrawAll();
});
I figured it out after leaving it and coming back to it the next day. I had read somewhere that chart.stack() without any arguments passed removes all of the stacked groups on top of the original group. I thought I would have to do something like this because if I didn't then an additional stack would be added on top, something I don't want. But that turned out to be WRONG , if you call chart.stack() without any arguments it returns the groups that are stacked, however, if nothing is there to receive the return it attempts to add a new group to the stack, an undefined group .
I simply removed stackedLine.stack() and my chart updated with the correct data. I also removed stackedLine.x(...) because setting the domain again would not allow for the chart to be zoomed more than once and that sort of defeats the purpose of using on('zoomed") in the first place.
链接地址: http://www.djcxy.com/p/5600.html下一篇: 更改dc.js折线图中的数据组并重绘它