最近单位做了一个简单的数据采集程序,用PLC采集数据并用KepServer采集到数据库中,大概每10秒钟采集一次,我用PHP做了一个页面提供查询,能够将指定时间段的数据查询出来,并转存到Excel中查看分析。我觉得有些麻烦,就想用Highcharts直接动态的显示到页面中,每10秒钟自动更新一次。经过几天的努力,终于实现了基本的功能,现在总结一下,以便以后参考。
首先我用的环境是MS SQL + PHP + Highcharts(一个javascript图形库,如果不知道,网上自行查。)中间用Json传递数据。数据库中只有一个表(rz),有两列分别是时间和数值(rzTime,rzValue)。
后台PHP程序一个文件用来输出Json文件:
<?php
/* 用 PDO_SQLSRV 链接 SQL server . */
$serverName = "YourServerName";
$database = "DatabaseName";
//从文件中读取用户名和密码.
$uid = file_get_contents("..\uid.txt");
$pwd = file_get_contents("..\pwd.txt");
try{
$conn = new PDO( "sqlsrv:server=$serverName;Database = $database",$uid,$pwd);
$conn->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );
}
catch(PDOException $e){
die("Error connection to SQL Server");
}
//每次只需要读出一个最新的数据
$query = "select top 1 rzTime,rzValue from rz order by rzTime DESC";
$stmt = $conn->query($query);
$row = $stmt->fetch();
$rzTime = strtotime($row['rzTime']);
$rzH = strftime('%H',$rzTime);
$rzM = strftime('%M',$rzTime);
$rzS = strftime('%S',$rzTime);
$rzmonth = strftime('%m',$rzTime);
$rzD = strftime('%d',$rzTime);
$rzY = strftime('%Y',$rzTime);
//将时间转换为时间戳
$jsonArray = array(mktime($rzH,$rzM,$rzS,$rzmonth,$rzD,$rzY)*10000,round($row['rzValue'],3));
$stmt->closeCursor();
$stmt = null;
$conn = null;
//文件输出为设置为 JSON
header('Content-type: text/json');
echo json_encode($jsonArray);
?>
单独访问这个文件,会返回一个jsong数据:
[1.4806018e+12,1743.056]
前台程序,首先需要引入jQuery和Highcharts库文件:
<script type="text/javascript" src="../Charts/js/jquery-1.7.2.min.js"></script>
<script src="../Charts/js/highcharts.js"></script>
<script src="../Charts/js/modules/exporting.js"></script>
用jQuery调用数据文件,每10秒调用一次。
function requestData(){
$.ajax({
url: 'chartData.php',
success: function(point){
var series = chart.series[0],
shift = series.data.length > 20; // 图中显示20个数据点
chart.series[0].addPoint(eval(point),true,shift);
setTimeout(requestData,10000); //每10秒调用一次
},
cache: false
});
}
设置Highcharts属性:
$(document).ready(function(){
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'spline',
events: {
load: requestData
}
},
title:{
text: '实时数据',
x:-20
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: '数值',
margin: 80
}
},
tooltip: {
formatter: function(){
return Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '数值是:' + this.y;
}
},
//本来下面是版权信息,我将它改成下载浏览器了,因为这个在XP下IE7,8无法运行
credits:{
enabled:true,
text:'XP系统请点击这里下载浏览器',
href:'../../谷歌浏览器 XP版.exe',
style:{
color:'#FF0000',
fontSize:'14px'
}
},
series: [{
name: 'XXX值',
data: []
}]
});
});
在服务器中运行就会出现和数据库同步更新的线性图了。祝好运!