Grafico composito da Crossfilter Esempio

Question

A partire dall'esempio del crossfilter pagamenti (https://github.com/square/crossfilter/wiki/API-Reference) come possiamo creare un grafico composito con un grafico a linee per ogni tipo di pagamento (tab, visto, contanti)?

Answer 1

Suppongo che si desideri visualizzare il pagamento totals nel tempo (la dimensione date) per ogni pagamento type.

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

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

Creare un gruppo dei totali di pagamento per ciascun tipo di pagamento (scheda, visa, contanti)

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

definire una carta composita e utilizzare i gruppi per definire 3 grafici lineari come parte della carta composita .

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

esempio completa: http://plnkr.co/edit/rhDURrDfeSvVqEnQR9L1?p=preview