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:

image

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:

Transportation

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

kick it on DotNetKicks.com

Advertisements

11 Responses to Asp.Net Control For Google Charts

  1. kwiksand says:

    I like it, but knowing nothing about Google Charts I’m not sure if there’s a better way to send a load of data (for any sizeable graph with lots of entities).

    Do they accept post data like a simple CSV for large amounts of data?

    Apart from that, it looks great!

  2. G’day Luke, good job wrapping the call to Google in a control. Well done! That way if the implementation changes, a change to the control and compile will be all that’s needed.

    What’s your experience been using Google charts? All the demos I’ve seen have been nice, but a lot of them were missing too – maybe the server was overloaded, the request was bad, or something else.

    Cheers, Thomas

  3. […] If this were my timeline, it would look more like this: Luke published his post on Asp.Net Control For Google Charts […]

  4. Matt says:

    Your library is on a better track than some of the others. There are some problems with it though, for instance, if your data values are very large, the results will not appear because you can’t set the scale. I don’t see a way to set axis label values either. Am I missing that function somewhere?

  5. Hi,

    Nice control, well designed and soooooo helpfull !!

    Correction made to LinearStripeFill Line 74.
    options.Add(stop.Width.ToString(System.Globalization.CultureInfo.InvariantCulture));

    Same modification shoudl be made everywhere to support culture where decimal are marked with “,” instread of “.”.

    Many thanks, lt of wasted time saved 😉

    V.

  6. Luke Foust says:

    Thanks Valery. I’ll update the source.

  7. Hi Luke,

    I intend to do a few feature addition to the library and include more control on axis, support of grid lines, and other stuff. The question is : do you continue updating the library or is it ok if I just send you the complete modified source code afterward ?

    Also let me know if you just don’t want me to modify your work.

    Have a nice weekend,

    V.

  8. […] Charts for Asp.Net now on Codeplex I have received very positive feedback on my Asp.Net control for Google charts so I decided to place it up on Codeplex to allow people to participate and add code to the […]

  9. Hi

    I’m learning asp.net (with c#) and found your class in google, but I can’t use. Please post an example here or in codeplex to facilitate the learning.

    Thanks!

    PS: It forgives for the horrible English. I am Brazilian and I am learning English also. 😀

  10. Tommy says:

    Hi Luke/Valery

    Did you ever complete the additional features here? Looks like a great control, but as Valery mentioned, axis control and support of grdilines would be great features. I will probably modify the source in a couple of days, but if you have it avialble, that would be great.

    Nice control, good work!

    Tommy.

  11. Malay Thakershi says:

    Hi, thank you for sharing this.

    I am not able to register the assembly in my aspx file. Could you please post the ‘Register’ construct?

    Can you share the source that you used to generate the above examples?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: