Last week I stumbled upon this article by accident: Charts And Graphs: Modern Solutions. This article offers a really good overview of the web-based charting solutions on the market. There are a lot more products available on the market, but what interested me the most in this article were the FREE solutions (as in beer)! My cheap entrepreneur spirit compelled me to check the free solutions. I was really surprised to find that one of them had a Free Charting ASP.NET library.


Open Flash Chart

Open Flash Chart was the first one that got my attention because it had a Google Analytics look. Open Flash Chart uses a Flash-based engine and downloads a separate file to know what to display. This file contains both the data and the appearance of the graph.

On the main page of the project, there is no mention of the existence of a .NET library to use this project. However, in the latest release (1.9.5) two guys made a library that can be used in an ASP.NET project! I downloaded the latest version and began to play with the project. I must say that the library is promising, but there are lots of problems. I fixed some of them and I intend to submit my changes to the team.

A simple example

I decided to try the solution a little bit with some data from our data warehouse. I used SubSonic to query the data since I can't live without it! As there is no data binding in the library, you have to do this work by yourself but it should be pretty easy to add this functionality to the library.

The first step is to have an *.aspx page displaying a custom control:

<graph:Chart ID="chart" Width="100%" Height="400" runat="Server" Url="daysOfWeekData.ashx" />

This control basically inserts a Flash control in the page. The Url property specifies the URL of a file containing both the data and graph's format settings. In this example, I use daysOfWeekData.ashx which contains a bar chart of the average sales a franchise store made for each day of the week during some pre-defined time period.

How does this works?

This is a pretty simple chart. You can hover over each column and the value of the bar will show in a tooltip. So basically daysOfWeekData.ashx uses the Open Flash Chart .NET library allowing us to customize our graph and insert our data. After manipulating the data, we can render the objects to the Response stream in query string format:

&title=,& &x_label_style=12,0x000000,2,1,0x000000& &x_axis_steps=1& &y_ticks=5,10,5& &bar_glass=65,#871E00,#FF7B00,Sales,12 &values=10852.69,6702.74,5327.95,5167.67,4982.08,10143.17,19958.16& &y_min=0& &y_max=19968& &tool_tip=Total Sales for #x_label#:
#val#& &x_labels=Sunday,Monday,Tuesday,Wednesday,Thursday,Friday,Saturday&

This code is then read and interpreted by the Flash control and displayed the chart.

I have included the code for daysOfWeekData.ashx.cs (1.96 kb), in case you are interested.

kick it on