來自MySQL的高數據實時數據

我發現這個Highchart實時數據示例Live data。我嘗試使用自己的數據來自MySQL，因此我更改$y的live-server-data.php以接收使用函數fetch_assoc()後的數據。來自MySQL的高數據實時數據

HTML代碼

<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
     <title>Highcharts Example</title> 

     <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.js"></script> 
     <script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script> 

    </head> 
    <body> 
     <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div> 
    </body> 
</html>

var chart; // global 
 
    \t \t 
 
    \t \t function requestData() { 
 
    \t \t \t $.ajax({ 
 
    \t \t \t \t url: 'live-server-data.php', 
 
    \t \t \t \t success: function(point) { 
 
    \t \t \t \t \t var series = chart.series[0], 
 
    \t \t \t \t \t \t shift = series.data.length > 20; // shift if the series is longer than 20 
 
    \t \t 
 
    \t \t \t \t \t chart.series[0].addPoint(eval(point), true, shift); 
 
    \t \t \t \t \t 
 
    \t \t \t \t \t // call it again after one second 
 
    \t \t \t \t \t setTimeout(requestData, 1000); \t 
 
    \t \t \t \t }, 
 
    \t \t \t \t cache: false 
 
    \t \t \t }); 
 
    \t \t } 
 
    \t \t \t 
 
    \t \t $(document).ready(function() { 
 
    \t \t \t chart = new Highcharts.Chart({ 
 
    \t \t \t \t chart: { 
 
    \t \t \t \t \t renderTo: 'container', 
 
    \t \t \t \t \t defaultSeriesType: 'spline', 
 
    \t \t \t \t \t events: { 
 
    \t \t \t \t \t \t load: requestData 
 
    \t \t \t \t \t } 
 
    \t \t \t \t }, 
 
    \t \t \t \t title: { 
 
    \t \t \t \t \t text: 'Live random data' 
 
    \t \t \t \t }, 
 
    \t \t \t \t xAxis: { 
 
    \t \t \t \t \t type: 'datetime', 
 
    \t \t \t \t \t tickPixelInterval: 150, 
 
    \t \t \t \t \t maxZoom: 20 * 1000 
 
    \t \t \t \t }, 
 
    \t \t \t \t yAxis: { 
 
    \t \t \t \t \t minPadding: 0.2, 
 
    \t \t \t \t \t maxPadding: 0.2, 
 
    \t \t \t \t \t title: { 
 
    \t \t \t \t \t \t text: 'Value', 
 
    \t \t \t \t \t \t margin: 80 
 
    \t \t \t \t \t } 
 
    \t \t \t \t }, 
 
    \t \t \t \t series: [{ 
 
    \t \t \t \t \t name: 'Random data', 
 
    \t \t \t \t \t data: [] 
 
    \t \t \t \t }] 
 
    \t \t \t }); \t \t 
 
    \t \t });

PHP代碼

<?php 

$conn = new mysqli($servername, $username, $password, $dbname); 
if($conn->connect_error){ 
    die("Connection failed: ".$conn->connect_error); 
} 

$sql_1 = "SELECT SensorData AS power FROM $tbname where SensorID = '1'"; 

$result_1=$conn->query($sql_1); 
while($row = $result_1->fetch_assoc()){ 
    $y = $row['power']; 
} 

$conn->close(); 

header("Content-type: text/json"); 
multiplied by 1000. 
$x = time() * 1000; 
$ret = array($x, $y); 
echo json_encode($ret); 
?>

圖表上移動，但它不顯示任何數據。

所以我按在Chrome瀏覽器的F12，我發現這件事。

我認爲"14.600"可能是我的問題的原因。請告訴我，如果你知道解決方案來解決這個問題。非常感謝。

來源

2017-04-23 Nothingnez

這是大量的代碼來讀取很少的上下文。你可以編輯刪除任何不直接導致錯誤的代碼嗎？此外，您可能想嘗試對正在使用的json進行硬編碼，以便我們看到數據發生了什麼。我們不知道你的mysql數據庫裏有什麼！ –

代碼被編輯，感謝您的建議。 – Nothingnez

我認爲該圖需要一個包含數字值的array。在你的情況下，一個值是數字，但另一個是字符串，所以將所有值轉換爲數字，即整數或浮點數。（這裏首選Float）並將該數組傳遞給圖形。

來源

2017-04-23 14:29:04

謝謝你的建議。我的圖現在可以工作了，只需通過'floatval（）'將這兩個數據轉換爲浮點數，然後將其從字符串更改爲數字。 – Nothingnez

乾杯！享受編碼 –

我有一些問題，是否可以在一個頁面中使用多個'$ .ajax'？我嘗試添加更多圖形，但第二個圖形，第三個圖形沒有響應我的頁面。我已經對'$ .ajax'的URL進行了修改，但是它不適用於第二張和第三張圖。 – Nothingnez

來自MySQL的高數據實時數據

回答

相關問題