2012年12月21日 星期五

使用jQuery(Plot)製作即時圖表 - Real-Time Chart

以前如果要在網站上顯示即時的圖表,通常需要使用Flash或是Silverlight,不然可能就是要用SVG.
由於jQuery的盛行,網路上其實已經有非常多使用jQuery就可以做出圖表的Plug-In,在這個範例中我選擇用Plot來製作即時的圖表.

基本的實作概念如下:
1. 資料部分是採取Tick的方式來記錄,也就是一秒會有一筆記錄.
2. 每按一次手動增加,就會抓取目前的時間來隨機增加一筆記錄
3. 資料的記錄是透過類似json的方式記錄在JavaScript陣列中
4. 圖表的更新則是利用setInterval的方式,每隔一秒重新進行擷取最近三十秒內的資料來進行顯示

範例下載: jQueryFlot.zip

效果如下:




延伸閱讀:
SharePoint 即時網站流量追蹤 (SignalR) - SharePoint real-time page tracking
SharePoint 即時網站流量追蹤 (SignalR) 2 - SharePoint real-time page tracking 2

沒有留言:

張貼留言