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

2012年12月20日 星期四

SharePoint 即時網站流量追蹤 (SignalR) 2 - SharePoint real-time page tracking 2

延續上一篇: SharePoint 即時網站流量追蹤 (SignalR) - SharePoint real-time page tracking



這次主要加入了伺服器的CPU的使用率,這樣可以有個對比可以參考.

擷取CPU使用率的方法主要是透過在伺服器安裝一個Windows服務,每隔一秒進行擷取,然後透過SignalR直接將資料傳送到Client的IE進行資料的計算,並顯示出即時的圖表!

2012年12月14日 星期五

GridViewScroll with jQuery 更新 20121214-2

更新(20121214-2):

一般使用前端jQuery進行標題列固定時,時常會遇到如果GridView中有INPUT相關表單的元素時,ASP.NET的Postback會有不一致的問題,針對這個部份我們已經有進行修正,可以參考以下的範例.

新增兩個將表單元素放置於GridView的範例.




相關範例請參考: 案 例 展 示

GridViewScroll with jQuery 更新 20121214

更新(20121214):

v0.3.1 修正GridView中包含Input元素問題

相關範例請參考: 案 例 展 示



2012年12月11日 星期二

GridViewScroll with jQuery 更新 20121211

更新(20121211):

v0.2.4 新增設定值與問題修正
v0.2.5 標題列數支援:標題列列數不再受限,可支援更多的數量.

相關範例請參考: 案 例 展 示



2012年12月7日 星期五

SharePoint 即時網站流量追蹤 (SignalR) - SharePoint real-time page tracking

更新: 加入展示影片

在網站上,總是希望可以知道現在網站上的使用者在看哪一些頁面,通常我們會在每一個頁面執行時,透過ASP.NET來進行一些記錄的動作,然後當需要觀看這些記錄時,就可以從資料庫中去做一些統計的動作.

上述的方法,如果需要即時(Real-Time)的顯示記錄,必須花費較多的系統資源來進行處理,而且必須不斷的重新整理頁面,來取得最新的統計資料.

ASP.NET未來將有一個SignalR的新技術(目前還在Preview),就是要來實現(Client <-> Server)之間的Real-Time行為.在這篇文章中就是使用這個技術來達到即時統計的效果.

在SharePoint上,佈署了一個客制的功能SignalRTracking,只要在你希望看到即時資料的網站上啟用這個功能,該網站的瀏覽資料就會包含在統計中.



展示影片

2012年12月5日 星期三

GridViewScroll with jQuery 實作技巧2

延續上一篇 GridViewScroll with jQuery 實作技巧

了解如何取得正確的寬度方法後,接下來就是如何在適當的時機取得寬度並進行設定

在GridViewScroll的做法,我是採取先將GridView所產生出來的HTML使用jQuery加以加工,大略會像以下的HTML:

<div id="GridView1wrapper">
    <div id="panelHeaderGridView1">
        <table id="GridView1Copy">
            <tr>
                <td>欄位一<td>
                <td>欄位二<td>
            </tr>
        </table>
    </div>
    <div id="panelItemGridView1">
        <table id="GridView1">
            <tr>
                <td>欄位一<td>
                <td>欄位二<td>
            </tr>
            <tr>
                <td>資料一<td>
                <td>資料二<td>
            </tr>
        </table>
    </div>
</div>

藍色部分為GridView預設產生的部分,綠色則為jQuery

一個TABLE如果有將每一個TD設定不自動斷行(white-space: nowrap)將會自動撐開TABLE的大小,這樣一來使用jQuery加入每一個TD中的DIV元素也會自動因為這個因素而改變寬度,一方面利用DIV未設定寬度時,自動是100%寬度的特性,就可以知道需要設定的寬度是多少.

寬度設定的大略步驟為:

1.由GridView1標題列取得每一個TD的DIV寬度(當尚未加工時寬度是瀏覽器依據內容自動排列,這時的寬度也就是我們要設定的寬度).

2. 設定GridView1Copy標題列TD的DIV寬度與GridView1資料列第一列TD的DIV寬度.

3. 將GridView1的標題列隱藏.

接下來就可以利用DIV(panelHeaderGridView1與panelItemGridView1)的特性,來進行捲軸捲動的效果.

2012年12月4日 星期二

GridViewScroll with jQuery 實作技巧

本篇將會說明GridViewScroll實作上最重要的技巧!

要固定標題列,基本的做法就是將標題的那一列獨立到另一個DIV中,就像以下的HTML語法一樣:

<div id="tableHeader">
    <table>
        <tr>
            <td style="width:180px;">欄位一<td>
            <td style="width:100px;">欄位二<td>
        </tr>
    </table>
</div>

<div id="tableItem" style="height:200px;overflow:auto;">
    <table>
        <tr>
            <td style="width:180px;">資料一<td>
            <td style="width:100px;">資料二<td>
        </tr>
    </table>
</div>

將每個欄位設定固定的寬度,並將tableItem設定為固定高度且超出高度顯示捲軸(overflow:auto)就可以做到簡易的固定標題列.

但上述的做法,遇到的最大問題在於"標題列與項目資料有可能不對齊",在不同的瀏覽器中,不對齊的狀況又會不太一樣.

使用Javascript來操作DOM相關的屬性並設定寬度,也會因為框線(border)或間距(cellspacing,cellpadding)的關係,造成無法容易計算出正常的寬度.

後來我發現,如果在每一個欄位(TD)中,再用一個DIV將裡面的資料包起來,並使用這個DIV來進行寬度的設定,幾乎就可以完整的解決上述的問題,可以參考下圖:




從上圖可以看到,其實每一個欄位都另外加了DIV,這樣一來就可以正確的對齊每個欄位.