来自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的高数据实时数据

回答

相关问题