这两天学会了简单使用highcharts 画图，离我完成监控系统不远了 （后端监控脚本使用python写的，早已完成） Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，，并且免费提供给个人学习、个人网站和非商业用途使用。目前HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表.
上个简单例子：
php文件：
<?php header(‘Content-type: text/json’); $connect=mysql_connect(‘localhost’,’ops’,’pass’); mysql_select_db(‘test’); //需要date_format一把，因为js Date.parse函数不支持2013-07-10 但是支持’2013/07/10′ 多坑爹！$result = mysql_query("select * from (select date_format(created_at,’%Y/%m/%d %H:%i:%S’),responce_time_avg from mysqlRtStat where instance_name=’hz-107_3306′ order by id desc limit 100) t order by 1");$rows=array();$n=0; while($row = mysql_fetch_array($result)) {$rows[$n]=array("created_at"=>$row[0],"responce_time_avg"=>$row[1]);$n++ ; } if(isSet($_GET[‘callback’]))echo $_GET[‘callback’].'(‘.json_encode($rows).’)’; elseecho json_encode($rows); mysql_close($connect); ?>js脚本：$(document).ready(function(){var chart;var mydata=[];$.ajax({url: ‘../php/mysqlrt.php’,dataType:"json",async:false,success:function(point){var obj=eval(point);for (var i=0; i<obj.length; i++){mydata.push([Date.parse(obj[i].created_at),parseFloat(obj[i].responce_time_avg)]);};},error: function(){alert(‘error!’)}, });chart = new Highcharts.Chart({chart: {renderTo: ‘container’},title: {text: ‘Mysql Responce Time’,x: -20 //center},xAxis: {//tickInterval: 60000,labels: {formatter: function() {return Highcharts.dateFormat(‘%H:%M:%S’, this.value);}}},yAxis: {title: {text: ‘mysql responce time (ms)’}},tooltip: {formatter: function() {return Highcharts.dateFormat(‘%Y-%m-%d %H:%M:%S’, this.x) + ‘: <b>’ + this.y +'</b>’;}},series: [{data : mydata}]});})
html文件：
<html><head><script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script><script type="text/javascript" src="../js/highcharts.js"></script><script type="text/javascript" src="../js/drawhc.js"></script></head><body><div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div></body></html>
曾经拥有的不要忘记，难以得到的更要珍惜，
