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.
- 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.)
You can download the full source code for my ASP.NET Google Charts API implementation below...
To use my implementation of ASP.NET Google Charts API into your web app, just do the following:
- Copy the files into your application (maintain the same structure or you will need to re-configure some references.)
- Create a GridView (see specifics below)
- Drag one of the Google Chart User Controls onto your ASPX page
- Set the ChartGridViewID property
That’s it, you should be able to build your solution, run the page and view your chart.
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
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:
Example GridView Output:
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.
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.
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.
ChartColor – Specifies the color(s) to use in the chart
ChartBGFill – Specifies the background fill, color and gradient.
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.
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.
As you can see, the solution is pretty small. I will go over each part below.
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.
User Control implementation of the Google Bar Chart.
User Control implementation of the Google Pie Chart
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.
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.
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.
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.