how do you create custom buttons with highcharts that each data buttons calls anather php script for its data

by

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

82 thoughts on “how do you create custom buttons with highcharts that each data buttons calls anather php script for its data”

Leave a Comment