使用jQuery(Plot)制作即时图表

以前如果要在网站上显示即时的图表,通常需要使用Flash或是Silverlight,不然可能就是要用SVG.


以前如果要在网站上显示即时的图表,通常需要使用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