They say that a picture paints a thousand words. This is certainly true of websites: they are competing to get their message out and they want web users to process as much information in as little time as possible. One great way to illustrate large amounts of data to your audience is to do so visually, through graphs and charts. So where does the .NET developer turn to for great data images that will resonated with the masses? There are a lot of competing charting components out there in ASP.NET land, but one component vendor, Dundas Software, has truly made its mark with excellent charting capability. In this article we will review Dundas Charts and demonstrate some of their rich feature sets that will allow you to make your web site look and behave like it has never done before.
The installation requires the usual user name and password. Once you've typed them in and agreed to the license, Dundas Chart installs easily into the .NET framework's toolbox shown in figure 1:
Figure 1 - Dundas Chart in the VS.NET 2005 Toolbox
Now you have royalty-free charting components like you've never seen in any web application. To start using your Dundas charting application, however, takes a slightly different mindset than you are probably used to. Initially I dragged the chart from the toolbox onto a Windows Form. This brings up a wizard (shown in figure 2) that allows you to mold your chart component to your specific needs.
Figure 2 - Dundas Chart Wizard
If you click on the Chart Type Groups at the top of the wizard shown in Figure 3, you'll notice a variety of charts you can choose from: bar charts, area charts, line charts, pie charts, financial charts and charts I've never even heard of such as radar charts and funnel charts. With so many charts to select, you can be sure to find a chart that suits your needs. In my case, I wanted to build the flashiest chart I could think of.
Figure 3 - Different types of charts in Dundas Chart
I immediately decided to create one of those cool 3-D Charts like I see in the ads in MSDN. So I chose the 3D button and selected a Clustered Series graph as in Figure 4. I then chose Appearance and changed my bars to transparent. Finally I added a chart title.
Figure 4 - Getting the 3-D Effect
When all was said and done my chart showed up inside my ASP.NET Designer window with a Property window that I can manipulate as shown in figure 5. If at any time I want to change the look and feel of the chart, I can simply right click on the component and choose the Wizard again to adjust the appearance.
Figure 5 - Default ASP.NET page with Dundas Component
I suddenly noticed that I forgot to label my axes, so I went back into the wizard and chose the axis button shown in Figure 6. (And yes, in case you’re wondering, axes is the plural of axis as well as the plural of Ax). Unfortunately, I wanted to label my x axis with different names of food (not numbers) and my only labeling options were numbers and dates.
Note: When choosing an x axis font in 3-D, be sure to choose a sans serif font like Arial; otherwise the font will be too distorted to read when it's rotated.
Figure 6 - Axes Labeling and Formatting through the Wizard
Fortunately there is a way to do this which I found through the extensive Dundas Chart Help integrated into Visual Studio. I can actually associate a label with a data point. In the case of a bar chart, this is exactly what I need to do to accomplish applying labels for different foods right on the x axis. Listing 1 shows the code I used to chart each food and the corresponding calorie content:
protected void Page_Load(object sender, EventArgs e) { // plot the series points for each item Chart1.Series["Series1"].Points.Add(new DataPoint(0, 100)); Chart1.Series["Series1"].Points.Add(new DataPoint(5, 120)); Chart1.Series["Series1"].Points.Add(new DataPoint(10, 50)); // Replace the numeric labels with actual food names Chart1.Series["Series1"].Points[0].AxisLabel = "Egg"; Chart1.Series["Series1"].Points[1].AxisLabel = "Fish"; Chart1.Series["Series1"].Points[2].AxisLabel = "OJ"; }
When I run the ASP.NET page I get the results shown in Figure 7 for Series 1. Note there is very little code actually needed to get going with charting. Much of the appearance of the chart is created by setting properties through the Dundas Wizard. You also have the option of setting the appearance of the control directly in the Visual Studio.NET IDE Property Window.
Figure 7 - 3D Calorie Chart
For example, if we wanted to change the position of the Food x-axis label, we could go into the Property Window and first choose the ChartAreas Collection as shown in Figure 8.
Figure 8 - Chart WebControl Properties Window
Choosing the ellipsis brings up the ChartAreas Collection Editor. If we choose the Axis Property in this window, it will bring up the Axis Collections Editor as shown in figure 9. The Dundas Team clearly did a lot of work here and adhered to the same guidelines that Microsoft uses for its own controls in the design view. This makes it easy to navigate in and out of collections and change properties at a very granular level.
Figure 9 - Changing the X-Axis Label Alignment
We can actually drill down all the way to the Title Alignment of the x axis in the Property Window and choose the TitleAlignment enumeration that will move our label to the origin side of the graph as shown in the browser in Figure 10. My only complaint about all these property editors is that there are so many features to manipulate in your graph. Therefore, the number of possibilities can be overwhelming. Luckily, you can use the detailed help files to figure out what all the various properties mean.
Figure 10 - Shifting the X Axis Label towards the Origin
I'd been hard pressed to find a decent real-time graphing component, until I looked at the Dundas Component. Other popular .NET components out there seemed to add real-time graphing as an afterthought. The Dundas component was easy to use and came with some great samples for getting started. One of the Dundas samples shows you how you can use a timer in conjunction with an AJAX callback to produce a real-time series. This setup would be excellent for data acquisition through polling in real time. For example, you could poll for stock quote data from a stock quote web service once a second and display the next data point on the Dundas Chart on your web page.
In order to demonstrate some real-time charting it seemed appropriate to use a line graph. Using the Dundas Wizard, I chose an eye-catching theme and added graph and axis titles:
Figure 11 - Using the Dundas Wizard to kick off the Real-Time Graph
Using the sample that Dundas provided, I was able to quickly put together the Real-Time C# Code to get the Ajax mechanism running. In order to get Ajax to work with a timer event, I needed to do a few things. First I needed to register the page’s start up script that will execute a callback at a specified time interval in the page load event:
protected void Page_Load(object sender, System.EventArgs e) { // Register the script that will execute a timer callback every 500 ms this.Page.ClientScript.RegisterStartupScript( typeof(Chart), "callback", "window.setInterval(\"" + this.Chart1.CallbackManager.GetCallbackAsyncMethodReference("Timer", "") + "\", 500);", true); }
Next, I needed to inform the ASP.NET page what method to use as a callback. This was accomplished by adding an OnCallback tag into the Dundas Chart component:
<DCWC:Chart ID="Chart1" runat="server" BackColor="Navy" BackGradientEndColor="CornflowerBlue" BackGradientType="HorizontalCenter" BorderLineColor="RoyalBlue" BorderLineWidth="2" Palette="Berry" Width="403px" OnCallback="Chart1_Callback">
Finally, we needed to poll the data every time our timer event was triggered. In our example we simply generated a point on a sine function and graphed it with respect to time. Note the code in listing 4 also handled the case where we plotted past the boundaries of the graph. Once the data filled up the graph, the excess data was "scrolled" by removing the oldest point on the curve and adding the newest point.
/// <summary> /// Chart Callback event handler. /// </summary> protected void Chart1_Callback(object sender, CommandEventArgs e) { // Handle Timer callback command if (e.CommandName == "Timer") { // set some initial values in case we don't have existing points inside the component double lastXValue = -1; double lastYValue = -1; // if we already have at least one existing point, retrieve the X Value if (Chart1.Series[0].Points.Count > 0) { lastXValue = Chart1.Series[0].Points[Chart1.Series[0].Points.Count - 1].XValue; } // Increment to a new Time Value on the X Axis lastXValue++; // Calculate the Y Value on the sine curve lastYValue = 50 * Math.Sin(lastXValue * Math.PI / 100); // Plot the next Value on the sine curve Chart1.Series[0].Points.AddXY(lastXValue, lastYValue); // Remove points from the left chart side if number of points exceeds 100. while (this.Chart1.Series[0].Points.Count > 100) { // Remove series points Chart1.Series[0].Points.RemoveAt(0); } // Adjust categorical scale double axisMinimum = this.Chart1.Series[0].Points[0].XValue; this.Chart1.ChartAreas["Default"].AxisX.Minimum = axisMinimum; this.Chart1.ChartAreas["Default"].AxisX.Maximum = axisMinimum + 100; }
The resulting graph is shown in figure 12. The scale of the x axis adjusts as each new point is plotted. That's all there is to doing real-time graphing directly on a web page!
Figure 12 - Sine Curve Moving in Real Time
I wanted to try something a little fancier by adding a scrollbar in real time. Instead of removing points that scroll off the graph, it would maintain historical data. Unfortunately, this seemed to cause a lot of flickering of the scrollbar. If I worked at this a little bit longer, I may have had some luck at optimizing it. For example, I could have added a mode that produced the scrollbar only when I put the graph in "scrolling-mode," so I could scroll to the correct time without the refreshing of the grid occurring at the same time.
Creating charts on the web was never easier than with Dundas Chart ASP.NET 5.5. Not only do you avoid writing a lot of code, but you get some really glitzy graphs to smarten up the appearance of your site. Dundas utilizes AJAX to allow you to do some real-time graphing on the web as well. Before you know it, you have colorful animated charts on your web site. Whether you’re new to ASP.NET or a seasoned pro, I highly recommend Dundas Chart for any web project that requires detailed charting.