Highstock setExtremes with custom range button

In the highstock selector, I added a button to select custom ranges (by name: my dates) and would like to set special restrictions when this button is called. I know this works if you put a simple button outside the chart and call: chart.xAxis [0] .setExtremes (30.80) ;.

But my script is different. I want to add a button next to the “1m 1y All” selector buttons, and I want the new button to set individual deadlines. Using the xAxis setExtremes events doesn't seem to work if I have something missing. http://jsfiddle.net/Aeaz3/1/

$(function() {

  $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
    // Create the chart
    $('#container').highcharts('StockChart', {


        rangeSelector: {
                    buttons: [{
                        type: '',
                        count: 2,
                        text: 'My dates'
                    },{
                        type: 'hour',
                        count: 1,
                        text: '1h'
                    }, {
                        type: 'day',
                        count: 1,
                        text: '1d'
                    }, {
                        type: 'month',
                        count: 1,
                        text: '1m'
                    }, {
                        type: 'year',
                        count: 1,
                        text: '1y'
                    }, {
                        type: 'all',
                        text: 'All'
                    }],
        },

        title : {
            text : 'AAPL Stock Price'
        },
        xAxis: {    
                        events:{
                            setExtremes: function(e) {
                                  var xMin = e.min;
                                 var xMax = e.max; 
                                var zmRange = computeTickInterval(xMin, xMax);
                                    this.chart.xAxis[0].options.tickInterval =zmRange;
                                    this.chart.xAxis[0].isDirty = true;


                            },
                        }
        },
        series : [{
            name : 'AAPL',
            data : data,
            tooltip: {
                valueDecimals: 2
            }
        }]
    });
  });

});
+4
2

setExtremes:

, . .setExtremes() . . , , . jQuery MooTools , Highcharts.

, , , , - .

, , , , , :

xAxis: {    
    events:{
        if (e.trigger == "rangeSelectorButton" && 
            e.rangeSelectorButton.text == "My dates"){
            // it is your button that caused this,
            // so setExtrememes to your custom
            // have to do in timeout to let
            // highcharts finish processing events...
            setTimeout(function(){
                Highcharts.charts[0].xAxis[0].setExtremes(1198681756385,1368144000000)
            }, 1);
        }
    }
}, 

Fiddle .

+4

, highstock, e.min e.max, . , 3 .

Highload.src.js 7447 ( 2.0.4). setExtremes.

:

fireEvent(axis, 'setExtremes', eventArguments, function () { // the default event handler

        axis.userMin = newMin;
        axis.userMax = newMax;

To:

fireEvent(axis, 'setExtremes', eventArguments, function (event) { // the default event handler

        axis.userMin = event.min;
        axis.userMax = event.max;

e.min e.max xAxis.setExtremes . ( setExtremes())

-2

Source: https://habr.com/ru/post/1523782/


All Articles