Creating Dynamic Data-Driven Charts in .NET is Fun and Easy

Posted Posted 2/22/2010 1:44:50 AM

OK, that's a lie. Creating Dynamic Data-Driven Charts in .NET is tedious, poorly documented, and a pain in the ass. But then you figure it out once and it's really easy the second time you do it.
Microsoft demos and videos tell me that Charting is built into .NET 4.0. Well, I'm running the VS2010 RC and I don't see it, so Charting is still a seperate assembly for now. So here's how you do it.


  1. Download Microsoft Chart Controls for .NET 3.5
  2. Install it (mscharts.exe) onto your Dev workstation. You do not have to install it on the target webserver or client machine.
  3. Add these items to your Visual Studio 2008/2010 Toolbox:
    • System.Web.UI.DataVisualization.Charting
    • System.Windows.Forms.DataVisualization.Charting
  4. Webforms: Drag the Web one's Chart object onto your code block. Winforms guys, you're on your own from here.
  5. Set some properties. You'll need Chart.ImageStorageMode, Chart.Series, Chart.ChartAreas, and Chart.Legends. My working example looks like this:
        <asp:Chart ID="cTrafficByMonth" runat="server" ImageStorageMode="UseImageLocation" ImageLocation="Graph" Width="500" TextAntiAliasingQuality="High" AlternateText="Traffic by Month" AntiAliasing="All" >
            <Series>
                <asp:Series Name="Humans" ChartType="Line" Color="Red" ToolTip="Human traffic" />
                <asp:Series Name="Spiders" ChartType="Line" Color="DarkBlue" ToolTip="Spider traffic" />
                <asp:Series Name="Total" ChartType="Line" Color="Green" ToolTip="Total traffic" />
            </Series>
            <ChartAreas>
                <asp:ChartArea Name="ChartArea1">
                    <AxisY Title="Distinct Sessions" />
                    <AxisX LabelAutoFitStyle="LabelsAngleStep90" />
                </asp:ChartArea>
            </ChartAreas>
            <Legends>
                <asp:Legend Docking="Bottom" Alignment="Center" />
            </Legends>
        </asp:Chart>
     

    And of course you'll need to put some actual data into your chart. You'll need XYZ Coordinates, where XY appear on the chart and Z is your axis number (which I arbitrarily decided equals a Z coordinate). These must correspond with the <asp:Series... /> lines you added in your ASPX.
      using (DataTable dt = utils.GetMonthlyHits()) {
       dgHits.DataSource = dt;
       dgHits.DataBind();

       for (int i = 0; i < dt.Rows.Count; i++) {
           cTrafficByMonth.Compression = 100;
           cTrafficByMonth.Series["Spiders"].Points.AddXY(i, dt.Rows[i]["Spiders"].ToString());
           cTrafficByMonth.Series["Humans"].Points.AddXY(i, dt.Rows[i]["Humans"].ToString());
           cTrafficByMonth.Series["Total"].Points.AddXY(i, dt.Rows[i]["Total Hits"].ToString());
        cTrafficByMonth.Series[0].Points[i].AxisLabel = DateTime.Parse(dt.Rows[i][0].ToString()).ToString("MM/yy"); }
     



Obviously, alter to fit your requirements. On that note, the Stats page now has its first realtime graph.



Project Codename MV8
Copyright © 2010 Kevin Connolly. All rights reserved.
Your request ate 44 of my milliseconds.