How to set xAxis maxRange/minRange for each rangeSelector button separately

user_15673394 0
Viewed 92

how I can set the xAxis maxRange(minRange) for each rangeSelector button separately?

For example: When I click on rangeSelector button "Day bars", I would like to set xAxis extremes for zoom in to 10days(so 10days or 10bars will be the minim for zoom in, which will be show in plot area) and for zoom out to 60days(60days or 60bars will be maximum for zoom out, which will be show in plot area). When I click on rangeSelector button with "Week bars", I would like to set xAxis extremes for zoom in to 10weeks(so 10weeks or 10bars will be the minim for zoom in, which will be show in plot area) and for zoom out to 60weeks(60weeks or 60bars will be maximum for zoom out, which will be show in plot area).

Could I use somehow maxRange,minRange functions in rangeSelector? Could I set in chart event, rangeSelector event or xAxis event? I tried to set it through xAxis afterSetExtremes event, but is not working.

xAxis: {
        type: 'datetime',
      events: {
        afterSetExtremes: 
          function(e)                                                         
          {
            if (e.trigger == "rangeSelectorButton" && e.rangeSelectorButton.text == "Day")
            {
              console.log("day");

              var maxDistance = 1 * 30 * 24 * 3600 * 1000; //1 months time
              var xaxis = this;
              if ((e.max - e.min) > maxDistance) {
                var min = e.max - maxDistance;
                var max = e.max;
                window.setTimeout(function() {
                  xaxis.setExtremes(min, max);
                }, 1);
              }
            }
            if (e.trigger == "rangeSelectorButton" && e.rangeSelectorButton.text == "Week")
            {
              console.log("Week");
            
              var maxDistance = 12 * 30 * 24 * 3600 * 1000; //12 months time
              var xaxis = this;
              if ((e.max - e.min) > maxDistance) {
                var min = e.max - maxDistance;
                var max = e.max;
                window.setTimeout(function() {
                  xaxis.setExtremes(min, max);
                }, 1);
              }
            } 
            
          },
      
      }
    }

Please see jsFiddle: https://jsfiddle.net/PaulJaker/mrgk5s19/120/

Thank you a lot.
Paul

highcharts javascript
1 Answers

Try to write a custom functionality for each button to achieve it, for example for the days try to do something like this:

{
          text: 'Day',
          dataGrouping: {
            forced: true,
            units: [
              ['day', [1]]
            ]
          },
          events: {
            click(e) {
              e.preventDefault();

              const maxDistance = 60 * 60 * 24 * 1000 * 10; // where 10 is the days amount
              const min = chart.xAxis[0].min;

              window.setTimeout(function() {
                chart.xAxis[0].setExtremes(min, min + maxDistance);
              }, 1);

            }
          }
        },

Demo: https://jsfiddle.net/BlackLabel/2bf5tp0h/

user_105228420
Related