画IDC状态趋势图--后续-阿里云开发者社区

开发者社区> 科技小先锋> 正文

画IDC状态趋势图--后续

简介:
+关注继续查看
[背景]最近,发现如果分析一个log文件还是挺方便的,可如果log文件很多,那不是要做多个首页文件对应每一个log吗?哎,麻烦。今天,我就为解决这个问题,而又再次向我前段时间写的代码就进了扩充,功能是解决在一个页面下显示多个log文件,当然是通过选项进行切换文件的,而这些文件我是通过php指定到目录下面遍历出来的。功能还是很不错的。先来张图,给大家看看。





看到没,根据选择不同的log文件,下面的IP,包大小都会自动的调整的。这个功能的实现,还需要结合javascript功能的实现,当然还有个事件,那就是onchange
好了,说到这里,我还是扔代码给大家吧!
[Code]
index.php
<html>
<head>
<title>IDC状态图</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<mce:style type="text/css"><!--
.style1 {
        font-size: 16px;
        font-weight: bold;
}
--></mce:style><style type="text/css" mce_bogus="1">.style1 {
        font-size: 16px;
        font-weight: bold;
}</style>

<SCRIPT LANGUAGE="JavaScript">
<!--
function myfunction() 

     location.href="http://log.tiancity.net:8090/graph/test.php?file_path="+document.form1.select1.value;

//-->
</SCRIPT>

</head>

<body>
<?php
$i=0;
global $file_path;
$arr_files=array();
$path="/home/wiki/www/dev_tools/graph/log/";

$file_path=$_GET['file_path'];
if(!isset($file_path)){
  $file_path ="log/test.log";
}
else
{
$file_path="log/".$file_path;
}

if ($handle = opendir($path)) {
    while (false !== ($file = readdir($handle))) {
        if ($file != "." && $file != "..") {
                array_push($arr_files,$file);
        }
    }
    closedir($handle);
}

$fp = fopen ($file_path, "r");
while(!feof($fp)){
    $bruce=fgets($fp);
    $pieces = explode(",", $bruce);
    if(!is_null($pieces[1])){
       $ip_result[$i] = $pieces[1];
    } 
    if(!is_null($pieces[3])){
       $size_result[$i]=$pieces[3];
    }
    $i++;
}
fclose($fp);
$tmp_size_result=array_keys(array_flip($size_result));
$tmp_ip_result=array_keys(array_flip($ip_result));
?>
<form name="form1" method="get" action="result.php">
  <p align="center" class="style1"> IDC状态生成图</p>
  <table width="300" border="1" align="center" cellpadding="3" cellspacing="3">
<tr><td><strong>文件名:</strong></td><td>
<select name="select1" onChange="myfunction()"> 
<option>Null</option>
<?php foreach($arr_files as $file_name){ ?>
<option value="<?php echo $file_name ?>"><?php echo $file_name?></option>
<?php } ?>
</select>
</td></tr>

    <tr>
      <td width="85"><strong>IP:</strong></td>
<td width="188"><select name="ip" id="ip">
<?php 
while (list(,$value)= each($tmp_ip_result)){
?>        
<option value=<?php echo $value ?>><?php echo $value ?></option>
<?php } ?>
      </select></td>
    </tr>
    <tr>
      <td><strong>包大小:</strong></td>
      <td>
<select name="size" id="size">
<?php while(list(,$value)=each($tmp_size_result)){ ?>
        <option value=<?php echo $value ?> ><?php echo $value ?></option>
<?php } ?>
      </select></td>
    </tr>
    <tr>
      <td><strong>图宽度:</strong></td>
      <td>
<INPUT TYPE="text" NAME="img_width" value="1000">
</td>
    </tr>
<INPUT TYPE="hidden" NAME="file_name" value="<?php echo $file_path; ?>">
  </table>
  <p align="center">
    <input type="submit" value="生 成">
    <input type="reset" name="Submit2" value="重 置">
  </p>
</form>
</body>
</html>

result.php

<?php
include ("sgraph/jpgraph.php");
include ("sgraph/jpgraph_line.php");

$src_ip = $_GET["ip"];
$pack_size = $_GET["size"];
$image_width = $_GET["img_width"];
$file_name =$_GET["file_name"];

$i=0;
$fp = fopen ("$file_name", "r");
while (!feof($fp))
{
    $bruce=fgets($fp);
    $pieces = explode(",", $bruce);
 if($src_ip == $pieces[1]){
    if($pieces[3]==$pack_size){
       $result_min[$i]=$pieces[4];
       $result_avg[$i]=$pieces[5];
       $result_max[$i]=$pieces[6];
       $result_loss[$i]=$pieces[7]+0;
       $tmp_time=explode(" ",$pieces[2]);
       $tmp1_time=explode(":",$tmp_time[1]);
       $result_time[$i]=$tmp1_time[0].":".$tmp1_time[1];
       $i++;
    }
  }
}
fclose($fp);

$graph = new Graph($image_width,300,auto);                                                                      //创建新的Graph对象
$graph->SetScale("textlin");
$graph->SetShadow();                                                                                    //设置图像的阴影样式

$graph->img->SetMargin(60,30,30,70);                                                            //设置图像边距
$graph->title->Set("IDC状态(Size=$pack_size)");                                                //设置图像标题
$graph->title->SetMargin(10);

$lineplot1=new LinePlot($result_avg);                                                                        //创建设置两条曲线对象
$lineplot2=new LinePlot($result_min);
$lineplot3=new LinePlot($result_max);
$lineplot4=new LinePlot($result_loss);

$graph->Add($lineplot1);                                                                                        //将曲线放置到图像上
$graph->Add($lineplot2);
$graph->Add($lineplot3);
$graph->Add($lineplot4);

$graph->xaxis->title->Set("时间段");                                                                      //设置坐标轴名称
$graph->yaxis->title->Set("Ping值(ms)");
$graph->xaxis->title->SetMargin(10);
$graph->yaxis->title->SetMargin(15); 

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


$graph->xaxis->SetTickLabels($result_time);

$lineplot1->SetColor("red");                                                                            //设置颜色
$lineplot2->SetColor("blue");
$lineplot3->SetColor("green");
$lineplot4->SetColor("black");

$lineplot1->SetLegend("Avg");                                                           //设置图例名称
$lineplot2->SetLegend("Min");
$lineplot3->SetLegend("Max");
$lineplot4->SetLegend("Loss");

$graph->legend->SetLayout(LEGEND_HOR);                                                  //设置图例样式和位置
$graph->legend->Pos(0.5,0.96,"center","bottom");

$graph->Stroke();                                                                                               //输出图像

?>



本文转自hahazhu0634 51CTO博客,原文链接:http://blog.51cto.com/5ydycm/193006,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
参考阿里规范,优秀的 Java 项目代码都是如何分层的?
说起应用分层,大部分人都会认为这个不是很简单嘛 就controller,service, mapper三层。看起来简单,很多人
9 0
【DBMS 数据库管理系统】数据仓库 数据组织 ( 数据组织级别 | 元数据 | 粒度 | 分割 | 数据组织形式 )(一)
【DBMS 数据库管理系统】数据仓库 数据组织 ( 数据组织级别 | 元数据 | 粒度 | 分割 | 数据组织形式 )(一)
4 0
【DBMS 数据库管理系统】OLTP 联机事务处理 与 OLAP 联机分析处理 ( 数据仓库 与 OLAP | OLAP 联机分析处理 | OLTP 与 OLAP 区别 )
【DBMS 数据库管理系统】OLTP 联机事务处理 与 OLAP 联机分析处理 ( 数据仓库 与 OLAP | OLAP 联机分析处理 | OLTP 与 OLAP 区别 )
4 0
MVC设计模式与JavaWEB三层架构
MVC设计模式与JavaWEB三层架构
6 0
EL(Express Lanuage)表达式 与 JSTL(JSP Standard Tag Library),JSP标准标签库
EL(Express Lanuage)表达式 与 JSTL(JSP Standard Tag Library),JSP标准标签库
5 0
超实用的 Nginx 极简教程,覆盖了常用场景
什么是 Nginx? Nginx (engine x) 是一款轻量级的 Web 服务器 、反向代理服务器及电子邮件(IMAP/POP3)代理服务器。
14 0
程序员需要知道的缩写和专业名词
应用程序接口(英语:Application Programming Interface,简称:API),又称为应用编程接口,就是软件系统不同组成部分衔接的
9 0
一个注解,搞定 SpringBoot 操作日志
SpringBoot入口打开开关,添加 @EnableLogRecord 注解 tenant是代表租户的标识,一般一个服务或者一个业务下的多个服务都写死一个 tenant 就可以
12 0
单点登录原理与简单实现
1、http无状态协议 web应用采用browser/server架构,http作为通信协议。http是无状态协议,浏览器的每一次请求,服务器会独立处理,不与之前或之后的请求产生关联,这个过程用下图说明,三次请求/响应对之间没有任何联系
13 0
一个注解,搞定 SpringBoot 操作日志
SpringBoot入口打开开关,添加 @EnableLogRecord 注解 tenant是代表租户的标识,一般一个服务或者一个业务下的多个服务都写死一个 tenant 就可以
5 0
6967
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载