Composite Graph from Crossfilter Example

Question

Starting from the payments example crossfilter (https://github.com/square/crossfilter/wiki/API-Reference) how may we create a Composite Chart with one Line Chart for each payment type (tab, visa, cash)?

Ingraft

+1. I am at a loss on how to create it using the composite chart. I think this can be done using the series chart. However i will wait for the expert's advice – Lambrecht

At the moment I'm looking for a composite cart example because what I really want is to chart two series and use .useRightYAxis(true) so that I can be comparing two data sets with different Y axis values. – Ingraft

Answer 1

I am assuming you want to display payment totals over time (the date dimension) for each payment type.

var payments = crossfilter([...]);

var dateDimension = payments.dimension(function(d) { return new Date(d.date); });

Create a group of payment totals for each payment type (tab, visa, cash)

var totalForType = function(type) {
  return function(d) {
    return d.type === type ? d.total : null;
  };
};

var tabTotalsGroup  = dateDimension.group().reduceSum(totalForType('tab'));
var visaTotalsGroup = dateDimension.group().reduceSum(totalForType('visa'));
var cashTotalsGroup = dateDimension.group().reduceSum(totalForType('cash'));

Define a composite chart and use the groups to define 3 line charts as part of the composite chart.

var compositeChart = dc.compositeChart('#composite-chart');
compositeChart
  ...
  .x(d3.time.scale().domain([new Date("2011-11-14T16:15:00Z"), new Date("2011-11-14T17:45:00Z")]))
  .dimension(dateDimension)
  .compose([
    dc.lineChart(compositeChart).group(tabTotalsGroup, 'tab').colors(['#ffaa00']),
    dc.lineChart(compositeChart).group(visaTotalsGroup, 'visa').colors(['#aa00ff']),
    dc.lineChart(compositeChart).group(cashTotalsGroup, 'cash').colors(['#00aaff'])
  ]);

 dc.renderAll();

Full example: http://plnkr.co/edit/rhDURrDfeSvVqEnQR9L1?p=preview

Ibnsina

Excellent, thank you. I changed it to a bar chart which makes a bit more sense in this context. With this as a starting point I was able to adapt it to what I was actually trying to accomplish. – Ingraft