dropthings中使用圖形報表的widget

Dropthings 創建一個客戶端的Widget。

也就是說不會是傳統的.net數據的傳輸和綁定等。Omar設計時使用的使用ajax來調用web service來實現的。整個架構比較複雜。有興趣可以去研究下。

首先是創建一個widget，2.5版本中創建widget的方法可以參考我這篇文章：

當創建好一個widget時，接着需要寫一個javascript文件來調用webservice。

如下圖：

我要在這個widget中通過使用google的圖形報表包來展示數據。如果你需要創建一個dashboard，使用google的chart和dropthings來實現很不錯的。

先來看看web control中的代碼：

兩個panel控件，後面那個panel完全就是空的，我們一會使用javascript通過id來給它綁定數據。

後臺cs代碼主要是注意regist script這部分：

通過上面的代碼，當我們添加此widget到頁面時，就把此widget調用web service的js文件也load到客戶端。

需要注意的是：1。爲每個function加上Host.ID後綴是爲了避免同一個頁面相同widget時javascript函數混亂。而clientID傳過去就是爲了讓我們在客戶端自動的找到這個控件的ID。

接下來我們需要寫javascript文件了。

具體的drawChart代碼我就不貼了，直接是使用google給的方法。這裏的data是從服務器端拿過來的數據。而GetChart就是拿數據的Web Service：

下面的圖說明了在哪裏創建這個web service的方法：

運行結果:

點擊edit後：

可以選擇你需要的形狀：

下面再來個LienChart:

最後是google報表的接口：