CODEWITHSUNDEEP
javascriptjqueryhighcharts
John Fred
John Fred

Reputation: 77

Highstock Change tick interval on range selector change

I am unable to get the tickinterval to update in the following Jsfiddle: https://jsfiddle.net/rarwarrar/5xgoqjst/4/

Currently this:

   xAxis: {
    events: {
    setExtremes: function(e) {
      if (e.rangeSelectorButton.text === "2Hour") {
         $('#chart').highcharts().xAxis[0].tickInterval= 2700000 //45 min
         $('#chart').highcharts().redraw()
       }
    }
    }
   },

Is not working.

For instance can the tick interval be set to every 45 minutes once '2hour' is clicked?

Upvotes: 1

Views: 1199

Answers (3)

Kiren R.
Kiren R.

Reputation: 11

Maybe this could help someone, I updated an existing Fiddle ;-)

xAxis: {
  events: {
    setExtremes: function(e) {
      if (typeof(e.rangeSelectorButton) !== 'undefined') {
       // alert('count: ' + e.rangeSelectorButton.count + 'text: ' + e.rangeSelectorButton.text + ' type: ' + e.rangeSelectorButton.type);
        if (e.rangeSelectorButton.type === "week") {
          this.update({              
            tickInterval: 86400000, //1000*60*60*24 = 1 day
            minorTickInterval: 86400000
          }, false)
        }
      }
    }
  }
}

Then you will have to adapt it to your case of course.

Upvotes: 1

Grzegorz Blachliński
Grzegorz Blachliński

Reputation: 5222

You can use tickPositioner function for changing your tick positions after you set your extremes. You can use Axis.update() for updating tickPositions of this axis:

   setExtremes: function(e) {
     if (e.rangeSelectorButton.text === "2Hour") {
       this.update({
         tickPositioner: function() {
           var positions = [],
             info = this.tickPositions.info;
           for (var x = this.dataMin; x <= this.dataMax; x += 45 * 60 * 1000) {
             positions.push(x);
           };
           positions.info = info;
           return positions;
         }
       }, false)
     }
   }

Here you can see an example how it can work: https://jsfiddle.net/5xgoqjst/5/

You should be able to change your tickPositions on different ranges as well.

Best regards.

Upvotes: 3

wergeld
wergeld

Reputation: 14462

You can, but that would be confusing to have text read "2hour" but actual time be 45 minutes. Why not add new button for this? In order for this to show there needs to be a minimum number of points but you can override with allButtonsEnabled. Here is what your rangeSelector could look like:

   rangeSelector: {
         allButtonsEnabled: true,
     buttons: [{
       type: 'hour',
       count: 2,
       text: '2Hour'
     }, {
       type: 'hour',
       count: 5,
       text: 'Week'
     }, {
       type: 'day',
       count: 1,
       text: '2Weeks'
     }, {
       type: 'minute',
       count: 45,
       text: '45 minutes'
     }],
     selected: 1,
     inputEnabled: false,
     buttonPosition: {
       x: 340
     },
     buttonSpacing: 10
   }

And here is a live demo of it.

Upvotes: 1

Related Questions