Asp.Net Control For Google Charts

Google has launched a new service which allows you to very simply build charts for any web application. Their design decision to make an interface to their service which is all based on the format of the query string is very interesting to me. Basically, you send them a Url and they return a PNG image of a chart. The little query string language they use for the charts is not the cleanest thing in the world but it is simple which is nice.

Here is the official description:

The Google Chart API is an extremely simple tool that lets you easily create a chart from some data and embed it in a webpage. You embed the data and formatting parameters in an HTTP request, and Google returns a PNG image of the chart. Many types of chart are supported, and by making the request into an image tag you can simply include the chart in a webpage.

A Weekend Coding Project

I really enjoy building custom Asp.Net web controls so I decided to try my hand at creating a control to wrap the Google chart functionality. Now, this is really just a first pass so it is definitely not bug free or feature complete. I just figure I can put it out there and get some feedback to see if I should continue in the same direction or to see if I am way off. Also, I can use this as an opportunity to share a little about how I approach web control design.

Note: I realize that I am not the first or only one to get the idea to create a Google chart Asp.Net control, but since my approach is so different, I figured I would go ahead and submit my own.

So Many Classes

Maybe I am a little too obsessive or just set in my ways, but it always seems like when I set out to tackle a problem like this, there is a set of helper/utility classes that I prefer to use. Over time this creates a sticky situation because I have so many copies of the same or similar classes laying around it becomes a maintenance nightmare. I have considered just creating my own utility assembly but then people would have to deploy that with any solution that they use my code in. I prefer to release my code as a self contained assembly whenever possible so I guess I will just put up with it for now.

Here is a quick list of the classes I used on this project:

I use ColorHelper to translate System.Drawing.Color objects to and from their hexadecimal string counterparts. EnumHelper contains methods for getting Description attributes associated to enums as well as some parsing methods similar to these. I have written about DelimitedList and the state managed classes before. I make heavy use of QueryStringHelper to build the query string which represents the chart data.

Heavy on the Declarative Syntax

I have approached this problem by trying to represent the entire chart declaratively right in the aspx code. Here is an example of a line chart:

<web:Chart ID="chart" runat="server" Width="300px" Height="150px"
    Title="Transportation" Type="Line" EnableLegend="true">
    <DataSets>
        <web:DataSet Color="ForestGreen" Label="Cars">
            <web:DataPoint Value="5" />
            <web:DataPoint Value="9" />
            <web:DataPoint Value="21" />
            <web:DataPoint Value="30" Marker="Arrow" />
            <web:DataPoint Value="25" />
            <web:DataPoint Value="36" />
        </web:DataSet>
        <web:DataSet Color="Red" Label="Trucks">
            <web:DataPoint Value="7" />
            <web:DataPoint Value="3" />
            <web:DataPoint Value="13" />
            <web:DataPoint Value="13" />
            <web:DataPoint Value="16" />
            <web:DataPoint Value="25" />
        </web:DataSet>
        <web:DataSet Color="Orange" Label="Motorcycles">
            <web:DataPoint Value="18" />
            <web:DataPoint Value="25" />
            <web:DataPoint Value="18" />
            <web:DataPoint Value="13" />
            <web:DataPoint Value="25" />
            <web:DataPoint Value="23" />
        </web:DataSet>
    </DataSets>
</web:Chart>

As you can see, a chart with any sizable amount of data can become very cumbersome. The output of this chart looks like this:

The url used to generate this chart looks like this:

http://chart.apis.google.com/chart?chd=t:5,9,21,30,25,36|7,3,13,13,16,25|18,25,18,13,25,23
&cht=lc&chs=300×150&chco=228b22,ff0000,ffa500
&chm=a,000000,0,3,10&chtt=Transportation&chdl=Cars|Trucks|Motorcycles

You can change the type of chart being generated through the Type property. Here is an example of a bar chart:

A Venn Diagram:

Pie Chart:

Feedback Please

What I really need right now is some feedback. Do you find this helpful at all? Is my design way off? What would be the ideal way to build charts using the Google Api?

Please – download the library, try it out. Download the source and check it out. Post comments letting me know what you think.

Also, let me know if you would like me to write more about the details of the code or the usage of the control.

Source: Google Chart Source Assembly: Google Chart Assembly

Advertisement