How to add 'range' filter on Line Chart?

[BorderlessNomad]

I was wondering if there is any way to add 'range' filter on Line Chart. DC.js mentions about

chart.rangeChart

however there seems to be no way to parse another chart (bar) to that method.

e.g. http://dc-js.github.io/dc.js/#monthly-move-chart

[TomNeyland]

@ahirmayur Right now the easiest way to do this is to use the dc-post-setup-chart attribute to pass in a callback function, and then in the callback function add the range chart to your line chart.

Example:

In your html:

<div dc-chart="lineChart" dc-options="myChartOptions" dc-post-setup-chart="setupRangeChart">
    <div id="my-range-chart"></div>
</div>

In your controller:

$scope.myChartOptions = {...}; // An object containing the line chart options

$scope.setupRangeChart = function(myLineChart, chartOptions) {
    var myRangeChart = dc.barChart("#my-range-chart");
    //... setup the range chart
    myLineChart.rangeChart(myRangeChart);
};

However, this is less than elegant, and feels like a leak in the abstraction that angular-dc provides.

A better solution I have been considering is to add a few nestable directives to angular-dc that could be used in the following way:

<div dc-chart="lineChart" dc-options="myChartOptions" dc-post-setup-chart="setupRangeChart">
    <div dc-range-chart dc-dimension="myRangeDimension" dc-group="myRangeGroup"></div>
</div>

Thus avoiding the need for a callback and the need to use dc.js directly from within the controller.

I'll think on this a little more this weekend and let you know if I have implemented a better solution.

[BorderlessNomad]

Thanks for the response.

At the moment I am using a solution somewhat similar to your callback example. However I would love to see directives directives implemented.

[bwinchester]

The current code for angular-dc seems to be using an attribute called dc-range-chart for the rangeChart() method. I simply used dc-range-chart="volumeChart" like the example, https://tomneyland.github.io/angular-dc/example/stocks/nasdaq.html , and it works fine. The reset feature of the main chart doesn't reset the rangeChart, but I wrote a fix for that too.

In the angular-dc linking function, look the code that adds a click listener to the 'a.reset' element. Then add a check for dc-range-chart attribute, eval the value and call filterAll on it, like so:

a.on('click', function() {
                        chart.filterAll();
                        if(iAttrs.dcRangeChart){
                            var rangeChart = scope.$eval(iAttrs.dcRangeChart);
                            rangeChart.filterAll();
                        }
                        dc.redrawAll();
                    });

[berendberendsen]

@bwinchester did you manage to replicate it exactly like the example? I am trying with my own data and what seems to be happening is that the range chart shows up fine, but when I use it to zoom in on a certain period it actually 'filters' out the rest of the rangechart. In other words, the grey bars aren't there which are actually quite helpful.