DoumiLo
Posts: 35
Joined: Wed Jan 20, 2021 2:09 pm

Week grouping by default

Hello,

Is there a way to display data with a week grouping by default? The rangeSelector buttons should not be displayed on top of the graph so the week grouping should be automatic on graph loading/update.

Thanks for your help :)
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Week grouping by default

Hello DoumiLo,

Thanks for contacting us with your question.

You can use data grouping options to set data grouping by a week.
Demo: https://jsfiddle.net/BlackLabel/o9qafg37/
API reference: https://api.highcharts.com/highstock/pl ... ping.units

Let me know if that was what you were looking for!
Regards!
Mateusz Bernacik
Highcharts Developer
DoumiLo
Posts: 35
Joined: Wed Jan 20, 2021 2:09 pm

Re: Week grouping by default

Hello! Thanks a lot!

Looks promising but I want to make sure that the data is never seen by day. I have tried preserveDataGrouping like this:

Code: Select all

plotOptions: {
      series: {
      	preserveDataGrouping: true,
        dataGrouping: {
          units: [
            [
              'week',
              [1]
            ]
          ]
        }
      }
    },
But I can still view the days when I use the zoom...

Thanks again for your help!
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Week grouping by default

DoumiLo,

Adding force: true option should most likely solve this.
Demo: https://jsfiddle.net/BlackLabel/uzrjncv8/
API reference: https://api.highcharts.com/highstock/pl ... ing.forced

Let me know if now it is working in line with your expectations.
Regards!
Mateusz Bernacik
Highcharts Developer
DoumiLo
Posts: 35
Joined: Wed Jan 20, 2021 2:09 pm

Re: Week grouping by default

Hello! It's perfect thank you!
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Week grouping by default

You're welcome! In case of any further questions, feel free to contact us again.
Mateusz Bernacik
Highcharts Developer
DoumiLo
Posts: 35
Joined: Wed Jan 20, 2021 2:09 pm

Re: Week grouping by default

Oups sorry, I have another question related to this...

I'm using different dropdowns to update my graph with a few different options. I'm using the jQuery change method. A few of those options are the ones that should always show the graph by week.

So this is part of my code:

Code: Select all

if(weekOnly.includes(varSelected)){
  chart.update({
      rangeSelector: {
          buttons: [],
      },
      plotOptions: {
          series: {
            dataGrouping: {
              forced: true,
              units: [
                [
                  'week',
                  [1]
                ]
              ]
            }
          },
      },
      chart: {
        type: type
      },
      legend: {
          enabled: true
      },
      data: {
          csv: chartData
      },
  });
}else{
  chart.update({
      chart: {
        type: type
      },
      legend: {
          enabled: true
      },
      rangeSelector: {
          buttonTheme: {
              width: 120,
              style: {
                  color: '#1C819a',
                  fontWeight: 'bold'
              },
          },
          enabled: true,
          inputEnabled: true,
          inputDateFormat: '%e %b %Y',
          inputEditDateFormat: '%Y-%m-%e',
          allButtonsEnabled: true,
          buttons: [{
              type: 'month',
              count: 6,
              text: 'Days',
              dataGrouping: {
                  forced: true,
                  groupAll: true,
                  units: [
                      ['day', [1]]
                  ],
                  dateTimeLabelFormats: {
                      day: ["%e %B %Y"],
                  }
              },
          }, {
              type: 'year',
              count: 1,
              text: 'Weeks',
              preserveDataGrouping: true,
              dataGrouping: {
                  forced: true,
                  groupAll: true,
                  units: [
                      ['week', [1]]
                  ],
                  dateTimeLabelFormats: {
                      week: ["Week: %e %B %Y"],
                  }
              },
          }, {
              type: 'year',
              count: 1,
              text: 'Months',
              preserveDataGrouping: true,
              dataGrouping: {
                  forced: true,
                  groupAll: true,
                  units: [
                      ['month', [1]]
                  ],
                  dateTimeLabelFormats: {
                      week: ["%B %Y"],

                  }
              },
          }, {
              type: 'year',
              count: 1,
              text: 'Years',
              preserveDataGrouping: true,
              dataGrouping: {
                  forced: true,
                  groupAll: true,
                  units: [
                      ['year', [1]]
                  ],
                  dateTimeLabelFormats: {
                      week: ["%B %Y"],

                  }
              },
          }],
      },
      data: {
          csv: chartData
      },
  });
}
Where weekOnly is an array with the variables that should be presented only by Week. If it's not one of those variables, it should show the rangeSelector buttons as usual.

It's working fine when I select different variables from my dropdown. It goes from showing by week only to showing as normal...

But if I select a "normal" variable and click for example on the Days button and then select one of the variable that should only be presented by week, it will stay by Days...

Not sure my explanation is clear (sorry for my english) but how can I make the graph to update correctly in this case?

Thanks again for your help
DoumiLo
Posts: 35
Joined: Wed Jan 20, 2021 2:09 pm

Re: Week grouping by default

Hello,

Juste an update. I have decided to use a very simple solution. Instead of hiding the buttons I force a click like this:

Code: Select all

if(weekOnly.includes(variable)){
        chart.rangeSelector.clickButton(1)
      }else{
        chart.rangeSelector.clickButton(0)
      }
It's not a perfect solution pour it's working...

Thanks!
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Week grouping by default

Hello DoumiLo,

Glad to hear you have found working solution.

I think that you could also try to render your chart conditionally. It seems like your chart config depends on a variable and that you have special criteria that should be applied only for week based periods. You could try to use destroy() method to remove old chart and create in that place a new one with appropriate config. But that's only a suggestion that you might want to try.
API reference: https://api.highcharts.com/class-refere ... rt#destroy

In case of any further questions feel free to contact us again.
Regards!
Mateusz Bernacik
Highcharts Developer
DoumiLo
Posts: 35
Joined: Wed Jan 20, 2021 2:09 pm

Re: Week grouping by default

Hello!

Thank you for your response. I can see how to use the destroy() method but how can I create a new one in that place?
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Week grouping by default

Hi,

Simply create new one with Highcharts constructor. I was thinking about something like that: https://jsfiddle.net/BlackLabel/vo49f810/
If I understood correctly in your case chart options depend on some other variables. While updating existing chart with new options is definitely valid in this situation, it can be a little tricky at the same time. As an alternative you could create few sets of options like in the demo, and create your charts conditionally depending on variable value. Both approaches are correct, creating a new chart might be a bit performance heave, but not necessary. Just wanted to mention that option, but it is up to you which one you like better.

Regards!
Mateusz Bernacik
Highcharts Developer
DoumiLo
Posts: 35
Joined: Wed Jan 20, 2021 2:09 pm

Re: Week grouping by default

This is neat! Thanks a lot Mateusz! I will definitely try this!
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Week grouping by default

You're welcome. In case of any questions feel free to contact me.
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Stock”