Get Selected Slice Color from Pie chart using DC.js

Question

I have a coordinated pie and bar chart. My pie chart contains a list of years and my bar chart contains information for each year. when I click a year in my pie chart, the bar chart shows relevant details for the year.

Scenario Need to change bar color to selected slice color in pie on pie slice click.

please advice.

potatopeelings potatopeelings · Accepted Answer · 2015-08-03T12:17:26

First set a common colors scale for your bar and pie chart

pieChart
    .colors(d3.scale.category10())
    ...

and

barChart
    .colors(d3.scale.category10())
    ...

Note that you might need to pick a different one depending on the number of values you have.

Then, for the bar chart set the colorAccessor so that it picks an index based on the pie chart index corresponding to each bar. If you have access to all the unique pieValues (you can get this easily using .all() and .map() on the pie group. Something like

var pieValues = year_total.all().map(function(d) { return d.key });

where year_total is the group for the pie dimension.

Assuming you have your base data available, it will be easy enough to get the right index using something like

.colorAccessor(function(d, i){ return years.indexOf(data[i].Year); })

and that's all!

Fiddle - http://jsfiddle.net/r8yern6o/

The base code was adapted from the excellent tutorial at http://www.codeproject.com/Articles/697043/Making-Dashboards-with-Dc-js-Part-2-Graphing (the one linked to from https://github.com/dc-js/dc.js/wiki > Books and Tutorials section)

For posterity, assuming you have all the libraries included

JS

var barChart  = dc.barChart("#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;

var pieChart = 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;});
var pieValues = year_total.all().map(function(d) { return d.key });

barChart
    .colors(d3.scale.category10())
    .width(500).height(200)
    .dimension(dateDim)
    .group(hits)
    .x(d3.time.scale().domain([minDate,maxDate]))
    .brushOn(false)
    .xUnits(d3.time.days)
    .colorAccessor(function(d, i){ return pieValues.indexOf(data[i].Year); })
    .yAxisLabel("Hits per day");

pieChart
    .colors(d3.scale.category10())
    .width(150).height(150)
    .dimension(yearDim)
    .group(year_total)
    .innerRadius(30);

dc.renderAll();

HTML

<div id="chart-ring-year"></div>
<div id="chart-line-hitsperday"></div>

Get Selected Slice Color from Pie chart using DC.js

1 Answers