Scott on Writing

Musings on technical writing...

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";
bc.DataBind(); 

reportChart.Charts.Add(bc);
reportChart.RedrawChart();

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!  :-)

posted on Wednesday, December 01, 2004 3:24 PM

Feedback

# re: Charting in ASP.NET with WebCharts 12/7/2004 9:41 PM Scott Mitchell

I recently wrote a breif article on 4Guys on using the WebCharts control:
http://aspnet.4guysfromrolla.com/articles/120804-1.aspx

# re: Charting in ASP.NET with WebCharts 12/10/2004 12:34 PM Ben Newcomb

Tip: increase quality of generated gif through Octree Quantization -> http://dotnetjunkies.com/WebLog/bsblog/archive/2004/01/26/6103.aspx

Curious as to why this functionality wasn't included, but can't complain I guess. I have used the PieChart in projects in the past, it has just enough if you don't need anything fancy.

Title:  
Name:  
Url:
Protected by Clearscreen.SharpHIPEnter the code you see:
Comments   

Add To Your Reader

My Links

Archives

Post Categories

 

I am a Microsoft MVP for ASP.NET.
I am an ASPInsider.
<May 2008>
SMTWTFS
27282930123
45678910
11121314151617
18192021222324
25262728293031
1234567

Comment Stats

DayTotal% of Total
Sunday 1866.8%
Monday 37913.9%
Tuesday 45316.7%
Wednesday 50418.5%
Thursday 53519.7%
Friday 49418.2%
Saturday 1666.1%
Total 2717100.0%

Hour1Total% of Total
12:00 AM 652.4%
1:00 AM 682.5%
2:00 AM 622.3%
3:00 AM 742.7%
4:00 AM 572.1%
5:00 AM 1033.8%
6:00 AM 1084.0%
7:00 AM 1585.8%
8:00 AM 1716.3%
9:00 AM 1475.4%
10:00 AM 1716.3%
11:00 AM 1816.7%
12:00 PM 1886.9%
1:00 PM 1696.2%
2:00 PM 1605.9%
3:00 PM 1324.9%
4:00 PM 1073.9%
5:00 PM 923.4%
6:00 PM 913.3%
7:00 PM 963.5%
8:00 PM 833.1%
9:00 PM 782.9%
10:00 PM 792.9%
11:00 PM 772.8%
Total 2717100.0%

Comments by Blog Entry Date/Time

Day Entry MadeAvg.Total
Sunday 5.54144
Monday 5.22339
Tuesday 4.28419
Wednesday 7.67637
Thursday 6.90607
Friday 5.48411
Saturday 5.33160
Total 5.842717

Hour1 Entry MadeAvg.Total
12:00 AM 5.0035
1:00 AM 1.002
5:00 AM 0.000
7:00 AM 7.0035
8:00 AM 5.35107
9:00 AM 6.32278
10:00 AM 6.47246
11:00 AM 4.41181
12:00 PM 6.88330
1:00 PM 3.00111
2:00 PM 5.41222
3:00 PM 8.64285
4:00 PM 4.0589
5:00 PM 5.92154
6:00 PM 4.52113
7:00 PM 9.67174
8:00 PM 9.80147
9:00 PM 5.05111
10:00 PM 5.4265
11:00 PM 4.5732
Total 5.842717

Learn More About Comment Stats
1 - All times GMT -8...


Blog Stats

Favorite Web Sites

My Books

My MSDN Articles