Highcharts实时数据,json ajax

时间:2016-07-29 12:47:13

标签: php mysql json ajax highcharts

我的脑袋会吹。

当页面打开时,

livedata.php加载json。 live.php将点添加到图表中。

从livesata.php我得到这样的输出:

[["Date.UTC(2016, 07-1, 28, 15, 08)",37],["Date.UTC(2016, 07-1, 28, 15, 08)",37],["Date.UTC(2016, 07-1, 28, 15, 08)",37],["Date.UTC(2016, 07-1, 28, 15, 08)",37],["Date.UTC(2016, 07-1, 28, 15, 08)",37],["Date.UTC(2016, 07-1, 28, 15, 08)",37]]

live.php输出 - 只有最后一行,看起来像

["Date.UTC('.2016, 07-1, 29, 15, 40.')", 44]

我有图表,实时addPoint工作,但x轴没有日期。我做错了什么?

JS

var chart;

function requestData() {
    $.ajax({
        url: 'live.php',
        success: function(point) {
            var series = chart.series[0],
                shift = series.data.length > 120; // shift if the series is 

                chart.series[0].addPoint(eval(point));

                setTimeout(requestData, 10000);    
        },
        cache: false
    });
}
$(function () {
        $.ajax({
        url: 'livedata.php',
        success: function(point) {
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container',
                    type: 'areaspline',

                    events: {
                load: requestData
            }
                },
                title: {
                    text: 'Revenue vs. Overhead',

                },
                subtitle: {
                    text: '',

                },
                xAxis: {
                    type: 'datetime'


                },
                yAxis: {
                    title: {
                        text: 'Amount'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },


                series: [{

            name: 'Random data',
            data:  eval(point )
        }]
            });
        },    

    });


}); 

live.php

global $dbConnection;
    $stmt = $dbConnection->query('SELECT DATE_FORMAT(data,"%Y-%m-%d %H:%i") as dataa, humidity FROM sensorsdata order by id desc limit 1');    
    $row = $stmt->fetch(PDO::FETCH_ASSOC);
    $date_raw = strftime('%Y, %m-1, %d, %H, %M', strtotime($row[dataa]));
        $date_complete = "Date.UTC('.$date_raw.')";
    $ar = array($date_complete, $row[humidity]);
    echo json_encode($ar, JSON_NUMERIC_CHECK); 

livedata.php

global $dbConnection;
$stmt = $dbConnection->query('SELECT DATE_FORMAT(data,"%Y-%m-%d %H:%i") as dataa, humidity FROM sensorsdata');    

$result = $stmt->fetchAll();

foreach ($result as $row) {
    $date_raw = strftime('%Y, %m-1, %d, %H, %M', strtotime($row[dataa]));
    $date_complete = 'Date.UTC('.$date_raw.')';
    $hum_for_chart[] = [$date_complete, $row[humidity]];

}

echo json_encode($hum_for_chart, JSON_NUMERIC_CHECK);

图表: Chart

2 个答案:

答案 0 :(得分:0)

我认为你的数据问题试图使字符串像

live.php

....
$date_complete = "Date.UTC('.$date_raw.')";
$ar = "[".$date_complete.",". $row[humidity]."]";
echo json_encode($ar); 

livedata.php

....
foreach ($result as $row) {
    $date_raw = strftime('%Y, %m-1, %d, %H, %M', strtotime($row[dataa]));
    $date_complete = 'Date.UTC('.$date_raw.')';
    $hum_for_chart[] = "[".$date_complete.",". $row[humidity]."]";
}
....

您可以参考highcharts-data-series-issue-with-ajax-json-and-php

答案 1 :(得分:0)

我知道了! 2天的精神崩溃))))

感谢Rohan Kumar获取链接。 我从date.utc更改为unix时间戳。

$datetimeUTC = ((strtotime($row[dataa])+ 10800) * 1000);
$data[] = [$datetimeUTC, $row[humidity]];
echo json_encode($data);
  • 10800 - 即+3小时(莫斯科时区)

输出

[[1469718529000,37],[1469718529000,37],[1469718530000,37],[1469718531000,37]]

就是这样,日期轴开始工作了!