dropthings中使用图形报表的widget

 

Dropthings 创建一个客户端的Widget。

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

首先是创建一个widget，2.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，使用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报表的接口：

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