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:

Any help would be much appreciated.

Update: working code is here:

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/jsundram/6690354

Any help would be much appreciated.

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

• javascript
• d3.js
• data-visualization
• crossfilter
• dc.js

• For some reason the only code working for me is: bl.ocks/espinielli/9f129ac2ed6ca642cb2a – Geeklhem Commented Feb 7, 2016 at 15:29

1 Answer 1

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

The key change was to the pose function:

.pose(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