amcdnl amcdnl - 8 months ago 282
Javascript Question

Multi-series bar chart in DC-js

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

enter image description here

var xf = crossfilter(data);
var dim = xf.dimension(function (d) { return d["EmployeeName"]; });
var group = (d) { return d["AverageSale"]; });

var chart = dc.barChart(elm);


but I was wondering if it was possible to create a multi dimensional bar chart using this library. For example: Group by Store Name then Group By Employee then y-axis display average sale value ( already calculated by my backend ).

The data looks like:

"EmployeeName": "Heather",
"StoreName" : "Plaza",
"AverageSaleValue": 200
"EmployeeName": "Mellisa",
"StoreName" : "Plaza",
"AverageSaleValue": 240
}, {
"EmployeeName": "Sarah",
"StoreName" : "Oak Park",
"AverageSaleValue": 300
} ... ]


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)
                    .valueAccessor(function (d) {
                        return d.value.Actual;

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

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

                    .compose([budgets, actuals])

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

                    .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.