Single/Multiple selection in charts depending on CTRL key + mouse click

[rahulstomar]

I am using dc.js v1.7.4, I have to change the selection scenario in charts so on single mouse click only one selection should be set until and unless mouse click is performed with CTRL key pressed then multiple selections should be made. I can modify dc.js and achieve this functionality with below change

/////////////////////////////////////////////

_chart.filter = function (_) {
        if (!arguments.length) return _filters.length > 0 ? _filters[0] : null;

        if (_ === null) {
             resetFilters();
        }
        else if (d3.event !== null && d3.event.ctrlKey) {      
             if (_chart.hasFilter(_))
                removeFilter(_);
            else
                addFilter(_);
        }
        else {
            resetFilters();
            addFilter(_);
        }

        if (_root !== null && _chart.hasFilter()) {
            _chart.turnOnControls();
        }
        else {
            _chart.turnOffControls();
        }

        return _chart;
    };

///////////////////////////////////////////////////////////////

But I don't want to modify dc.js. So, my question is can I achieve above functionality from my javascript?

I saw that this functionality was present in version dc.js v1.4 https://github.com/dc-js/dc.js/blob/d7af061b4f54f9c7335a1ad881cb1d19d8ca471f/src/single-selection-chart.js with allowMultipleFilters() method. So is there something I am missing?

[gordonwoodhull]

Sorry for the slow reply.

I'm not able to find the allowMultipleFilters method you mention in the linked reference, or in dc.js tags 1.3, v1.4.0, or 1.5.0 (no matches for "allow" or "multiple" in the src/ directory), so I'm not sure what you're referring to. As long as I've been involved with the project, charts with ordinal scales have been multiple-select, and charts with continuous scales have had range selections.

Under dc.js 2.0 I think you can do this with some clever manipulation of hasFilterHandler, removeFilterHandler, and addFilterHandler and I think you could also go deeper and change the click behavior. None of this is very pretty.

It would be great to make the behavior pluggable, since there are many different ways. There was an earlier attempt in PR #601, and the larger issue is #712.

[rahulstomar]

Thanks for the reply, I also tried to search the above and couldn't find it now.. may be I missed something. I am currently using the above code for my implementation.

@gordonwoodhull, apart from this, I need to ask how can I improve the performance of charts when there are about 15 charts in a single page, all filter each other out. Charts that I am using currently are 13 ROW charts, 1 PIE chart and 1 composite chart (with sub charts as 1 Bar chart and 4 line charts with selectable legends). When I run these charts, filtering takes more time compared to others and sometimes browser crashes.

Is there something I can use to improve their performance so at least the browser doesn't crash or a way to clear the cache or something?

[gordonwoodhull]

Thanks for sharing your solution, but the issue tracker is for reporting bugs and making enhancement requests, not for general support questions like your performance problem.

Please ask on Stack Overflow with the dc.js tag, or on the user group, and we will be glad to help you there.

When you do, if you can show an example (fiddle or live site) demonstrating your problem, that will help a lot. There are plenty of performance pitfalls and it's not clear which one you might be hitting from your description.

[rahulstomar]

Ok, thanks

[Physicalpixel]

Hey there, do we have a solution for this? Any information you could provide will be much appreciated.