niveki
Posts: 13
Joined: Tue Mar 15, 2022 8:09 pm

stockChart with rangeSelector select custom interval

Hello,
I use stockchart with rangeSelector option to sort some values by day month and year.

The problem iam having its for selector by month I would like use a custom interval not 1 - 30 or 31, but use 5 - 4.
For exemple not 1 September- 30 September but 5 September to 4 October.

It’s possible to use custom interval with range selector and only for one type of options ?

Thanks
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: stockChart with rangeSelector select custom interval

Hello there,

We have a feature that allows user to enter a custom date period on a Stock chart. It is located in the top right corner of the chart. Just click on a date, and enter a custom time period.

DEMO: https://jsfiddle.net/BlackLabel/9p06nqzx/
API: https://api.highcharts.com/highstock/rangeSelector

Let me know if that's what you were looking for,
Best regards!
Kamil Musiałowski
Highcharts Developer
niveki
Posts: 13
Joined: Tue Mar 15, 2022 8:09 pm

Re: stockChart with rangeSelector select custom interval

kamil.m wrote: Hello there,

We have a feature that allows user to enter a custom date period on a Stock chart. It is located in the top right corner of the chart. Just click on a date, and enter a custom time period.

DEMO: https://jsfiddle.net/BlackLabel/9p06nqzx/
API: https://api.highcharts.com/highstock/rangeSelector

Let me know if that's what you were looking for,
Best regards!
Hello,

yes I know this, but for my usage I need to group my data by month and by sum but not between 1 - 30/31 but change the start and end point of data grouping for month (the grouping data is between 5 - 4 of every month.
I give you a exemple of my usage at this link : https://codepen.io/k-vin-maitre/pen/zYWYwbp
for exemple : for mars and with the option by mont selected, I need to start at 5 mars and stop at 4 April include. it is possible or not ?

thanks
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: stockChart with rangeSelector select custom interval

Sure, that is entirely possible!
You can use the setExtremes method that is available on every Axis. See it in action, on a Highstock chart.

DEMO: https://jsfiddle.net/BlackLabel/2de0wnp4/
API Reference: https://api.highcharts.com/class-refere ... etExtremes

Best regards!
Kamil Musiałowski
Highcharts Developer
niveki
Posts: 13
Joined: Tue Mar 15, 2022 8:09 pm

Re: stockChart with rangeSelector select custom interval

kamil.m wrote: Mon Sep 26, 2022 9:01 am Sure, that is entirely possible!
You can use the setExtremes method that is available on every Axis. See it in action, on a Highstock chart.

DEMO: https://jsfiddle.net/BlackLabel/2de0wnp4/
API Reference: https://api.highcharts.com/class-refere ... etExtremes

Best regards!
Thanks for your answser ,but after check of your proposal isnt's what I want.
I reformule my needs : I want to change the default interval "rangeSelector" thanks "dataGrouping" option with another interval 5 - 4 of every month and not 1 - 30/31

thanks
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: stockChart with rangeSelector select custom interval

I think I understand your requirements now. The easiest way to achieve it would be to use the offsetMin and Max on the rangeSelector buttons. That way, you can add or subtract a certain timestamp from a default value.
More about it here:
https://api.highcharts.com/highstock/ra ... .offsetMin
https://api.highcharts.com/highstock/ra ... .offsetMax

Best regards!
Kamil Musiałowski
Highcharts Developer
niveki
Posts: 13
Joined: Tue Mar 15, 2022 8:09 pm

Re: stockChart with rangeSelector select custom interval

hi,

I try your solution but they didn't work..

Code: Select all

{
	type: 'year',
        text: 'Month',
        offsetMin: -(5 * 24 * 3600 * 1000), // - 5 days of 24 hours * 3600 secondes * 1000 s -> ms
        offsetMax: 4 * 24 * 3600 * 1000, // + 4 days of 24 hours * 3600 secondes * 1000 s -> ms
        dataGrouping: {
        	approximation: 'sum',
                forced: false,
                units: [['month', [1]]]
        }
}
For determine my new value with 5 days before new month and 4 days after new month, but with my dataset of 3 values one 28 February (4), 1 mars (8) and 1 April (6) when I choose option order by month I get 4 on April, 8 mars and 6 April it's right but normally with the new interval it's wrong ...
How I can fix it ?

I give you my codepen if you want try it.

https://codepen.io/k-vin-maitre/pen/zYWYwbp

thanks
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: stockChart with rangeSelector select custom interval

Hello,

I think that you have entered the wrong type of button. You have used the 'year' type, but in the button title it says 'month', and I guess you wanted to show a month, right?

But after some thought process, I think that it won't be exactly what you need. Because the offset calculates the time period from a current date, it would make no sense to calculate the offset period dynamically every time you click.

An easier solution for that would be using xAxis.setExtremes method. You can enter hardcoded (or dynamically calculated) timestamp values, and the chart will set itself to the exact timestamp periods.

For example, something like that: https://jsfiddle.net/BlackLabel/sazuy6b9/

https://api.highcharts.com/class-refere ... etExtremes

Sorry for the confusion!
Regards
Kamil Musiałowski
Highcharts Developer
niveki
Posts: 13
Joined: Tue Mar 15, 2022 8:09 pm

Re: stockChart with rangeSelector select custom interval

hi,

ok I think I don't express myself well.

i will try to explain my goal with some pictures, both with the result get and one with the result expect.

i want to change the default interval when you sort by month by rangeselector and sum option thanks "approximation: 'sum',"

but what I need is a new interval for the current month now i want to change it to between 5-4 of every month and not 1-30/31

my pictures to explain you :

By day :
Image

By months :
Image

For the two image berow I will explain you the result expected : the 28 February and 1 mars need to be on February result, they datas 5 mars / 1 april and 3 April need to be on mars result and 6 April on April result just like this :

Result expected:
Image

Do you understand now my goal ?
and it's possible ?
thank for your futur response and for your help :)
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: stockChart with rangeSelector select custom interval

Hi there!

Thank you for attaching the pictures, now I can clearly understand your requirements.

And right away I can tell you, that at the current state of the dataGrouping property, it is not possible to achieve it without some drastic functionality changes.

The only solution that comes to my mind would be to do it manually.
Disable the dataGrouping, group your data into columns with the desired period in a separate JS function, and create a second series. That way, you'll have two series that you can toggle. One of them would be your default, unchanged data, and the second one would be your dynamically calculated grouped series with some custom JS functionality.

Do not hesitate to contact us with any other questions,
Best regards!
Kamil Musiałowski
Highcharts Developer
niveki
Posts: 13
Joined: Tue Mar 15, 2022 8:09 pm

Re: stockChart with rangeSelector select custom interval

hey,

thanks for your answer. I have create my own interval and it's work but now I need to change the xAxis by the name of the month.
I have try a new implementation but he didn't put the correct label cf capture.

Image

on console it's the second line send to the Xaxis :

Image

code :

Image

and debug Xaxis :

Image

I d'ont know why it didn't put the good xAxis because on catégories it's the right text..

and after that I have another problem because when I change of rangeSelector the chart give the new format...

picture to understand better :

init :
Image

after click on month button and come back on init bottom :
Image

he didn't keep the good formater of Xaxis why ?

thanks for your futur answer and cap :)
niveki
Posts: 13
Joined: Tue Mar 15, 2022 8:09 pm

Re: stockChart with rangeSelector select custom interval

edit : I fixed the problem with the wrong xAxis it's ok,
now just need to put the good catégorie and remove the timestamp ...
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: stockChart with rangeSelector select custom interval

Hi there,

I'm glad that you have managed to fix it by yourself!

If you still encounter any issues that might require some assistance from me, please reproduce the issue in an online editor, tell me what's wrong, and I'll have a look into that.

Best regards!
Kamil Musiałowski
Highcharts Developer
niveki
Posts: 13
Joined: Tue Mar 15, 2022 8:09 pm

Re: stockChart with rangeSelector select custom interval

kamil.m wrote: Mon Oct 03, 2022 7:37 am Hi there,

I'm glad that you have managed to fix it by yourself!

If you still encounter any issues that might require some assistance from me, please reproduce the issue in an online editor, tell me what's wrong, and I'll have a look into that.

Best regards!
Hi Kamil,

I didn't fix my problem of label of xAxis.
it's online on this link : https://codepen.io/k-vin-maitre/pen/XWEWyMq

The issue is between lines 984 - 994.

and when I inspected I can see the good label : February Mars and April but on the graphique its some numbers, how change that ?

Image

thanks ;)
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: stockChart with rangeSelector select custom interval

Hi there,

Maybe instead of using your custom categories formatting function, use the Highcharts xAxis.labels.formatter?

https://api.highcharts.com/highcharts/x ... .formatter

It should cause less issues than creating a custom categories array, and will make your code more readable.
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Stock”