0

I am trying to create a CPU gauge chart with highcharts. I have php script that I would like to call every 5 seconds to get the output and display the data on the gaug:

the ajax function is as follows:

  function request_cpu_Data() {
    $.ajax({
        url: 'get_cpu.php', 
        success: function(point) {
            var myObj = JSON.parse(point); 

                                  //This is the data part
                                   var myDate=myObj[0]
                                  //This is the CPU value
            var myData=myObj[1];
            cpu_chart.addSeries({ data: myData });
            setTimeout(request_cpu_Data, 300000); 
        },
        cache: false
    });
}

output of get_cpu.php script looks like this:

[1371048443000,46]

This is the function to create the guage highchart:

$(document).ready(function() {
    cpu_chart = new Highcharts.Chart({
        chart: {
            type: 'gauge',
            plotBackgroundColor: null,
            plotBackgroundImage: null,
            plotBorderWidth: 0,
            renderTo: 'container',
            plotShadow: false,
            events: {
                load: request_cpu_Data
            }
        },

        title: {
            text: 'Profile DB'
        },
         credits: {
                        enabled: false
        },
        pane: {
            startAngle: -150,
            endAngle: 150,
            background: [{
                backgroundColor: {
                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                    stops: [
                        [0, '#FFF'],
                        [1, '#333']
                    ]
                },
                borderWidth: 0,
                outerRadius: '109%'
            }, {
                backgroundColor: {
                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                    stops: [
                        [0, '#333'],
                        [1, '#FFF']
                    ]
                },
                borderWidth: 1,
                outerRadius: '107%'
            }, {
                // default background
            }, {
                backgroundColor: '#DDD',
                borderWidth: 0,
                outerRadius: '105%',
                innerRadius: '103%'
            }]
        },

        // the value axis
        yAxis: {
            min: 0,
            max: 100,

            minorTickInterval: 'auto',
            minorTickWidth: 1,
            minorTickLength: 10,
            minorTickPosition: 'inside',
            minorTickColor: '#666',

            tickPixelInterval: 30,
            tickWidth: 2,
            tickPosition: 'inside',
            tickLength: 10,
            tickColor: '#666',
            labels: {
                step: 2,
                rotation: 'auto'
            },
            title: {
                text: 'CPU'
            },
            plotBands: [{
                from: 0,
                to: 65,
                color: '#55BF3B' // green
            }, {
                from: 65,
                to: 75,
                color: '#DDDF0D' // yellow
            }, {
                from: 75,
                to: 100,
                color: '#DF5353' // red
            }]        
        },
        series: [{
            name: 'CPU',
            data: [],
            tooltip: {
                valueSuffix: '%'
            }
        }]
    });
});

When I do this gauge chart is not showing any data. Can somebody tell me what I might be missing here? I like to show the myDate in the the gauage as well.

4

2 に答える 2

1

私は問題を理解しました。私の改訂された機能があります：

function request_cpu_Data() {
    $.ajax({
        url: 'get_cpu.php', 
        success: function(data) {
        var myObj = JSON.parse(data); 
        var point = cpu_chart.series[0].points[0];
        var newVal=myObj[1];
        //alert(newVal);
        point.update(newVal);
        setTimeout(request_cpu_Data, 10000000); 
        },
        cache: false
    });
}

また、データを 0 に初期化します。

series: [{
            name: 'CPU',
            data: [0],

}、

于 2013-06-12T19:23:32.790 に答える
0

このようなものが動作するはずです:

Chart.addSeries({ data: fromGetCpu[1] });

必要に応じて name パラメータもあります。

Chart.addSeries({ name: 'yourName', data: fromGetCpu[1] });
于 2013-06-12T15:34:54.750 に答える