实时监控系统中动态折线图的实现

张玉叶，宿 超

(1.济南职业学院计算机系，山东 济南 250014；2.山东广播电视大学，山东 济南 250014)

实时监控系统中动态折线图的实现

张玉叶1，宿 超2

(1.济南职业学院计算机系，山东 济南 250014；2.山东广播电视大学，山东 济南 250014)

以一个智能喷雾实时监控系统中粉尘浓度动态折线图的实现为例，讲解了如何利用Jpgraph在PHP中画图。给出了具体的实现过程和完整代码及程序调试技巧。

Jpgraph；PHP；WEB；图表

一、引言

在一些工业设备实时监控系统中经常需要监测设备的运行情况，为了显示直观清楚，通常需要用图形化的方式将其显示出来。在开发智能喷雾实时监控系统时需要实时监控井下的粉尘、温度、瓦斯等情况，为了让井上管理人员及时了解粉尘、温度、瓦斯等变化情况，监控界面中以图形化的方式将这些数据显示出来。本文以粉尘浓度动态折线图的实现为例，详细讲解了如何利用Jpgraph在PHP中做图的方法，并给出了具体的实现代码。

二、环境配置

本系统采用WAMP开发平台，即windows操作系统、apache服务器、MySql数据库和PHP编程语言。要在php中使用Jpgraph,须将Jpgraph的类包导入到程序中。相应的配置方法[1,2]：

1.将下载的Jpgraph压缩包解压到某一文件夹中，如c:jpgraph。

2.编辑php.ini文件。

(1)找到php.ini文件里的“;extension=php_gd2.dll”，将其前面的;(分号)去掉，使其支持GD库。

(2)修改include_path配置项，在该项后面增加Jpgraph类库的保存目录,例如：“,;c:jpgraph”。

三、图表的建立

在PHP中利用Jpgraph生成图表，通常需要三个步骤：

1.建立数据集。

2.利用Jpgraph提供的相应类作图。

3.获取图片，在相应的PHP页面中显示。

四、粉尘浓度动态折线图的实现

具体的实时监控系统通常由下位机采集数据，然后传递给上位机显示。需要保存的历史数据通常放在上位机的数据库中。本文主要讲解上位机中如何将下位机采集并放到数据库中的数据以图形化方式显示出来，至于下位机如何采集数据并送往数据库不在本文的讨论范围内。设下位机已经将采集到的数据送往数据库中相应的表中存放。在测试时可通过往表中人工插入数据来模拟下位机不停地将采集到的数据送往表中。下面以粉尘浓度动态折线图的实现为例说明如何利用Jpgraph在PHP中做图。设在某一时刻粉尘浓度表中的数据如表1所示。

表1 粉尘浓度表

1.具体实现过程

(1)连接数据库

粉尘浓度动态折线图中的数据来自于数据库中的粉尘浓度表，首先要建立与数据库的连接，因监控系统中需要用到数据库中的多个不同的表，为了便于代码的重用，可将与数据库的连接写成一个单独的文件中(在此放在conn.php文件中)，用到时将其直接引入进来即可。

与数据库连接的代码如下：

@mysql_connect("localhost","root","123456") or die("mysql 连接失败");

@mysql_select_db("meikuang") or die("数据库连接失败");

mysql_set_charset("gb2312");

?>

(2)创建数据集并做图

创建一个createimg.php文件，用于从数据库的粉尘浓度表中查询所有的数据并将其用折线图显示出来。

require_once 'src/jpgraph.php';//导入Jpgraph类库

require_once 'src/jpgraph_line.php';//导入Jpgraph类库的柱状图功能

include('conn.php');//导入数据库连接文件

$strsql="select nongdu from dust ";//查询粉尘浓度表中的浓度值

$result=mysql_query($strsql);//执行查询

$data=array();

while($rs=mysql_fetch_array($result)){

array_push($data,$rs['nongdu']);

}//创建数据库集，将从表中查询到的浓度值添加到数据集中

$graph=new Graph(800,400);//设置画布大小

$graph->SetScale('textlin');//设置刻度样式

$graph->SetShadow();//设置背景带阴影

$graph->img->SetMargin(40,30,40,40);//设置图表边距

$lineplot=new LinePlot ($data);//建立LinePlot对象

$graph->add($lineplot);// 添加LinePlot对象

$graph->title->Set("实时粉尘浓度曲线图");//设置标题

$graph->xaxis->title->Set("时间");//设置X轴坐标名称

$graph->yaxis->title->Set("浓度(mg/m3)");//设置Y轴坐标名称

$graph->title->SetFont(FF_SIMSUN,FS_BOLD); //设置标题字体

$graph->xaxis->title->SetFont(FF_SIMSUN,FS_BOLD); //设置X轴字体

$graph->yaxis->title->SetFont(FF_SIMSUN,FS_BOLD); //设置Y轴字体

$lineplot->SetColor("red");//设置线条颜色

$graph->Stroke();//生成图像

?>

(3)获取图片并显示

创建一个index.php页面，用于显示粉尘浓度折线图。在index.php页面中用一个img图像来显示生成的折线图，对应的代码为：。

(4)粉尘浓度折线图的动态更新

通过前面3步已经能够生成粉尘浓度折线图，但还无法实现动态更新，也即当下位机采集到新的数据后并不能自动反映到折线图中，必须通过点击“刷新”按钮才能实现折线图的更新，给用户的使用带来极大的不便，对此加以改进，让其能自动更新。自动更新的原理实际上就是对折线图中的数据进行动态更新和加载，为了演示清楚和便于对照起见，在index.php页面中再添加一动态显示当前粉尘浓度值的div,相对应的代码：。

建立一个update.js文件(在index.php页面中将此文件包含进来)，里面包含两个函数，一个progress()函数和一个control()函数，用于实现折线图的动态更新及当前粉尘浓度值的即时显示。代码如下(本代码采用了jQuery框架[3])：

function control(){

var t=new Date();

progress(t);

$.get("resp.php?flag="+t,function(data){

$("#nongdu").html("当前粉尘浓度"+data);//利用jQuery框架的AJAX技术获取当前粉尘浓度值

});

setTimeout('control()',2000);//此处的间隔时间可根据下位机采集数据的频率设置，在此为演示将其设为2000

}

function progress(flag){

$("#img").attr("src","createimg.php?flag="+flag);//为图像设置src属性

}

最后在index.php页面中再添加调用control()函数的语句，使得折线图能够动态更新，相应的代码。

2.测试

启动Apache服务器，打开浏览器浏览index.php文件，此时运行结果如图1所示。为测试折线图能否自动更新，再启动phpMyadmin，手工往粉尘浓度表里面添加一个粉尘浓度值(如34)，切换到粉尘浓度曲线图页面中，发现折线图及粉尘浓度值已经自动发生了改变，运行结果如图2所示。通过测试结果可以看出，在没有点击“刷新”按钮的情况下系统自动实现了粉尘浓度折线图的实时更新，也就达到了实时监控系统的要求。

图1 运行结果1

图2 运行结果2

五、结束语

在一些工业设备的实时监控系统中为了显示的直观、清晰，经常需要使用各种图表。本文介绍的粉尘浓度动态折线图的实现方法简单方便，根据此思路，用户可利用Jpgraph提供的强大的图表功能在PHP中制作各种不同的动态图表。

[1]宗小忠.基于LAMP的网站流量分析系统图表功能的设计与实现[J].沙州职业工学院学报，2010,(02).

[2]马春兴等.轻松学PHP编程[M].北京：化学工业出版社,2012.

[3]曾顺.精通JavaScript+jQuery[M].北京：人民邮电出版社,2008.

2014-10-09

本研究成果得到山东省高等学校青年骨干教师国内访问学者项目经费资助(鲁教人字[2013]8号)。

张玉叶(1973-)，女，济南职业学院讲师，硕士，研究方向：程序设计、算法、嵌入式系统。 宿超，男，山东广播电视大学高级工程师。

TP311.1

A

1008—3340(2015)02—0056—03