CODEWITHSUNDEEP
javascriptd3.jsdc.jscrossfilter
sudhanshu
sudhanshu

Reputation: 453

DC.JS Pie Chart + Select Deslect from external JavaScript function

I am using dc.js (http://dc-js.github.io/dc.js/) Which is a wrapper to d3 and crossfilter. I want to click the pieChart from dc.js Externally.

http://jsfiddle.net/nishants/Bra2H/47/

var hitslineChart  = dc.lineChart("#chart-line-hitsperday");

var data = [
        {date: "12/27/2012", http_404: 2, http_200: 190, http_302: 100},
        {date: "12/28/2012", http_404: 2, http_200: 10, http_302: 100},
        {date: "12/29/2012", http_404: 1, http_200: 300, http_302: 200},
        {date: "12/30/2012", http_404: 2, http_200: 90, http_302: 0},
        {date: "12/31/2012", http_404: 2, http_200: 90, http_302: 0},
        {date: "01/01/2013", http_404: 2, http_200: 90, http_302: 0},
        {date: "01/02/2013", http_404: 1, http_200: 10, http_302: 1},
        {date: "01/03/2013", http_404: 2, http_200: 90, http_302: 0},
        {date: "01/04/2013", http_404: 2, http_200: 90, http_302: 0},
        {date: "01/05/2013", http_404: 2, http_200: 90, http_302: 0},
        {date: "01/06/2013", http_404: 2, http_200: 200, http_302: 1},
        {date: "01/07/2013", http_404: 1, http_200: 200, http_302: 100}
        ];
var ndx = crossfilter(data);
var parseDate = d3.time.format("%m/%d/%Y").parse;
data.forEach(function(d) {
    d.date = parseDate(d.date);
    d.total= d.http_404+d.http_200+d.http_302;
    d.Year=d.date.getFullYear();
});

var dateDim = ndx.dimension(function(d) {return d.date;});
var hits = dateDim.group().reduceSum(function(d) {return d.total;});
var minDate = dateDim.bottom(1)[0].date;
var maxDate = dateDim.top(1)[0].date;

hitslineChart
    .width(500).height(200)
    .dimension(dateDim)
    .group(hits)
    .x(d3.time.scale().domain([minDate,maxDate]))
    .brushOn(false)
    .yAxisLabel("Hits per day");

var yearRingChart   = dc.pieChart("#chart-ring-year");
var yearDim  = ndx.dimension(function(d) {return +d.Year;});
var year_total = yearDim.group().reduceSum(function(d) {return d.http_200+d.http_302;});

yearRingChart
.width(150).height(150)
.dimension(yearDim)
.group(year_total)
.innerRadius(30);

dc.renderAll();

I could not find a way to click or call cross filter code external to dc.js widgtes.

Upvotes: 0

Views: 1300

Answers (2)

DataByDavid
DataByDavid

Reputation: 1069

Another idea is to use filters...

HTML 

<button type="button" class="btn btn-primary" onclick=filter1()>Date Filter</button>

JS 

function filter1() {
    yearRingChart.filter('2014');
    dc.redrawAll();
};

Upvotes: 1

Mark
Mark

Reputation: 108537

Looking at the dc.js source, the clicks are handled at the chart level in an _onClick handler. So, I'd just call this explicitly. You'll need to pass in the data element you are "clicking" on:

yearRingChart._onClick(yearRingChart.data()[0]);

Updated example.

Upvotes: 2

Related Questions