如何在HighCharts实时数据图表中插入多个值

时间:2016-01-16 16:03:00

标签: javascript php mysql charts highcharts

我是网络编程的新手,我正试图在highcharts实时图表中插入多个点。我有一个MySQL表,其中每个11秒插入11个值,这个值是过去11秒。你能明白吗?所以,我想在图表中每11秒插入11个点。我在互联网上搜索,我尝试了很多方法,但没有找到解决方案。这是我的代码:

要插入图表中的数据

<?php
// Set the JSON header
header("Content-type: text/json");
date_default_timezone_set('America/Sao_Paulo');

error_reporting (E_ALL & ~ E_NOTICE & ~ E_DEPRECATED);
$con = mysql_connect("localhost", "root", "") or  die (mysql_error ());
mysql_select_db("dr14", $con) or die (mysql_error ());

$result = mysql_query("SELECT * FROM dados_test ORDER BY ID DESC LIMIT 11");
$data1 = array();
$data2 = array();
$i=0;
while ($row = mysql_fetch_array($result)) {
    $data1[$i] = $row [ "Timestamp"]; //timestamp of the points
    $data2[$i] = $row [ "vq_grid" ]; //points to be inserted in the chart
    $i++;
}

// The x value is the current JavaScript time, which is the Unix time multiplied by 1000.

$x = $data1[0]*1000;
$x1 = $data1[1]*1000;
$x2 = $data1[2]*1000;
$x3 = $data1[3]*1000;
$x4 = $data1[4]*1000;
$x5 = $data1[5]*1000;
$x6 = $data1[6]*1000;
$x7 = $data1[7]*1000;
$x8 = $data1[8]*1000;
$x9 = $data1[9]*1000;
$x10 = $data1[10]*1000;

//below are the points that i want to insert in the chart
echo "[ [$x10,$data2[10]], [$x9,$data2[9]], [$x8,$data2[8]], [$x7,$data2[7]], [$x6,$data2[6]], [$x5,$data2[5]], [$x4,$data2[4]], [$x3,$data2[3]], [$x2,$data2[2]], [$x1,$data2[1]], [$x,$data2[0]] ]";

?>

图表代码

    var chart; // global
    /**
     * Request data from the server, add it to the graph and set a timeout 
     * to request again
     */
    function requestData() {
    $.ajax({
        url: 'live-server-data.php',
        success: function(point) {
            var series = chart.series[0],
                shift = series.data.length > 20; // shift if the series is 
                                                 // longer than 20

            // add the point
            chart.series[0].addPoint(point, true, shift);

            // call it again after one second
            setTimeout(requestData, 1000);    
        },
        cache: false
    });
    }
    $(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            defaultSeriesType: 'spline',
            events: {
                load: requestData
            }
        },
        title: {
            text: 'Live random data'
        },
        xAxis: {
            type: 'datetime',
            tickPixelInterval: 150,
            maxZoom: 20 * 1000
        },
        yAxis: {
            minPadding: 0.2,
            maxPadding: 0.2,
             title: {
                text: 'Value',
                margin: 80
                }
        },
         series: [{
            name: 'Random data',
            data: []
        }]
   });        
});

有人能帮助我吗?

0 个答案:

没有答案