CODEWITHSUNDEEP
dc.jscrossfilter
FizBack
FizBack

Reputation: 33

dc.js stacked line chart with more than 1 dimension

My dataset is an array of json of the like :

var data = [ { company: "A", date_round_1: "21/05/2002", round_1: 5, date_round_2: "21/05/2004", round_2: 20 },
             ...
             { company: "Z", date_round_1: "16/01/2004", round_1: 10, date_round_2: "20/12/2006", round_2: 45 }]

and I wish to display both 'round_1' and 'round_2' time series as stacked line charts.

The base line would look like this :

var fundsChart = dc.lineChart("#fundsChart");

var ndx = crossfilter(data);
var all = ndx.groupAll();

var date_1 = ndx.dimension(function(d){
  return d3.time.year(d.date_round_1);
})

fundsChart
  .renderArea(true)
  .renderHorizontalGridLines(true)
  .width(400)
  .height(360)
  .dimension(date_1)
  .group(date_1.group().reduceSum(function(d) { return +d.round_1 }))
  .x(d3.time.scale().domain([new Date(2000, 0, 1), new Date(2015, 0, 1)]))

I have tried using the stack method to add the series but the problem resides in the fact that only a single dimension can be passed as argument of the lineChart.

Can you think of a turnaround to display both series while still using a dc chart?

Upvotes: 1

Views: 620

Answers (1)

Ethan Jewett
Ethan Jewett

Reputation: 6010

Are you going to be filtering on this chart? If not, just create a different group on a date_2 dimension and use that in the stack. Should work.

If you are going to be filtering, I think you'll have to change your data model a bit. You'll want to switch to have 1 record per round, so in this case you'll have 2 records for every 1 record you have now. There should be 1 date property (the date for that round), an amount property (the contents of round_x in the current structure), and a 'round' property (which would be '1', or '2', for example).

Then you need to create a date dimension and multiple groups on that dimension. The group will have a reduceSum function that looks something like:

var round1Group = dateDim.group().reduceSum(function(d) {
  return d.round === '1' ? d.amount : 0;
});

So, what happens here is that we have a group that will only aggregate values from round 1. You'll create similar groups for round 2, etc. Then stack these groups in the dc.js chart.

Hopefully that helps!

Upvotes: 2

Related Questions