title: dc.js Series Chart multi line
body: <p>I am trying to create 2 charts one bar and one series which the bar will show total earnings per store and series will show multi line earnings per year.</p>
  
  <p>Here is the jsfiddle <a href="https://jsfiddle.net/xc4bwgLj/" rel="noreferrer">https://jsfiddle.net/xc4bwgLj/</a></p>
  
  <p>So when I click on Bar chart Store 1, I want in series chart to see for this store earning for 2017 and 2016 each on a new line. Currently the series chart show the total earnings for each store like bar chart.</p>
  
  <p>Any idea how can I change series chart to show 2016 and 2017 earnings per store?</p>
  
  <p>JsFiddle code:</p>
  
  <pre><code>// generate data
  var data = [];
  var n = 1000.;
  
  for (var i = 0; i &lt; n; i++) {
  console.log(Math.floor(Math.random() * (1 - 0 + 1)) + 0);
    data.push({
      id: (Math.floor(Math.random() * (1 - 0 + 1)) + 0),
      "i": i,
      x: Math.random(),
      "store_name": "Store"+(Math.floor(Math.random() * (1 - 0 + 1)) + 0),
      "2017_earnings": Math.random()*110,
      "2016_earnings": Math.random()*80
    });
  }
  
  // do some crossfilter stuff
  var cf = crossfilter(data),
    series = cf.dimension(function(d) {
      return [d.store_name, d.i];
    }),
    series_grouped = series
    .group(function(d) {
    console.log(d)
      return [d[0], Math.floor(d[1] / 100.) * 100.];
    })
    .reduceSum(function(d) {
      return d.x;
    }),
    id = cf.dimension(function(d) {
      return d.store_name;
    }),
    id_grouped = id.group().reduceSum(function(d) {
      return d.x;
    });
  
  // generate charts
  var chart_width = 960,
    chart_height = 200;
  console.log(dc);
  dc.seriesChart("#chart_a").height(chart_height).width(.74 * chart_width)
    .chart(function(c) {
      return dc.lineChart(c).renderArea(true)
          .filterHandler(function(dimension, filter) {
          if(filter[0]) {
              dimension.filterFunction(function(d) {
              return d[1] &gt; filter[0][0] &amp;&amp; d[1] &lt; filter[0][1];
            });
          } else {
              dimension.filterAll();
          }
          setTimeout(dc.redrawAll,0);
          return filter;
          });
    })
    .x(d3.scale.linear().domain([0, n]))
    .dimension(series)
    .group(series_grouped)
    .seriesAccessor(function(d) {
      return d.key[0];
    })
    .keyAccessor(function(d) {
      return d.key[1];
    })
    .valueAccessor(function(d) {
      return d.value;
    }).legend(dc.legend().x(350).y(350).itemHeight(13).gap(5).horizontal(1).legendWidth(140).itemWidth(70));
  dc.barChart("#chart_b").height(chart_height).width(.24 * chart_width)
    .dimension(id)
    .group(id_grouped)
    .x(d3.scale.ordinal())
    .xUnits(dc.units.ordinal)
    .xAxis();
  
  dc.renderAll();
  </code></pre>