I am trying to create custom selectors with highcharts. Based on which buttons on the top right clicked, I need to call different php file that outputs different data sets. For example, the following script reads only one file and zooms in/out based on one file data. I have 6 different files, 1) 5 minute data for one day 2) hourly data for one month, 3) daily data for 3 months 4) weekly data for 6 months etc. Based on which buttons is clicked on the top left corner I need to issue soemthing like this:

I am trying to create my own buttons as this jsfiddle but in each button I need to call another external file to graph my chart: http://jsfiddle.net/YQnJM/4/

I have tried something like this:

    (function() {

    var genOptions = function(data) {
        return {
            chart : {
                renderTo : 'container'
            },
            rangeSelector : {
                enabled:false
            },
            series : data
        };
    }
$.getJSON('db.php', function(data) {
        var options = genOptions(data);
        var chart = new Highcharts.StockChart(options);
        normalState = new Object();
        normalState.stroke_width = null;
        normalState.stroke = null;
        normalState.fill = null;
        normalState.padding = null;
        normalState.style = hash('text-decoration', 'underline');

        hoverState = new Object();
        hoverState = normalState;

        pressedState = new Object();
        pressedState = normalState;
        chart_1DButton = chart.renderer.button('1D', 52, 10, function() {
        var date = Date.now();
        var date2 = new Date();
        date2.setHours(0);
        date2.setMinutes(0);
        date2.setSeconds(0);
        date2.setMilliseconds(0);
        chart.xAxis[0].setExtremes(date2, date, true);
                $.ajaxSetup({ cache: false });
                $.getJSON('db_cpu_1_day.php', function(data1) {
                options.series[0].setData(data1);

            });
        unselectButtons();
        chart_1DButton.setState(2);
        }, normalState, hoverState, pressedState);

        chart_1DButton.add();
function unselectButtons() {
            chart_1DButton.setState(0);
}
});
});

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);
}