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…
-
<%@ Register Assembly="WebChart" Namespace="WebChart"
-
TagPrefix="Web" %>
-
<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:
-
// Create Data
-
List<KeyValuePair<string, int>> data =
-
new List<KeyValuePair<string, int>>();
-
data.Add(new KeyValuePair<string, int>("09:00", 9));
-
data.Add(new KeyValuePair<string, int>("10:00", 10));
-
data.Add(new KeyValuePair<string, int>("11:00", 9));
-
data.Add(new KeyValuePair<string, int>("12:00", 7));
-
data.Add(new KeyValuePair<string, int>("13:00", 8));
-
data.Add(new KeyValuePair<string, int>("14:00", 11));
-
data.Add(new KeyValuePair<string, int>("15:00", 10));
-
data.Add(new KeyValuePair<string, int>("16:00", 9));
-
data.Add(new KeyValuePair<string, int>("17:00", 12));
-
-
// Create chart
-
LineChart chart = new LineChart();
-
chart.DataSource = data;
-
chart.DataXValueField = "Key";
-
chart.DataYValueField = "value";
-
-
/*
-
Make a red line, 3 pixels wide, don't show a legend or line markers.
-
*/
-
chart.Line.Color = System.Drawing.Color.Red;
-
chart.Line.Width = 3;
-
chart.ShowLegend = false;
-
chart.ShowLineMarkers = false;
-
-
// Bind data
-
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:
-
myChartControl.Charts.Add(chart);
-
myChartControl.RedrawChart();
There, that’s all we need to do. The graph this example outputs will look something like this:
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.
