score:2

Accepted answer

In the setExtremes you can check which button is selected by code: 

xAxis: {
    events: {
        setExtremes: function(e) {
            console.log(this);
            if(typeof(e.rangeSelectorButton)!== 'undefined')
            {
              alert('count: '+e.rangeSelectorButton.count + 'text: ' +e.rangeSelectorButton.text + ' type:' + e.rangeSelectorButton.type);
            }
        }
    }
}

You can render your own buttons by:

normalState = new Object();
        normalState.stroke_width = null;
        normalState.stroke = null;
        normalState.fill = null;
        normalState.padding = null;
        //normalState.r = null;
        normalState.style = hash('text-decoration', 'underline');

        hoverState = new Object();
        hoverState = normalState;


        pressedState = new Object();
        pressedState = normalState;

chart_1MButton = chart.renderer.button('1M', 96, 10, function() {
        chart.xAxis[0].setExtremes(1344527940000, 1346342400000, true);
        unselectButtons();
        chart_1MButton.setState(2);
    }, normalState, hoverState, pressedState);

    chart_1MButton.add();

 function unselectButtons() {
            chart_1MButton.setState(0);
}

score:0

You can do something like the following:

var urls = {
    '1m': 'url1',
    '3m': 'url2',
    '6m': 'url3',
    'YTD': 'url4',
    '1y': 'url5',
    'All': 'url6'
};

$('.highcharts-button').on('click', function() {
    var selected = $(this).find('tspan').text()
    $.getJSON(urls[selected], function(json) {
        // set new data
    });
});

This way you'll get the url according to the selected button.

Demo


Related Articles