15

How do you create custom buttons with high diagrams that each data button calls...

 3 years ago
source link: https://www.codesd.com/item/how-do-you-create-custom-buttons-with-high-diagrams-that-each-data-button-calls-another-php-script-for-its-data.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

How do you create custom buttons with high diagrams that each data button calls another php script for its data

advertisements

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

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK