dropthings中使用图形报表的widget

 

Dropthings 创建一个客户端的Widget

也就是说不会是传统的.net数据的传输和绑定等。Omar设计时使用的使用ajax来调用web service来实现的。整个架构比较复杂。有兴趣可以去研究下。

首先是创建一个widget2.5版本中创建widget的方法可以参考我这篇文章:

http://www.n-pei.com/dropthings/droptings-2.5.5%E4%B8%AD%E5%A6%82%E4%BD%95%E6%96%B0%E5%A2%9E%E4%B8%80%E4%B8%AAwidget

当创建好一个widget时,接着需要写一个javascript文件来调用webservice

如下图:

我要在这个widget中通过使用google的图形报表包来展示数据。如果你需要创建一个dashboard,使用googlechartdropthings来实现很不错的。

先来看看web control中的代码:

 

两个panel控件,后面那个panel完全就是空的,我们一会使用javascript通过id来给它绑定数据。

后台cs代码主要是注意regist script这部分:

 

 

 

通过上面的代码,当我们添加此widget到页面时,就把此widget调用web servicejs文件也load到客户端。

需要注意的是:1。为每个function加上Host.ID后缀是为了避免同一个页面相同widgetjavascript函数混乱。而clientID传过去就是为了让我们在客户端自动的找到这个控件的ID

接下来我们需要写javascript文件了。

 

具体的drawChart代码我就不贴了,直接是使用google给的方法。这里的data是从服务器端拿过来的数据。而GetChart就是拿数据的Web Service

下面的图说明了在哪里创建这个web service的方法:

 

运行结果:

 

点击edit后:

可以选择你需要的形状:

 

下面再来个LienChart:

 

 

最后是google报表的接口:

 http://code.google.com/apis/visualization/documentation/gallery.html

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章