क्रॉसफिल्टर उदाहरण से समग्र ग्राफ

Question

भुगतान उदाहरण से शुरू करना क्रॉसफिल्टर (https://github.com/square/crossfilter/wiki/API-Reference) हम प्रत्येक भुगतान प्रकार (टैब, वीजा, नकद) के लिए एक लाइन चार्ट के साथ एक समग्र चार्ट कैसे बना सकते हैं?

Answer 1

मुझे लगता है कि आप प्रत्येक भुगतान type के लिए समय के साथ totals भुगतान (date आयाम) प्रदर्शित करना चाहते हैं।

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

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

प्रत्येक भुगतान प्रकार के लिए भुगतान योग (टैब, वीजा, नकदी)

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

एक समग्र चार्ट परिभाषित करें और समग्र चार्ट के हिस्से के रूप में 3 लाइन चार्ट परिभाषित करने के लिए समूहों का उपयोग का एक समूह बनाएं ।

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