Composite Graph z Crossfilter Przykład

Question

Począwszy od przykładowego filtra crossfilter płatności (https://github.com/square/crossfilter/wiki/API-Reference) w jaki sposób możemy utworzyć wykres złożony z jedną liniową dla każdego rodzaju płatności (zakładka, wiza, gotówka)?

Answer 1

Zakładam, że chcesz wyświetlać płatność totals w czasie (wymiar date) dla każdej płatności type.

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

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

Tworzenie grupy sumy płatności dla każdego rodzaju płatności (karta, wiza, pieniężnych)

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

zdefiniować kompozytowego wykres i korzystają z grup zdefiniować 3 wykresy liniowe jako część złożonego wykresu .

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

Pełny przykład: http://plnkr.co/edit/rhDURrDfeSvVqEnQR9L1?p=preview