ImPERFECT
Posts: 9
Joined: Mon Oct 25, 2021 12:32 pm

Smart rangeSelector button preselection

Hello,
I'm trying to add some fancy logic to a button range preselection. The idea is to highlight the button with maximum range that has available data.

As you can see on the picture below we don't have data for 5 years price history but we have 1 year and the idea is to show "1 Year" button highlighted in this case.
Image

And if the price history has only 9 months available we want to show "6 Month" button highlighted.


The piece responsible for rangeSelector:

Code: Select all

rangeSelector: {
                      allButtonsEnabled: true,
                      enabled: true,
                      floating: false,
                      buttonSpacing: 10,
                      buttonPosition: {
                          align: 'right'
                      },
                      buttons: [
                          {
                              text: 'Week',
                              count: 1,
                              type: 'week'
                          },
                          {
                              text: '1 Month',
                              count: 1,
                              type: 'month'
                          },
                          {
                              text: '6 Month',
                              count: 6,
                              type: 'month'
                          },
                          {
                              text: '1 Year',
                              count: 1,
                              type: 'year'
                          },
                          {
                              text: '5 Years',
                              count: 5,
                              type: 'year'
                          }
                      ],
                      buttonTheme: {
                          fill: '#fff',
                          stroke: 'none',
                          'stroke-width': 0,
                          r: 5,
                          style: {
                              color: '#171D28',
                              fontWeight: 500,
                              fontSize: '16px'
                          },
                          states: {
                              select: {
                                  fill: '#072FCC',
                                  style: {
                                      color: '#FFF'
                                  }
                              },
                              hover: {
                                  fill: '#c1cbf2',
                                  style: {
                                      color: '#171D28'
                                  }
                              }
                          },
                          padding: 6,
                          width: 60
                      },
                      inputEnabled: false,
                      labelStyle: {
                          color: 'transparent'
                      }
                  }
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Smart rangeSelector button preselection

Hello ImPERFECT,

Welcome to our forum and thanks for contacting us with your question!

There are few ways to achieve such effect. In general you need to implement on your own calculations which will determine which button should be selected, then you can select that button with chart.rangeSelector.clickButton() function.
Demo: https://jsfiddle.net/BlackLabel/oqje62hu/

Feel free to ask any further questions!
Best regards!
Mateusz Bernacik
Highcharts Developer
ImPERFECT
Posts: 9
Joined: Mon Oct 25, 2021 12:32 pm

Re: Smart rangeSelector button preselection

Hello Mateusz,

Thanks for the answer, it really helps me to see a direction to move. I'm trying to get the data to do the calculations but for now the only place where I can get the series data is `data.complete` function. That's not the place where I can call `chart.rangeSelector.clickButton` method.

Could you point me to the way how to get parsed data from CSV file within `chart.events.load` method?
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Smart rangeSelector button preselection

Hi ImPERFECT,

I think you should stick to chart.events.load event. You can access series data and all series related informations there with this.series (it is an array of series, so in order to refer to specific one remember about correct notation e.g. this.series[0]).
Demo: https://jsfiddle.net/BlackLabel/Lbs5qh6w/

Also using it might be quite handy because you can access there many informations that could be useful in doing your calculations, for example, you could use this.series[0].xData to calculate your data range and define which button should be selected. this is only a suggestion though, if you looking for something else then feel free to ask!

Best regards!
Mateusz Bernacik
Highcharts Developer
ImPERFECT
Posts: 9
Joined: Mon Oct 25, 2021 12:32 pm

Re: Smart rangeSelector button preselection

Thanks once more for your help,

Things I've noticed:
1) I'm using chart instead of stockChart:

Code: Select all

Highcharts.chart({
                  data: {
                      csvURL: "{% static 'csv/pricing.csv' %}",
                      enablePolling: false,
                      ...
2) I can see the data within console after console.log(chart.series[0]) but chart.series[0].xData is undefined. It looks like it's async or inaccessible.
3) chart.series[0].data equals to empty array
4) chart.series[0].xAxis.min equals to undefined, chart.series[0].xAxis.dataMin equals to null
ImPERFECT
Posts: 9
Joined: Mon Oct 25, 2021 12:32 pm

Re: Smart rangeSelector button preselection

Good morning,

@mateusz.b Any update on this topic?
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Smart rangeSelector button preselection

Hello ImPERFECT,

Sorry for slightly longer response time.

I didn't know that you use basic chart constructor. Unfortunately it changes everything, because range selector is a part of HIghcharts Stock. Without appropriate license (Highcharts Stock) you cant use range selector with chart constructor. The only solution in this case is to create your own range selector.

Best regards!
Mateusz Bernacik
Highcharts Developer
ImPERFECT
Posts: 9
Joined: Mon Oct 25, 2021 12:32 pm

Re: Smart rangeSelector button preselection

Thanks for the response,

So if we buy Stock license we'll be able to get the whole functionality described in this thread?
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Smart rangeSelector button preselection

Hello ImPERFECT,

Exactly, range selector is a part of Highcharts Stock and such license is required. Range selector was created for stock charts in general so it doesn't work with all types of series and usage sometimes can be somewhat limited but in your described case it should work perfectly.

Best regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Stock”