Preserve selected date range when grouping by clicking rangeselector button

[tomheaps]

My webpage has multiple Highstock charts on the same page. What I would like is range selector buttons that when clicked, groups data to the specified units (e.g. day, week, month, year) whilst preserving the currently selected date range. This is the code I currently have in my global options but despite not specifying a 'type', it still zooms out to show 'all' data rather than keeping the current xAxis extremes:

Code: Select all

rangeSelector: {
	buttons: [{
		{
                text: 'D',
                preserveDataGrouping: true,
                title: 'Groups data by Days',
                dataGrouping: {
                    forced: true,
                    units: [
                        ['day', [1]]
                    ]
                },
                events: {
                    click: function (e) {
                        const xAxis = chart.xAxis[0];
                        var extremes = xAxis.getExtremes();
                        xAxis.setExtremes(extremes.min, extremes.max);
                    }
                }
      	}],
 }

Would be grateful for any help as to how I can stop the xAXis extremes from changing on clicking the button?

My second question is because I have multiple charts on one page, how would I ensure that the correct chart / xAxis is selected by the events: click function?

[sebastian.h]

Hi,
We appreciate you reaching out to us!

Let's work on this example, I added a button that sets extrema, but I need more information from you.
https://jsfiddle.net/BlackLabel/ojaLt7d6/

What do you mean, could you explain preciously?

how I can stop the xAXis extremes from changing on clicking the button?

References:
https://api.highcharts.com/highstock/ra ... ents.click
https://api.highcharts.com/highstock/ra ... taGrouping

I'm waiting for news from you.
Best regards.

[tomheaps]

Thanks for your reply. What I mean can be demonstrated in the fiddle you posted.

Using the navigator, zoom in to a specific date range e.g. 1 year from the end so the selected dates displaying at top right shows December 29 2016 - December 29 2017.

Then click on either of the buttons at the top and the data gets grouped by month but the series zooms out to show the entire data range from Jan 1 2007 - December 29 2017.

What I would like to achieve by clicking on these buttons is that the data gets grouped by month but the series does not zoom out and preserves the currently visible date ranges so for example if you had zoomed in to December 29 2016 - December 29 2017, only the data between these dates remains visible after grouping.

Hope this makes sense?

[sebastian.h]

Hi,
Thanks for the explanation.

I don't think you fully understand how the preserveDataGrouping to true option works.
Take a look at this example from the documentation, e.g. if you have the option enabled, you will keep the unit settings every month when changing the range from the datapicker on the right.

You can experiment and set the unit up for the weekend and see how it works.

Demo:
https://jsfiddle.net/gh/get/library/pur ... grouping/

Hope it clears up a little, if you have any questions, feel free to ask.
Best regards.

[tomheaps]

Thanks.

I fully understand what preserve datagrouping does - it maintains the specified grouping even after you adjust the date range e.g. using the navigator.

My question was - how do I stop the chart from zooming out to show all data points (i.e. leave the currently selected date range as the axis extremes) when you click on a button that groups data - I don't want to specify a type/zoom of 'all', 'week', 'month', 'year' or 'ytd' I just want to stick with the currently selected date range.

[sebastian.h]

Hi,
Thanks for the explanation but I'm still struggling with what do you want to achieve.

Could you show me on screen or give some examples?

Best regards.

[tomheaps]

Okay.

Zoom in to a particular date range using the navigator e.g. Jan 5 2021-Mar 25 2021 see below:

Image 1.png (24.25 KiB) Viewed 1635 times

Click on the first button Month (preserve=true) and the data gets grouped by month but the previously selected date range is lost and the chart is now displaying all data points, see below

:

Image 2.png (23.49 KiB) Viewed 1635 times

Instead what I want to happen after clicking the button is that the data gets grouped by month but the previously selected date range is preserved like this:

Image 3.png (22.87 KiB) Viewed 1635 times

[sebastian.h]

Hi,
Thanks a lot for the screens, now it's clear.

There is no option that will save the settings from the date picker but you can set it on the button rangeSelector.buttons.count
https://api.highcharts.com/highstock/ra ... tons.count

Demo:
https://jsfiddle.net/BlackLabel/prn5fvgj/

Let me know what do you think about this solution.
Best regards.