please leave a comment so that i know what not to write about


Wednesday, March 16, 2011

Problem with Google visualization API- DataTable

One of the most widely charting API is the Google visualization API. Which enables the developers to create charts using
javascript at runtime by supplying the data in a particular format.
I had to use this API with ASP.Net. So the major problem in
front of me was how to transfer the data in my database to the client side JavaScript.
Which I could solve by using .ashx pages. I created my own class for
transforming .Net DataTable to a JSON string.
The final problem that I faced was that when I transferred the
JSON string to the client side using Jquery AJAX method though it was parsing
the JSON correctly. The Google DataTable was being formed correctly the final
AnnonatedTimeline I was trying to make with that JSON data was showing errors. So
to debug I created a Google DataTable manually and converted it into JSON using
the method it provides. The JSON string that was given out by Google’s very own
DataTable and my JSON string were exact match still, still mine was showing
After hours of looking into the problem I finally could
solve it. Because I was using Jquery AJAX method which was parsing the JSON
string into the final objects and the Google Datatable’s date format does not
go by the standards so the final field which was supposed to be of “Date” type
was actually string
v              "Date(2011,2, 10)"          String
After realizing this the solution was simple and it was to
change the JavaScript object which I was using to create Google DataTable back
to a JSON string using the code below
data = JSON.stringify(data);
var dataTable = new
google.visualization.DataTable(data, 0.6);

Other userfull resources
Google DataTable
.Net DataTable
Jquery AJAX
JSON - Java Script Object Notation
There was an error in this gadget