Charting in ASP.NET with WebCharts
A while back I played around a bit with nSurvey and noticed that they used Carlos Aguilar Mares's free WebChart control to create the charts for the reports summarizing the survey results. One of the features in skmFAQs.NET that I have had in the codebase for a while is FAQ view tracking. That is, there's a method a page developer can call, passing in a FAQID that will record the date that a particular FAQ is viewed. (Typically the page developer would call this method on the page displaying a particular FAQ.) What I had yet to do was create some kind of report, showing the view information in a graphically-pleasing manner.
Today I downloaded Carlos's WebChart control and started tinkering. It's pretty easy to setup and start using, you just drop the assembly in the /bin, add the control to the Toolbox, and then drag and drop the WebChart control onto your page. You can customize a lot of the appearance through the Properties pane, and can easily bind database data or data from a strongly-typed collection to the chart with code like:
ColumnChart bc = new ColumnChart();
bc.DataSource = DataSource;
bc.DataXValueField = "ViewDateDay";
bc.DataYValueField = "Views";
The ColumnChart indicates that I want to add a bar graph series to the chart. I then set its DataSource property, in my case, a strongly-typed collection, and then set the DataXValueField and DataYValueField properties to the names of the properties in my STC that I want to have displayed in the graph. Finally I call the DataBind() method, add the chart to the Web control (which was named reportChart) and then call the RedrawChart() method. The end result is a report showing the number of FAQ views, either by a particular FAQ, by all FAQs in a particular category, or all FAQs across all categories:
As you can see, there are only views for the 29th & 30th of November, since that's when I wrote the FAQ tracking piece, but this should work moving forward.
Overall, the WebChart component is pretty cool. As I said, it was easy to start using it. The documentation is so-so, and can be downloaded here. There is also a number of online examples available on Carlos's Web site - these helped the most in getting started. One thing that I am finding a triffle annoying, though, is that the chart doesn't appear “smart” enough to be able to resize itself based on the size of the text in my chart title and axis labels. For example, if I add the X axis title of “Days of Month,” part of it is cut off by the chart. I have to manually adjust a Padding property until it's padded enough that the text isn't cut off. There are a couple other little issues like this - things you have to toy with manually to get it to look right, when ideally it would just look right automatically - but it's hard to complain too vehemently when you consider the price! :-)