Creating group bar charts

[Aaron Wolf]

I had a lot of fun playing with dc.js the past few days. Great product, a lot of functionality, I was able to accomplish a lot.

One question I couldn't seem to answer is the ability to create grouped bar charts (i.e. http://bl.ocks.org/mbostock/3943967 (grouped)). Any ideas on how to mimic this functionality?

Thanks again.

[Nick Zhu]

Unfortunately currently dc.js does not support grouped bar chart (only stacked). You could possibly customize using composite chart (containing multiple bar charts) through a postRender listener to set a offset for each bar group to simulate this effect (never tried myself though :)

[Chris Malek]

I just wanted to ask the group if anyone had tried Nick's recommendation and got a Grouped Bar Chart working?   I am half way through a d3 book and I am still wrapping my head around the concepts. I have gotten several charts up and working on dc.js. It works pretty darn good!

[suj...@gmail.com]

Yes. we have done our grouped bar charts using a composite chart. I've shared my sourced code below.

An element of my crossfilter group has following JSON format.

{

key: the key here,

value:

{

actual : val1,

budget :val2

}

}

//You have to adjust the gap and translate based on chart width and number of bars.

var gap = 20, translate = 25;

compositeChart

.width(width)

.height(height)

.transitionDuration(200)

.margins(margins)

.dimension(dimension)

.group(group)

.elasticY(true)

.x(d3.time.scale().domain(getDateRange(group)))

.xUnits(d3.time.months)

.round(d3.time.month.round)

.renderHorizontalGridLines(true)

.compose([

                dc.barChart(compositeChart).gap(gap).group(group).title(function (d) {

                return "Bar key: " + d.key + "\nBar value: " + d.value.actual;

                }).valueAccessor(function (d) {

                return d.value.actual;

                }),

                dc.barChart(compositeChart).gap(gap).group(group).title(function (d) {

                return "Bar key: " + d.key + "\nBar value: " + d.value.budget;

                }).valueAccessor(function (d) {

                return d.value.budget;

                })

])

.brushOn(true)

.renderlet(function (chart) {

chart.selectAll("g._1").attr("transform", "translate(" + translate + ", 0)");

});

[Chris Malek]

Thanks you so much. I will check this out with my data set. 

--

Chris Malek

chris....@gmail.com 

760.230.8625

[Nisha Singh]

Hey, what goes in as group inside '.group(group)'. We will be having two groups now, right? One for the first series and the other for the second one. which group will go here??Or is it something that I am not understanding? If possible, can someone post another example for this or any working link for a composite chart?? It will be really helpful. Thanks