CPU負載即時更新圖
所需要的檔案
所有的檔案都需加到<head>裡, 因為我們有用到時間格式, 所以加入了jquery.flot.time.js, 另外Flot本身並不支援軸標籤的設置, 所以需要透過加入jquery.flot.axislabels.js外掛程式來達成軸標籤的設置.以下程式碼就是此範例所會用到的全部檔案
<script type="text/javascript" src="/js/jquery-1.8.3.min.js"></script>
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="/js/flot/excanvas.min.js"></script><![endif]-->
<script type="text/javascript" src="/js/flot/jquery.flot.js"></script>
<script type="text/javascript" src="/js/flot/jquery.flot.time.js"></script>
<script type="text/javascript" src="/js/flot/jquery.flot.axislabels.js"></script>
加入定位點
準備好所需要的檔案後, 接下來就是決定Flot要繪圖的位置, 你可以自行決定Flot要在那裡出現, 只要在<body>加上下面的<div>標籤, 並給一個id, 然後設置定位點的長度和寬度後面要繪製時會用到此id.
<div id="flot-placeholder" style="width:600px;height:300px"></div>
.legendLabel
{
color:White;
}
建立資料
因為我們範例所用到的資料點多達100個, 為了方便我們就不直接建立資料所需要用到的陣列, 而是建立一個自定函式來產生所要用的資料. 我們先建立一個叫做totalPoints的變數, 它代表了我們所要繪製的資料點數量, 再來就是updateInterval, 這代表資料更新的時間間隔, 我們設定為1000毫秒表示每秒鐘會更新一次. 另外我們還建立了一個叫now的變數, 用來取得現在時間的毫秒數. 接著就是跑迴圈用亂數建立出我們所要的資料點.
var data = [];
var totalPoints = 100;
var updateInterval = 1000;
var now = new Date().getTime();
function GetData() {
data.shift(); //移除陣列中的第一個項目
while (data.length < totalPoints) {
var y = Math.random() * 100;
var temp = [now += updateInterval, y]; //data format [x, y]
data.push(temp);
}
}
[
[1366080403385, 27.774008526466787], [1366080404385, 16.122459364123642],
[1366080405385, 36.352222855202854], [1366080406385, 79.74009534809738],
[1366080407385, 15.236222557723522], [1366080408385, 92.99933034926653], ...
]
即時更新圖選項
因為我們畫的是線圖,所以設定series.lines.show為true,我們也設定了series.lines.fill為true,讓線圖可以填滿區域.另外我們設定了series.lines.lineWidth,這個屬性可以控制線的寬度.
series: {
lines: {
show: true,
lineWidth: 1.2,
fill: true
}
}
xaxis: {
mode: "time",
tickSize: [2, "second"],
tickFormatter: function (v, axis) {
var date = new Date(v);
if (date.getSeconds() % 20 == 0) {
var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
return hours + ":" + minutes + ":" + seconds;
} else {
return "";
}
},
axisLabel: "Time",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 10
}
yaxis: {
min: 0,
max: 100,
tickFormatter: function (v, axis) {
if (v % 10 == 0) {
return v + "%";
} else {
return "";
}
},
axisLabel: "CPU loading",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 6
}
legend: {
labelBoxBorderColor: "#fff"
}
grid: {
backgroundColor: "#000000",
tickColor: "#008040"
}
設定即時更新
把資料及選項都完成後,最後面就是要讓圖表能定時來更新,一開始我們先呼叫一次GetData(),先把初始資料建立起來,之後就再呼叫$.plot,並把data及options變數帶入.我們再建立一個自定函式叫update(),在此函式裡再做一次GetData()及呼叫$.plot,然後利用setTimeout讓圖表能夠不斷的重新更新.如此一來即時更新圖表就完成了.
$(document).ready(function () {
GetData();
dataset = [
{ label: "CPU", data: data, color: "#00FF00" }
];
$.plot($("#flot-placeholder1"), dataset, options);
function update() {
GetData();
$.plot($("#flot-placeholder1"), dataset, options)
setTimeout(update, updateInterval);
}
update();
});