Multi-series bar chart in DC-js

Question

I\'m using DC.js ( lib on top of D3 ) and have a great example of a single series bar chart:

Answer 1

If you have a static number of groups to graph, you can achieve the desired effect with a composite chart.

In the example below, I hard coded the gap between the bar charts - I can do this because I know there are 12 months being displayed.

            var actuals = dc.barChart(compositeChart)
                    .gap(65)
                    .group(group)
                    .valueAccessor(function (d) {
                        return d.value.Actual;
                    });

            var budgets = dc.barChart(compositeChart)
                    .gap(65)
                    .group(group)
                    .valueAccessor(function (d) {
                        return d.value.Budget;
                    });

I pass these bar charts to the compose method of a composite chart:

                compositeChart
                    .width(1000)
                    .height(300)
                    .dimension(monthDimension)
                    .group(group)
                    .elasticY(true)
                    .x(d3.time.scale().domain(timeExtent))
                    .xUnits(d3.time.months)
                    .round(d3.time.month.round)
                    .renderHorizontalGridLines(true)
                    .compose([budgets, actuals])
                    .brushOn(true);

Finally, I add a renderlet to move one of the charts to the right a few pixels:

              compositeChart
                    .renderlet(function (chart) {
                        chart.selectAll("g._1").attr("transform", "translate(" + 20 + ", 0)");
                        chart.selectAll("g._0").attr("transform", "translate(" + 1 + ", 0)");
                    });

I know this isn't the cleanest approach but it can work in a pinch.

I hope this helps.