CODEWITHSUNDEEP
javascripthighcharts
Parwinder K
Parwinder K

Reputation: 13

How we change the rangeSelector in HighCharts

Is there any way we can change the rangeSelector from date and to date on click any button.

I want to provide two buttons so user can move the selection forward and backward.

Visit jsfiddle regularly!

Upvotes: 0

Views: 702

Answers (1)

wergeld
wergeld

Reputation: 14462

You can do this with the setExtremes method. First you need to get your current minimum time on the xAxis using getExtremes. Next you set your new maximum time to the minimum time. I used moment.js to handle subtracting months (or whatever your range selection is). I find out what range button is selected and then use the value and type to determine how much of what type of date to subtract to get my new start time. I have only done this with the 3m setting you have in your demo. You will need to add the logic for any other type. You will also have to handle going backwards too much such that you are now out of the data range - this can be done but I leave it up to you.

Basic "back" button function:

$("#btnBack").click(function() {
    var theChart = $('#container').highcharts(),
        extremes = theChart.xAxis[0].getExtremes(),
        minTime = extremes.min,
        maxTime = extremes.max,
        currRangeIndex = theChart.rangeSelector.selected,
        currRange = theChart.rangeSelector.buttonOptions[currRangeIndex],
        newMaxTime = minTime;

    // new start/end times
    var startTime,
        endTime;

    if (currRange.type == 'month') {
        var endDate = new Date(newMaxTime);
        var startDate = moment(endDate);    
        startDate.subtract(currRange.count, 'months');

        startTime = startDate.valueOf();
        endTime = newMaxTime;
    }   
    theChart.xAxis[0].setExtremes(startTime, endTime);
});

Working "back" button jsFiddle.

Upvotes: 1

Related Questions