Web Charts Using ASP.NET and C#

I’ve not posted for a couple of days due to the fact that I’ve been busy planning the next section of my website, which is going to remain secret until I pull it off. Actually, I lie. Most of the time I’ve been practising my golf, which seems to be coming along nicely. Apart from that, I’ve moved the site to a different server, which was almost trouble free – a missing CNAME record had the site down at www.alexhumphrey.me.uk, although alexhumphrey.me.uk was still available. However, that is now sorted, so on with the show.

While experimenting with what I can do for the new site section, I decided that I needed the ability to generate graphs in web pages. Now, there are a few ways of doing this, from HTML/CSS to writing your own graphs using GDI+. The HTML/CSS option can only do so much though, so I decided to go the full GDI+ charting solution. Most of us though, either don’t have the time or just can’t be bothered to write a proper charting solution, me included. One of the exceptions to this is Carlos Aguilar Mares, who has written the WebChart control for ASP.NET. While it’s not the greatest looking control, it’s completely free and is heavily customisable. This post is just an introduction to using this control.

First of all (after adding a reference to WebChart.dll), we need to dump a chart into our web page. We can do this by registering the assembly at the top of the page and adding a Web:ChartControl element, like so…

  1. <%@ Register Assembly="WebChart" Namespace="WebChart"
  2.     TagPrefix="Web" %>
  3. <Web:ChartControl ID="myChartControl" runat="server">

You can then configure most of the look and feel of the chart in the Visual Studio designer, or in code. Due to the fact that the chart is very highly customisable, it’ll take time to get the look that you want. Now for the code. We’re going to create an instance of a LineChart, customize its appearance and bind some data to it, as follows:

  1. // Create Data
  2. List<KeyValuePair<string, int>> data =
  3.     new List<KeyValuePair<string, int>>();
  4. data.Add(new KeyValuePair<string, int>("09:00", 9));
  5. data.Add(new KeyValuePair<string, int>("10:00", 10));
  6. data.Add(new KeyValuePair<string, int>("11:00", 9));
  7. data.Add(new KeyValuePair<string, int>("12:00", 7));
  8. data.Add(new KeyValuePair<string, int>("13:00", 8));
  9. data.Add(new KeyValuePair<string, int>("14:00", 11));
  10. data.Add(new KeyValuePair<string, int>("15:00", 10));
  11. data.Add(new KeyValuePair<string, int>("16:00", 9));
  12. data.Add(new KeyValuePair<string, int>("17:00", 12));
  14. // Create chart
  15. LineChart chart = new LineChart();
  16. chart.DataSource = data;
  17. chart.DataXValueField = "Key";
  18. chart.DataYValueField = "value";
  20. /*
  21. Make a red line, 3 pixels wide, don't show a legend or line markers.
  22. */
  23. chart.Line.Color = System.Drawing.Color.Red;
  24. chart.Line.Width = 3;
  25. chart.ShowLegend = false;
  26. chart.ShowLineMarkers = false;
  28. // Bind data
  29. chart.DataBind();

That’s the chart set up. Now we need to add the new LineChart to the ChartControl we added earlier and force the control to redraw itself:

  1. myChartControl.Charts.Add(chart);
  2. myChartControl.RedrawChart();

There, that’s all we need to do. The graph this example outputs will look something like this:

A Sample Web Chart

A Sample Web Chart

So go ahead, download WebChart and start making some graphs! This article has shown only a small amount of what WebChart can do. In no time you’ll be presenting real data on the web in a friendly and free fashion.

Share and Enjoy:
  • Print
  • Digg
  • StumbleUpon
  • del.icio.us
  • Facebook
  • Yahoo! Buzz
  • Twitter
  • Google Bookmarks
  • email
  • LinkedIn
  • Technorati

Leave a Reply

Your email address will not be published. Required fields are marked *


This site uses Akismet to reduce spam. Learn how your comment data is processed.