用PHP數據制作動態高庫存

Question

我像這個例子一樣制作了一個動態的highstock（highchart），但是使用了來自PHP的數據。 我已經嘗試了我的代碼，但是結果沒有出現。 如何用PHP制作動態高庫存？

PHP代碼：

<?php 

include("connection.php");

$data = array();
$count = 0;
$result = mysqli_query($koneksi,"SELECT * FROM data ORDER BY time ASC ") or die ("Connection error");
while($row = mysqli_fetch_array($result)) {
$x = strtotime($row['time']) * 1000; 
$y =    (float)$row['temperature'];
$data[] = array($x, $y);
$count++;
}
echo json_encode($data);
mysqli_close($koneksi);
?>

來自PHP的JSON：

[[1535981121000,40],[1535981432000,32.9],[1535981492000,32.7],[1535981552000,32.6],[1535981618000,32.6],[1535981672000,32.6],[1535981732000,32.6],[1535981793000,32.6],[1535981854000,32.6],[1535981913000,32.5],[1535981993000,32.4],[1535982034000,32.4],[1535982215000,32.4],[1535982287000,32.3],[1535982335000,32.3],[1535982396000,32.5],[1536576266000,45.2],[1536579542000,62.2],[1536653234000,30.2]]

JavaScript代碼：

<script type="text/javascript">
    var chart;  
function requestData() {
    $.ajax({
        url: 'chartTemp.php',
        success: function(point) {
            var series = chart.series[0],
                shift = series.data.length > 20; 

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

            // call it again after one second
            setTimeout(requestData, 1000);    
        },
        cache: false
    });
}   
document.addEventListener('DOMContentLoaded', function() {  
    chart = Highcharts.stockChart('container', {
    chart: {
        events: {
            load: requestData
        }
    },

    time: {
        useUTC: false
    },

    rangeSelector: {
        buttons: [{
            count: 1,
            type: 'minute',
            text: '1M'
        }, {
            count: 5,
            type: 'minute',
            text: '5M'
        }, {
            type: 'all',
            text: 'All'
        }],
        inputEnabled: true,
        selected: 0
    },

    title: {
        text: 'Live random data'
    },

    exporting: {
        enabled: true
    },

    series: [{
        name: 'Random data',
        data: data[]
    }]
});

    </script>

我從此示例更改了上面的javascript代碼

Answer 1

你也想念

// Set the JSON header (in .php)
header("Content-type: text/json");

或喜歡

$.ajax({
method: "GET",
  url: "test.js",
  dataType: "json"
});

另外，您還有一些語法錯誤，請在下面的javascript代碼末尾添加（以確認在瀏覽器的控制台窗口中進行檢查），

)};

您的ajax調用會在單個json中返回所有點，但是您正在調用的函數似乎無法接受，因此請再次檢查，

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