Search code examples
javascriptdc.jsbrush

Multiple brushes in dc.js graphs

I'm wondering whether there is some high level way of having more than one brush on a graph. Here's the problem:

I have a stacked bar chart where each bar represents one weekday and different metrics are stacked on top of one another (stacked line charts are not available yet as far as I know). Now I would like to let the user select the days to display (and the selection should propagate into the other graphs). Everything works great with the brush on, but if you want to choose Sunday, which is at the end of the graph, and Monday which is at the beginning, you can't do that using a single brush. Anybody knows of a way to add more brushes?

Alternatively I'm looking for a way to add a click event listener that would "activate" the day you click on in a similar way like a ring chart section would work.

Thanks a lot for your ideas, Renra

Solution

  • You could try using an ordinal x axis instead of a linear one. The default behavior for ordinal bar charts is to click to select/deselect bars instead of range selection.

    That's chart.x(d3.scale.ordinal()).xUnits(dc.units.ordinal). If you are using dc 1.7.1 of earlier, you may have to specify the domain by d3.scale.ordinal().domain([’Monday',...])