Crossfilterの複合グラフの例

Question

支払いの例crossfilter（https://github.com/square/crossfilter/wiki/API-Reference）から、各支払いタイプ（タブ、ビザ、現金）ごとに1つの折れ線グラフを持つコンポジットチャートを作成するにはどうすればよいですか？

Answer 1

お支払い毎にtotals（dateディメンション）のお支払いをtypeとして表示することを前提としています。

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

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

複合グラフを定義し、複合グラフの一部として3つの折れ線グラフを定義するためにグループを使用

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')); 

（タブ、ビザ、現金）各支払タイプについて、支払合計のグループを作成します。 。

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(); 

全例：http://plnkr.co/edit/rhDURrDfeSvVqEnQR9L1?p=preview