clickable bar charts not clickable if not dc.units.ordinal

[jrhite]

To make a bar in a bar chart clickable the xUnits on the bar chart needs to be of type dc.units.ordinal.

I have a bar chart which uses xUnits(d3.time.days). It's 'ordinal' but not dc.units.ordinal. I'd really like to make this chart clickable, but the current implementation doesn't allow me to.

[NickQiZhu]

If you turn brush off, the bars will become clickable however you won't be able to use the brush this way. One solution is to create another brushable clone to allow user to select a range to filter, similar to what NASDAQ example was doing.

[jrhite]

Thanks. Maybe I misunderstood. I do have the brush turned off, but I still cannot attach a click handler to individual bars of the chart. It seemed that lines 2203-2204 of dc.js was preventing clickability because the _chart.isOrdinal() check was failing since my xUnits are d3.time.days.

if (_chart.isOrdinal())
  bars.on("click", _chart.onClick);

I was assuming I could do:

dc.barChart('#my_bar_chart')
   .brushOn(false)
   .on('click', function(d) { ... })
   ...
   ...

[NickQiZhu]

Err.. my bad =) in a rush of replying this I forgot I decided not to implement clicking for non-ordinal bar chart since the range selection is deemed more useful. Yet, you can easily attach the clicking handler using a renderlet, try this:

chart.renderlet(function(_chart){
  _chart.selectAll("rect.bar").on("click", _chart.onClick);
});

[jrhite]

Ah! That's perfect, thank you very much.

[grawlee]

hi Nick,
Thanks for your amazing dc library!
i have question. - can i make multi-clicking or range selection work for the ordinal bar chart. Thanks in advance.
grawl

[NickQiZhu]

For double clicking you can simply attach a listener to dbclick event:

chart.renderlet(function(_chart){
  _chart.selectAll("rect.bar").on("dbclick", function(e){...});
});

Range selection currently does not work with ordinal bar chart however I am thinking of implementing it using the new multi-filter capability.

[grawlee]

Thanks for your reply Nick... Sorry..... i meant multi-select ...
i was wondering if i could multi select the bars, lets say 2 at a time to trigger a filter on the chart group.

i agree that the flexibility of range select-ing on ordinal types would be a good addition,

[NickQiZhu]

It should (be able to) support multi-selection if it does not already. If it does not, please feel free to create a feature request for it (should be a trivial change to make it work)

[emiguevara]

The proposed solution to this problem (using renderlet and chart.onClick) does not work with current development version of dc.js (2.0.0-alpha.2).

.on("click", _chart.onClick)

produces Uncaught TypeError: Cannot read property 'isFiltered' of undefined at dc.js:710.

[gordonwoodhull]

Hi @emiguevara, I just saw your comment here. I haven't tried this, but I think you'd have to define your own onClick handler, rather than relying on the built-in one.

Here is a more recent conversation:
https://groups.google.com/forum/#!topic/dc-js-user-group/xCSKjvoVkds

It's too bad that you have to customize dc.js just to get such basic functionality!

[gordonwoodhull]

So, it appears that the reason .on("click", _chart.onClick) does not work is that when 8b3c6ff restored onClick behavior for ordinal charts, onClick became a private function rather than an override of the base function.

(And using the base's onClick does not work because the data is wrapped by the stack algorithm in e651220, which incidentally also removed the click behavior for ordinal bar charts.)

I am fixing this in 2.0.0-beta.4

[anmolkoul]

Hey @gordonwoodhull ,
If i have a stacked bar chart, Is it possible to drill down on the rest of the data (charts) by clicking on a segment (stack) of the stacked bar chart? Right now the whole ordinal category gets selected on click.

Much thanks.

[gordonwoodhull]

Hi @anmolkoul, that would be request #657. I think you can do it by adding a custom click event, but I haven't tried it myself.