Multi-series line chart in dc.js

Question

I've looked at dc.js's documentation carefully, and noticed some open issues surrounding multi-series line charts.

I have data that looks like this:

var data = [
 //['time', 'text', 'temperature', 'count'],
 ['1379952000', 'field_1', 91, 56],
 ['1379952000', 'field_2', 50, 20],
 ['1379952000', 'field_3', 88, 24],
 ['1379952000', 'field_4', 50, 37],
 ['1379953200', 'field_1', 97, 58],
 ['1379953200', 'field_2', 84, 86],
 ['1379953200', 'field_3', 85, 62],
 ['1379953200', 'field_4', 88, 73]
 // etc.
];

Once it's added to crossfilter, I'd like to make a line chart that has 4 lines: one for each value of the "text" field (i.e. "field_1", "field_2", "field_3", "field_4"). This thread suggests that such a thing is possible. Following the advice here I came up with the code in this gist.

I can't quite figure out how to separate the data series into 4 separate lines. I've tried using filter on the data but I keep ending up with one series that seems to just have all of the points in it.

You can view a live example of the code here: http://bl.ocks.org/jsundram/6690354

Any help would be much appreciated.

Update: working code is here: http://bl.ocks.org/jsundram/6728956

For some reason the only code working for me is: http://bl.ocks.org/espinielli/9f129ac2ed6ca642cb2a — Geeklhem, Feb 07 '16 at 15:29

JRideout · Accepted Answer · 2013-10-18T00:43:14.433

4

I posted a fork of your gist that seems to work: http://bl.ocks.org/jrideout/6710590

The key change was to the compose function:

.compose(fields.top(Infinity).map(function(d,fi) {
    var field = d.key;
    return dc.lineChart(time_chart)
        .group({all:function() {
            return time_fields.all().filter(function(d) {
                var f = JSON.parse(d.key)[1];
                return f==field && d.value > 0;});
        }},field)
        .colors(['#1f77b4', '#ff7f0e', '#2ca02c','#d62728'])
        .colorAccessor(function(){return fi;})
        .keyAccessor(dateAcc);
}));

I created a group like object {all:data} that contains the your group, but filtered by the key.

EDIT: DC is now working a seriesChart to automate this. See: http://nickqizhu.github.io/dc.js/examples/series.html

edited Oct 18 '13 at 00:43

answered Sep 26 '13 at 06:58

JRideout

1,635
11
16

Thanks! For the graph on the left, I was trying to show time on the X-axis and count on the y-axis, not temperature. I suppose that's what I get for not labeling my axes. But I think this approach will work. I'll post code and accept this answer when I get it working. – Jason Sundram Sep 26 '13 at 16:24
So, when I filter on temperature (for example, selecting the range from 60-90 degrees) in your code, the line chart behaves quite unexpectedly. The lines are no longer 1:1 mappings between times and temperatures. Do you know what's up with that? – Jason Sundram Sep 27 '13 at 03:49
It looks like that's because of the `d.value > 0` check. Without that, it seems to work fine. Why did you add that check? – Jason Sundram Sep 27 '13 at 04:25
1

I added the d.value > 0 because I was playing around with the .defined method, by setting it to ignore nulls. That way when you have a value of 0, you get a discontinuous set of line segments, rather than the current behavior where the line goes back to zero on the x axis. However, since you have so few points, there is usually not enough of them to go from 1 point to another, so the single point wasn't graphed. I dropped that approach but left the d.value for no particular reason. It might still be worth investigating if your true data data had a bunch more points. – JRideout Sep 28 '13 at 02:28
dc js looks awesome; Is it still possible to create a live chart like this - https://sites.google.com/site/e90e50fx/_/rsrc/1387816462651/home/different-color-for-line-segments-in-excel-charts/green_red_yellow.png – Abel Jojo Aug 05 '17 at 21:25

Multi-series line chart in dc.js

1 Answers1