Monday, March 10, 2008

ASP.NET Google Charts Implementation

Image-0000

A friend of mine recently sent me a link to an ASP.NET implementation of the Google Charts API. It was a decent implementation, but had some shortcomings, which prompted me to see what else the ASP.NET community had developed. All of the implementations I found had the following shortcomings:





  • Extremely heavy implementations


  • No data binding


  • Lengthy declarative syntax



First off, I like to employ the KISS method of development whenever possible and I felt that what was out there was just too much code for the task at hand. Secondly, all of my charts will be based on real-time ever changing data so I needed data binding, which I didn’t see implemented in any of the solutions. And lastly the declarative syntax necessary to define the chart parameters and their data was just as cumbersome as just typing out the Google Charts API URL.




So born out of this, I set out to create an ASP.NET Google Charts API implementation with the following...



Features / Design Goals





  • Light implementation & easy integration into existing projects


  • Chart data is bindable to real-time data queries


  • Straight forward and small footprint declarative syntax


  • HTTPS support for Google Charts without the user getting the annoying security warning popup in IE




I believe that I have achieved my goals, albeit with only the Pie & Bar charts (because that’s all I need for now) but the other charts can easily be added to the foundation I have in place.



Requirements





  • ASP.NET 3.5 or later (Actually, only 2.0 is required to use the
    controls, but my example uses 3.5 LINQ queries.)


  • SQL 2005 Express (if you want to run the sample included in my implementation.)



Download



You can download the full source code for my ASP.NET Google Charts API implementation below...




Getting Started



To use my implementation of ASP.NET Google Charts API into your web app, just do the following:






  1. Copy the files into your application (maintain the same structure or you will need to re-configure some references.)


  2. Create a GridView (see specifics below)


  3. Drag one of the Google Chart User Controls onto your ASPX page


  4. Set the ChartGridViewID property



That’s it, you should be able to build your solution, run the page and view your chart.





The Code




I tried to keep the code as simple as possible and I believe that integrating
what I wrote into your web application should be pretty straight forward.



Data Binding to any ol’ GridView




I didn’t employ a typical data binding solution. Chris Heilmann’s (credit below) post on using javascript to build a Google Chart seemed like a great way to implement data binding in very short order.

So the way this implementation works is that you just need to build a GridView with two columns, one for the labels and one for the data.




Example GridView declaration:




Image-0001



Example GridView Output:




Label_Value_Column_Example




HTTPS SSL Support for Google Charts




The web application I wanted to use Google Charts in requires an SSL connection. Since Google Charts doesn’t offer an https connect for their API, you get that nasty little message box in IE notifying you that some of the items on the page are insecure.

I got around this by using an HTTP handler (ashx) for the images. The image data is downloaded server side and then displayed through the ashx, which solves the insecure warning in IE since the image is being served up from memory and not from a non-secure URL.




Google Chart User Controls Declaration




You can add a chart to your page by simply dragging either the ucGooglePieChart or ucGoogleBarChart user control onto your ASPX page.



Image-0002




Google Chart User Controls Properties




All of the properties I created for the controls start with “Chart” so you can easily find them using Intellisense.

All of the property values should be formatted according to the Google Charts API specifications. For example, if you want to set the size of the chart you should use “300x400” as the value for the ChartSize property.
http://code.google.com/apis/chart/



Image-0003



Shared Properties



ChartGridViewID – This is the only required property. You need to specify the ID for the GridView that you want to base the chart on.



ChartShowData – Boolean value; specifies whether or not you want to the GridView’s resulting table to be shown with the chart or just the chart on its own.



ChartSize – Specifies the size of chart.
http://code.google.com/apis/chart/#chart_size



ChartColor – Specifies the color(s) to use in the chart
http://code.google.com/apis/chart/#chart_colors



ChartBGFill – Specifies the background fill, color and gradient.
http://code.google.com/apis/chart/#chart_or_background_fill



ucGooglePieChart Specific Properties



Chart3D – Boolean value; specifies whether or not you want to use a 3D pie chart



ucGoogleBarChart Specific Properties



ChartBarSizeSpacing – Specifies the width of the bars displayed, how far they are apart and space between groups.
http://code.google.com/apis/chart/#bar_width



ChartOrientationVertical – Boolean value; specifies whether or not you want the chart to be vertical. If this value is false, the bar chart will be horizontal.




The Classes



Image-0004



As you can see, the solution is pretty small. I will go over each part below.



/App_Themes
The App_Themes folder contains the Theme that I am using to control the GridView’s look & feel as well as a few other minor CSS items. The CSS definitions are broken up into two files, one specific to the chart implementation.



Image-0005



/Javascript
The JavaScript folder contains all of the javascript necessary for this implementation. If you change the location of this folder relative to the user controls you will need to update the location references to be correct for your application.



Image-0006



ucGoogleBarChart.ascx
User Control implementation of the Google Bar Chart.



Image-0008



ucGooglePieChart.ascx
User Control implementation of the Google Pie Chart



Image-0009



GoogleChartsHandler.ashx is the image handler that retrieves the Google
Charts image on the server side, thereby bypassing the IE security warning
dialog in HTTPS scenarios, and then displays the resulting image.



Image-0007



Credits




Chris Heilmann
I ran across Chris’ brilliant idea of building the chart based on the contents of an HTML table. I took his javascript code and heavily modified it to create the data binding solution I implemented using ASP.NET.




Matt Berseth
I used Matt’s YUI styled GridView control (modified a smidge to work with ASP.NET Themes & Skin file) for the very nice looking GridViews included in my source code.




Final Words



If you update my code, find any bugs or have any general comments on how the implementation can be improved please let me know. Also, if you add implementations for other Google Charts that I didn’t implement I would appreciate it if you would send me the code and I will include it in the download.



Usage




Feel free to use my code and implementation as you see fit (although please don't take credit for it). I would however really appreciate a link to my website with a credit for the work.
http://www.schnieds.com/



- Aaron


http://www.churchofficeonline.com/

kick it on DotNetKicks.com



26 comments:

Darren Kopp said...

nicely done. i was going to do the same thing at work for some charting needs of ours but right now we are using the yahoo yui chart api. It's worked out well so far, but i don't think it covers as much as the google chart api does.

if we start doing google chart api i'll definately have to take a second look at your controls.

Aaron Schnieder said...

Hey Darren,

Glad you like the controls. How are the Yahoo Charts working out for you? When I looked at them their offering didn't seem quite as flexible, just as you mentioned. I also noticed that they didn't support HTTPS either; strange that neither Google nor Yahoo offer HTTPS out of the box.

-Aaron

Jesper J said...

I cant get it to work.

It exsample runs fine, but it dont show any data in the charts, the charts display there background and all, but the data is kinda not in there, but still the charts knows about the data someway, as the lines and labels are set to 1996 and the categories are also in the chart.

Aaron Schnieder said...

Jesper,

I just downloaded my example code on a different computer, ran the sample and everything worked fine.

Are you behind a firewall or proxy that might be blocking the outbound request to code.google.com/charts?

Jesper J said...

Still cant get it to work, no firewall. The problem is the URL i think, this is the URL that you're handles produces:

http://chart.apis.google.com/chart?cht=bvg&chco=0000ff&chs=500x400&chbh=75,10,20&chf=c,lg,90,76A4FB,0.5,ffffff,0|bg,s,EFEFEF&chxt=x,y&chxl=0:|1995|1996|1997|1998|1:|0|0|10&chd=s:____

Jesper J said...

Sorry, to long url for you to see, and it goes to you're page for some strange reason :)
I shrinkerized it, so you can get a preview of it here:

http://shrinkster.com/wlk

Aaron Schnieder said...

jesper,

Based on that url it looks like the chart data isn't getting included in correctly. Here is what I get when I am running it:

"http://chart.apis.google.com/chart?cht=bvg&chco=0000ff&chs=500x400&chbh=75,10,20&chf=c,lg,90,76A4FB,0.5,ffffff,0|bg,s,EFEFEF&chxt=x,y&chxl=0:|1995|1996|1997|1998|1:|0|304423.435|608856.87&chd=s:DT9s"

Notice the chd= is way different than what what you are getting. Did you make any changes?

Jesper J said...

No, its fresh from you're site.

I've looked into it, and it actually makes sence. Im using a danish windows (And danish browsers), so the webserver will try to serve me danish numbers, and we use comma as a delimiter, and javascript dont like that, so something goes wrong about where it needs to calculate the max X or something (In the pie chart). If i switch the culture and uiculture to en-us it works, or offcause I can force the numbers to go out in "dot-mode" in the gridview, and all should be fun and dandy :)

Anonymous said...

So, could you make this more 'culture invariant' ? :)

Aaron Schnieder said...

Well, I definitely didn't test using a Danish platform... bad developer. :)

What seperator character would work in EU?

Jesper J said...

I don't think it is as simple as EU has one separator, but I've never seen other separators than comma and dot, so if you support both it would properly work all over.

Let us just hope that no one formats there numbers as currency for something wicked :)

Anonymous said...

Very Nice. What about a line chart?

Edmund

Eric said...

Any chance you could post the code in another location or email me ths zip?

Jaime said...

Great solution! I already had some control to manage the url declaration with my data, but the SSL solution saved my day.

Thanks and well done!

eddi25 said...

hey guys,

i think one gotta check visifire, it is an amazing charting component

AJH said...

Great job! What would motivate you to add more Google charts and chart parameters?

Aaron Schnieder said...

AJH:

You asked what would motivate me to add more features / properties / chart types... The answer is more free time or of course $$$. :)

What new features/additions are you looking for specifically?

jc said...

Thx for great example!
I want to see how this works in ASP.NET 2.0. What changes need to be made if I wanted to use this for ASP.NET 2.0? Could you help me setting it up?

jc said...

I can't not get this example code to work.. I'm using ASP.NET 2.0 so I approprietly reference .dlls but gives me error in line 32 of
Northwind.designer.cs

partial void OnCreated();

saying,
invalid token 'void' in class, struct, or interface member declaration. I need someone to test this out on ASP.NET 2.0 please...

Nimesh – Perception System said...

Nice Post
Informative and useful one
I am .Net Developer and I am looking for this
Thanks for the great stuff.
Nimesh

Anonymous said...

can we do event handling using this library.

I added NGChart library into my application and able to generate different kind of charts by getting data from database.
But i need to develop dasboard which i can be accessed individual bargraph parts by clicking .

Magento Developer said...

Nice creation

Thanks

Ecommerce developers said...

i was going to do the same thing at work for some charting needs of ours...I just downloaded my example code on a different computer, ran the sample and everything worked fine.

Ecommerce Website Developer said...

we use comma as a delimiter, and javascript dont like that, so something goes wrong about where it needs to calculate the max X or something (In the pie chart). If i switch the culture and uiculture to en-us it works, or offcause I can force the numbers to go out in "dot-mode" in the gridview, and all should be fun and dandy :)

Webdesign said...

Very good write up! It's actually crucial update for the developer. Thanks for ASP.NET Charts Implementation. Keep it up though!

Inheritx Solutions said...

Hey Darren,
I have done the same and I got the perfect result of google chart.

I really like this post.
thank you to share.