C# Dataset and Google Visualization API

[Ned]

Hello,

I have a Web Application Report Engine written in C# which will take
user parameters, run a SQL query to get Report Data, and then make
some modifications to the DataSet before finally outputting it to the
screen as an ASP GridView. I've been experimenting with the Google
Visualization API, and thought I would try using the API as a graphing
engine for all my data. My question is, what is the best way to
access the data generated by the C# code inside the javascript for the
Google Vis. API?

I was experimenting with writing a C# WebService that would output a
JSON formatted string which represents the C# DataSet. The WebService
is correctly outputting the JSON string, but how do I call the
WebService using the google javascript?

Additionally, is there a better way of going about this rather than
the creation of a WebService to output data?

Thanks!

[VizBoy]

Hi,

In general there are two ways you can go about getting the data from your server to the visualizations on the client-side.

1. Generate the html page dynamically (Asp .NET does this well) and put in the html some static javascript containing your data table's json. For instance, you have a url www.myserver.com/mypage.aspx which generates an html page containing, among other things this:
<script>
var json = {cols: [...], rows: [...]};
var dataTable = new google.visualization.DataTable(json);
...
</script>

2. Become a data source. You need to conform to the protocol described here: http://code.google.com/apis/visualization/documentation/dev/implementing_data_source.html
Then you need to expose a url (can be a web service, i believe, if a web service doesn't have problems with returning a simple text string without any special headers it adds itself).
Say you expose www.myserver.com/myservice
And then in the client side (this can be a static html file, or a dynamic one created by Asp .NET, doesn't matter) you can have something like this:
<script>
var query = new google.visualization.Query('http://www.myserver.com/myservice');
query.send(handleResponse);
function handleResponse(response) {
...
}
</script>
See further documentation of sending requests via the Query object here:
http://code.google.com/apis/visualization/documentation/queries.html

To choose between 1 and 2, the main thing that should guide you is whether you write all your own pages (choose 1) or whether you will want your data to be accessed by pages written by someone else, or by Google Visualization Gadgets, etc (choose 2).

Hope this helps.

- VizBoy.

[Ned]

The dynamic page is an interesting idea. I also thought of outputting
to a non-visible Gridview, and then having the javascript try to
scrape the resulting HTML table in the code. After doing a bit more
javascript digging though, I decided to use ASP.NET AJAX to create a
WebService that utilizes the [ScriptService] and [ScriptMethod]
attribute tags. This lets me access the webservice via the javascript
directly:

<asp:ScriptManager ID="ScriptManager" runat="server">
<Services>
<asp:ServiceReference Path="~/ReportWS.asmx" />
</Services>
</asp:ScriptManager>

<!--Load the AJAX API-->
<script type="text/javascript" src="http://www.google.com/jsapi"></
script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["piechart"]});
</script>
<script type="text/javascript">
function findHelloService()
{
ReportWS.GetReport(function(result) {
$get("WSresult").innerHTML = result;

var JSONObject = result;
var data = new google.visualization.DataTable(JSONObject);

var chart = new google.visualization.PieChart
(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240, is3D:
true, title: 'My Daily Activities'});
});
}

Now I'm faced with a new problem though. How do I get my JSON string
into an object that Google recognizes?

My JSON String looks like this:

{"Table" : [{"AccountName" : "ClientA","Group" : "GroupA","Metric" :
"348"},{"AccountName" : "ClientA","Group" : "GroupB","Metric" :
"25502"},{"AccountName" : "ClientA","Group" : "GroupC","Metric" :
"2228"},{"AccountName" : "ClientA","Group" : "GroupC","Impressions" :
"0"}]};

The Javascript is giving me the error:
Line: 93
Char: 17
Error: 'this.A' is null or not an object


... so I think something inside the Google Javascript code is failing
but I'm not entirely sure why. Is my JSON string invalid compared to
what Google is expecting?

Thanks,
-Ned

On Apr 1, 3:18 am, VizBoy <viz...@google.com> wrote:
> Hi,
>
> In general there are two ways you can go about getting the data from your
> server to the visualizations on the client-side.
>
> 1. Generate the html page dynamically (Asp .NET does this well) and put in
> the html some static javascript containing your data table's json. For

> instance, you have a urlwww.myserver.com/mypage.aspxwhich generates an

> html page containing, among other things this:
> <script>
> var json = {cols: [...], rows: [...]};
> var dataTable = new google.visualization.DataTable(json);
> ...
> </script>
>

> 2. Become a data source. You need to conform to the protocol described here:http://code.google.com/apis/visualization/documentation/dev/implement...

> Then you need to expose a url (can be a web service, i believe, if a web
> service doesn't have problems with returning a simple text string without
> any special headers it adds itself).
> Say you exposewww.myserver.com/myservice
> And then in the client side (this can be a static html file, or a dynamic
> one created by Asp .NET, doesn't matter) you can have something like this:
> <script>
> var query = new google.visualization.Query('http://www.myserver.com/myservice');
> query.send(handleResponse);
> function handleResponse(response) {
> ...}
>
> </script>
> See further documentation of sending requests via the Query object here:http://code.google.com/apis/visualization/documentation/queries.html
>
> To choose between 1 and 2, the main thing that should guide you is whether
> you write all your own pages (choose 1) or whether you will want your data
> to be accessed by pages written by someone else, or by Google Visualization
> Gadgets, etc (choose 2).
>
> Hope this helps.
>
> - VizBoy.
>

[Doomsday]

Hi Ned,
I think your JSON is incorrect, you need:
http://code.google.com/apis/visualization/documentation/reference.html#DataTable
look under
"Format of the data Parameter Object"

Assuming that your web service is returning a string you will not be
able to pass this directly to the google dataTable as it is expecting
a object not a string.

var strResult = result; // strResult = "{ cols:[], rows:[] }"
var JSONObject = eval(strResult ); // convert the string to a object

var data = new google.visualization.DataTable(JSONObject);

I am about to do something very similar to what you are doing. I am
interested in how you are converting your c# DataTable or DataSet to
the format that google requires. You will need to manually iterate the
table to build a JSON string. The .Net JavascriptSerialization will
not reproduce the format that google expects. Can you post your .NET
to JSON conversion code I'd love to see your implementation.

In my situation I will have multiple visualizations on the page. So it
would be cool to call a webservice that returns a DataSet of multiple
DataTables to reduce server requests:

So:
var strResult = result; // strResult = "{ table1:{ cols:[], rows:[] },
table2:{ cols:[], rows:[] } }"
var JSONObject = eval(strResult); // convert the string to a object
var data1 = new google.visualization.DataTable(JSONObject.table1);
var data1 = new google.visualization.DataTable(JSONObject.table2);

> > instance, you have a urlwww.myserver.com/mypage.aspxwhichgenerates an

[chrissky]

Check out
http://bortosky-google-visualization.googlecode.com

On Apr 2, 1:28 am, Doomsday <josephheming...@gmail.com> wrote:
> Hi Ned,

> I think your JSON is incorrect, you need:http://code.google.com/apis/visualization/documentation/reference.htm...

[Doomsday]

Nice!!!

Thanks for the post, I'll look into it tomorrow but it looks really
promising!


On Apr 2, 10:05 pm, chrissky <back5...@gmail.com> wrote:
> Check outhttp://bortosky-google-visualization.googlecode.com

[Doomsday]

Nice!!!

Thanks for the post, I'll look into it tomorrow but it looks really
promising!


On Apr 2, 10:05 pm, chrissky <back5...@gmail.com> wrote:

> Check outhttp://bortosky-google-visualization.googlecode.com