Changing the data group in a dc.js line chart and redrawing it

Question

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.

i.e. 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();
        });

Can you try to replicate this problem in a fiddle? The code at jsfiddle.net/djmartin_umich/qBr7y can provide you a starting point (it uses random data rather than pulling data from the server). — DJ Martin
Yeah, what @DJMartin said. The code above doesn't show any references to a group. Alternately, it might help if you posted the context of the error - where this "group is undefined" being thrown? — Gordon
Thanks for the replies guys, I figured it out when I went to play around with the jsfiddle @DJMartin linked. I'll post an answer. — neetbed

neetbed neetbed · Accepted Answer · 2014-07-22T14:41:46

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.

Changing the data group in a dc.js line chart and redrawing it

1 Answers