Click events of each dc.js chart

Question

I am using dc.js for showing some of the charts on my dashboard. What I am looking for is to handle each chart's click event (e.g. bar chart click event, pie chart click event and mouse up event for ranged charts etc.) and save the history of clicked charts in the database. This way user will be able to see the clicks user has made for any of the chart after login.

I have checked dc.js for click events but I am not getting that properly.

Can anybody help me? Any help would be appreciated.

Answer 1

It might be easier, and more helpful, to watch the 'filtered' event:

chart.on('filtered.monitor', function(chart, filter) {
    // report the filter applied
});

I say easier, because you don't have to worry about watching different events for different charts. More helpful, because 'filtered' shows you the result of clicking without further processing, so you can show what was actually looked at rather than just what was clicked.

.monitor in the example above is an event namespace. You can use whatever string you want there, but do use some namespace to avoid stepping on other watchers of the same event.

If you really want click events, you can override chart.onClick by assigning to it and calling the old handler (yuck), or you can use e.g.

chart.selectAll('rect.bar').on('click.monitor', ...)

But now you'll have to look at the source to figure out what to select in each chart. And the namespace here is essential because you don't want to interfere with internal event processing.