score:1

Here's a solution using a different data shape. My other example uses a fake group to change the shape after aggregation.

### Using a different data shape.

In this case, I don't think the shape of the data is conducive to what you want to do, so in this answer I'll change the shape. I'll try using a fake group in a second answer.

The series chart takes a single group with multikeys, and a group filters by rows. Since each row contains both 2016 and 2017 earnings, it's not possible to aggregate them separately using crossfilter.

So for this attempt I've split the records by earnings year:

```
for (var i = 0; i < n; i++) {
var id = Math.round(Math.random()),
x = Math.random(),
store = "Store"+Math.round(Math.random());
data.push({
id: id,
i: i,
x: x,
store_name: store,
earnings_year: 2016,
earnings: Math.random()*80
});
data.push({
id: id,
i: i,
x: x,
store_name: store,
earnings_year: 2017,
earnings: Math.random()*110,
});
}
```

I think this preserves all the qualities of your original data, but it splits the records by earnings year. I also simplified the random number generation. ;-)

Now we can easily create multikey dimension which uses `earnings_year`

.

I don't think doing the rounding in the group key function was working, because the dimension and group key functions need to have the same ordering, so I've moved it up:

```
series = cf.dimension(function(d) {
return [d.earnings_year, Math.floor(d.i / 100.) * 100.];
}),
```

Now we simply group with the same keys, and reduce by the sum of `earnings`

instead of `x`

(which is what I think was intended).

```
series_grouped = series.group()
.reduceSum(function(d) {
return d.earnings;
}),
```

Fork of your fiddle, with filtering by store https://jsfiddle.net/gordonwoodhull/urxLwh81/

score:1

Here's a different approach that keeps the shape of the source the same, but split the group for the use of the series chart. In my other answer I change the source data shape.

### Using a fake group

Whenever we need to preprocess data, e.g. to change the shape that crossfilter returns, we can use a fake group

We'll reduce both columns separately using an ordinary reduction of multiple fields:

```
series = cf.dimension(function(d) {
return d.i;
}),
series_grouped = series.group(function(k) {
return Math.floor(k / 100.) * 100.;
})
.reduce(
function(p, d) { // add
p[2016] += d['2016_earnings'];
p[2017] += d['2017_earnings'];
return p;
},
function(p, d) { // remove
p[2016] -= d['2016_earnings'];
p[2017] -= d['2017_earnings'];
return p;
},
function() {
return {2016: 0, 2017: 0};
}),
```

Then this split group will take the names of two fields, and will split each bin into two, using the field name as the first part of the multikey:

```
function split_group(group, field1, field2) {
return {
all: function() {
var ret = [];
group.all().forEach(function(kv) {
ret.push({
key: [field1, kv.key],
value: kv.value[field1]
});
ret.push({
key: [field2, kv.key],
value: kv.value[field2]
});
});
return ret;
}
}
}
```

Use it like this:

```
series_split = split_group(series_grouped, 2016, 2017)
// ...
chart
.group(series_split)
```

Hard to tell with the random number generation, but I think the result is identical to the other answer. Just a different approach.

Source: stackoverflow.com

#### Related Query

- dc.js Series Chart multi line
- d3: tooltips on multi series line chart at each line when mouse hover event
- Error displaying dots on a multi series line - dots chart
- D3 Multi Series Line chart not working with correct xAxis values
- dc.js multi line series chart filtering
- d3.js - Multi series line chart tool tip issue
- Animated Path multi series line chart in D3.Js
- D3 Multi Series Line Chart with Clickable Legend
- Show labels conditionally on multi series line chart
- D3 Multi Series Line Chart
- D3 Multi Series Line chart with non time x axis
- X axis not displaying on Multi Series Line Chart using d3.js
- D3 line chart axis text labels in multi line
- Multi series chart (D3) with missing values
- Multi Line Ordinal d3 chart
- Dimple.js line chart with composite axis, no links between points on series
- D3 multi line chart - strange animation
- simple multi line chart with D3
- d3.js multi y-axis line chart
- D3 - Single and Multi Line chart tooltips
- Legend in Multi line chart - d3
- Time series line chart is not sync with axis
- How to create a multi-series line chart with series for each unique item in 1st column?
- C3 - line chart time series error: x is not defined for id = "Dates"
- Multi line chart using d3 and json in a nvd3 structure
- Add links and hover effects to multi series donut chart in d3.js
- SVG Legend for multi line chart d3 v6
- D3 Multi Line Chart Not Displaying Properly With X Axis Value
- Fill same line color in to circle on Multi Line chart when mouse over and remove color from circle when mouse out
- Multiple series line chart

#### More Query from same tag

- d3 donut chart not visible entirely when in mobile view
- second transition won't work
- How to create a custom element in d3
- What is the d3 structure needed to make a reusable svg entity
- D3: Highlighting Parts of Path on Mouseover in Line Graph
- d3js: supply a function to tickPadding
- D3 chart with JSON web service
- Formatting metrics in Superset / Caravel pivot table
- Insert element as sibling using D3js
- D3 append a line or rect to fill pie chart values
- How can i set each text label vertically in d3?
- Pie (donut) chart segment order in D3
- D3 path missing height elements
- Force simulation of texts on bubble-chart does not work
- Picking quartile value on each point
- D3 Interactive Stream Graph: Data repeating past one month
- Circle chart with repulsive circles
- d3 v4 map becomes empty unexpectedly
- How to sort bar in nvd3?
- How to add curved edge to d3 path lines?
- Exporting svg to png or other image with styling, using JavaScript
- d3js Multiple Stacked Bar Chart Line Cursor Appearing in Wrong Chart
- D3: animate circle between two nodes
- How do I generate axis tick for every year in D3?
- How to load and print json array/object in javascript
- d3 bar chart implementation in teams viewApp with angular 2
- Building a binary state chart in billboard.js for multiple pieces of equipment
- source code in tickSize d3.js v4
- D3: How to show large dataset
- d3 drag behavior: registering, listening, and triggering distinct types in the drag namespace?