使用highstock动态更新数据

时间:2016-08-15 13:32:35

标签: javascript php html highcharts highstock

我有一个MySQL数据库,每5秒钟更新一次,带有时间戳和温度。

我试图用高库存代表实时数据。

到目前为止,这是我的代码:



<?php
$servername = "localhost";
$username = "root";
$password = "*******";
$database = "MicroCSP";
$port = 3306;

header("Content-type: text/html");

$con = new mysqli($servername,$username,$password,$database,$port);

if ($con->connect_error)
{
die("Connection failed: " . $conn->connect_error);
}

$sql="select TimeStamp as time,Pdc2 as temperature from SpotData";

if ($result = $con->query($sql)) {

// $row = mysqli_fetch_array($result, MYSQLI_NUM);

while($row = $result->fetch_array()){
$rows[] = $row;
}

foreach($rows as $row){

$datetime = ($row['time'])*1000;
$temp = $row['temperature'];

$data[] = "[$datetime, $temp]";
}
//$data[] = "[$datetime, $out]";
//echo(json_encode($data));

$result->close();
} 
else {
echo "Error: " . $sql . "<br>" . $con->error;
}

$con->close();

?>

<!DOCTYPE html>
<html>
<head>
	<title>
			Temps Reel
	</title>
	<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
	<script src="https://code.highcharts.com/stock/highstock.js"></script>
	<script src="//code.highcharts.com/stock/modules/exporting.js"></script>
	<script>

		$(function () {

		    Highcharts.setOptions({
		        global : {
		            useUTC : false
		        }
		    });

		    // Create the chart
		    $('#container').highcharts('StockChart', {
		        chart : {
		            events : {
		                load : function () {

		                    // set up the updating of the chart each 5 seconds
		                    var series = this.series[0];
		                    setInterval(function () {
		                        var x = <?php echo $datetime; ?>, //<?php echo $datetime; ?>  // current time 
                         		    y = <?php echo $temp; ?>//Math.round(Math.random() * 100);
		                        series.addPoint([x, y], true, true);
		                    }, 5000);
		                }
		            }
		        },
		        
		        rangeSelector: {
		            buttons: [{
		                count: 1,
		                type: 'minute',
		                text: '1M'
		            }, {
		                count: 5,
		                type: 'minute',
		                text: '5M'
		            }, {
		                type: 'all',
		                text: 'All'
		            }],
		            inputEnabled: false,
		            selected: 0
		        },

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

		        exporting: {
		            enabled: false
		        },

		        series : [{
		            name : 'Data',
		            data : [<?php echo join($data, ',') ?>],
		        }]
		    });

		});

	</script>
</head>
<body>
	<div id="container" style="height: 400px; min-width: 310px"></div>

</body>
</html>
&#13;
&#13;
&#13;

当我使用内置日期函数和随机值时,它工作得很好但是当我尝试回显数据库中的数据时,它不起作用。

任何帮助?

0 个答案:

没有答案