Introduction

Google Inc. did not develop the .NET Visualization helper library and is not responsible for it. The helper library writes a JSON Google DataTable from a System.Data.DataTable object.

Usage

The library is easy to use.

Set up your System.Data.DataTable from any server-side operation. The code below just stubs out a demo.
Get the Google DataTable JSON representation of your System.Data.DataTable using the library as shown.
Initialize a Google DataTable on the client using the JSON and ClientScript.
Pass the Google DataTable to the Visualization API as documented by Google.

New with Version 1.3

JSON names are enclosed in quotation marks. The JSON date format mentioned in Google's documentation and implemented by this library is controversial.
Samples have been updated to use corechart and type inference
New samples for AJAX applications

Code Sample

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    protected void Page_Load(object sender, EventArgs e)
    {
        var googleDataTable = new Bortosky.Google.Visualization.GoogleDataTable(this.ProgrammingTable);
        Page.ClientScript.RegisterStartupScript(
            this.GetType(), "vis", string.Format("var fundata = {0};", googleDataTable.GetJson()), true);
    }
    protected System.Data.DataTable ProgrammingTable
    {
        get // a DataTable filled in any way, for example:
        {
            var dt = new System.Data.DataTable();
            dt.Columns.Add("STYLE", typeof(System.String)).Caption = "Programming Style";
            dt.Columns.Add("FUN", typeof(System.Int32)).Caption = "Fun";
            dt.Columns.Add("WORK", typeof(System.Int32)).Caption = "Work";
            dt.Rows.Add(new object[] { "Hand Coding", 30, 200 });
            dt.Rows.Add(new object[] { "Using the .NET Library", 300, 10 });
            dt.Rows.Add(new object[] { "Skipping Visualization", -50, 0 });
            return dt;
        }
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>.NET Visualization Helper Sample</title>

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>

    <script type="text/javascript">
        google.load("visualization", "1", { "packages": ["corechart"] });
        google.setOnLoadCallback(function () {
            var data = new google.visualization.DataTable(fundata, 0.5);
            var chart = new google.visualization.ColumnChart(document.getElementById("chart_div"));
            chart.draw(data, { title: "Visualization Satisfaction", hAxis: { title: "Programming method" }, vAxis: { title: "Units"} });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <h1>Visualization Column Chart Sample</h1>
    <div id="chart_div" style="width: 700px; height: 300px;"></div>
    </form>
</body>
</html>

Several other sample files are included in the binary download.

Simple usage, as shown above
Using two visualizations on a single page
Using this library in a AJAX application

See http://www.bortosky.com/samples/visualization.aspx for an on-line sample in action.

Comment by dinali...@gmail.com, Dec 18, 2009

Converts a System.Data.DataTable? into the corresponding Google Data Table so a Google Data Visualization can be created. Several varieties of dates can be handled through classes that are available from the Source tab -> svn -> trnk -> src. You could populate the .NET DataTable? via a web service that connects to your database and then display the chart. This works! Well documented, easy to understand. Thanks!

Comment by gar...@charismatech.co.za, Aug 2, 2010

This is fantastic, Gary. Thanks very much - you saved us a lot of time and effort.

Comment by project member garybort, Aug 7, 2010

Glad you like it. Pass on any ideas for this or other libraries.

Comment by thomashr...@gmail.com, Sep 17, 2010

This does work great for me....with one exception. Is there anyway you can re-write to create 'official' JSON with all the values in double quotes.

I am using the getJson method to return a json object from a web service call. However, when i try to eval (msg.d), i get an error saying something about expecting a ';' (which doesnt help much). I suspect that the error is related to the mal-formed json.

Thanks again for sharing your work.

Comment by project member garybort, Nov 7, 2010

I think you'll find the new quoting more to your liking.

Comment by hoolmank@gmail.com, Dec 17, 2010

Hi Gary, this project inspired me. I have completed wrapping the Google Visualizations in WebControls? that can be dragged into the markup of your .NET project. Hope this makes things a no-brainer when it comes to .NET and Google Visualizations.

http://code.google.com/p/googlevisualizationsdotnet/

Comment by bkuet...@gmail.com, Jun 30, 2011

Gary, this is great. Saved me lots of time. I'm having a little difficulty figuring out how to get the annotations to work in the Annotated Time Line. Google uses 1 column for a title and another column for text. I've applied this to my Data Table and don't come up with any annotations, just the time line.

I've been referencing: http://code.google.com/apis/ajax/playground/#annotated_time_line

Any suggestions?

► Sign in to add a comment