Get Information from a selected bar - dc.js

Question

I create charts with crossfilter and dc.js.

In Chart Nr.1 you can see how many guests visit a resturant per day, and the second chart shows the age of the guests. Both are bar charts.

For some calculations I need information from the selected bar. For Example:

In Chart Nr.1 you select the date 16/03/2019 and you see in Chart Nr.2 100 Guests were older then 50 and 30 younger then 50.

Now I need a variable with the 100 Guests, and another with the 30 Guests.

How I get at the data behind the aggregated value of each bar?

I started to answer this but I think it's better to link to a reductio function that does this or a relevant dc.js example rather than write new code for a well-known pattern. As noted below, it's not efficient and in some cases it might be better just to nest the data from scratch since crossfilter is best for incremental aggregations rather than fetching all the rows. — Gordon

M_M M_M · Accepted Answer · 2019-03-18T14:14:12

You could override the bar charts onClick function to save the value selected:

var valueSelected;

dc.override(barChart, 'render', function () {

    barChart.selectAll('rect').on("click", function (d) {
        valueSelected = d.data.value;

        //call original onClick:
        barChart.onClick(d);
    });

    barChart.selectAll('text.barLabel').on("click", function (d) {
        valueSelected = d.data.value;

        //call original onClick:
        barChart.onClick(d);
    });
});

Get Information from a selected bar - dc.js

1 Answers