Archives / 2008 / November
  • Microsoft Chart Controls for the .Net Framework

    I haven't been impressed by any new technology in a long time…until I downloaded and tried out the new Microsoft Chart Controls for the .Net Framework. It contains charts for both Forms and Asp.Net applications. It was easy to put this chart in an Asp.Net page:



    The Charts home page is here:

    If you want to try it, you need to download these:

    Chart Controls for .NET Framework

    Chart Controls Add-on for Visual Studio 2008

    Chart Controls for .NET Framework Documentation (optional)

    To build the chart, I started with an SQLDataSource connected to the NorthWind database. I used a custom SQL String to sum up the sales for each week (7 days) given a beginning OrderDate. For the OrderDate parameter, I used a Calendar control.

    <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
        ConnectionString="<%$ ConnectionStrings:NorthWind %>"
        SELECT OrderDate, Sum(Quantity * Unitprice) as OrdersTotal 
        FROM Orders, [Order Details] 
        WHERE Orders.OrderID = [Order Details].OrderID AND 
           OrderDate BETWEEN @OrderDate AND dateadd(day, 7, @OrderDate) 
        GROUP BY OrderDate  
        ORDER BY OrderDate">
                PropertyName="SelectedDate" />

    I dropped a GridView onto the form and fired it up to make sure the data connectivity was working. Clicking dates on the Calendar, causes the GridView to update immediately.

    Next, I dropped the Chart control from the Data tab of the ToolBox. I set the DataSourceID to be the same as the GridView's DataSourceID.

    The number of settings in the Chart control can be a bit overwhelming at first but if you dig around and drill down, you will eventually find what you need: With power and flexibility comes complexity.

    The final Asp markup code was surprisingly short:

    <asp:Chart ID="Chart1" runat="server" 
        BackSecondaryColor="128, 128, 255" 
        Width="400px" Height="300px"
        Style="top: 337px; left: 18px; position: absolute">
            <asp:Title Name="Title1" 
                Text="Weekly Sales by Day" 
                Font="Times New Roman, 12pt, style=Bold">
            <asp:Series Name="Series1"  
            <asp:ChartArea Name="ChartArea1">
                <Area3DStyle Enable3D="True" />
                <AxisY Title="Dollars">
                    <MinorGrid Enabled="True" />
                    <LabelStyle Format="{0:C}" />

    Of course, I should remove the .00 from the Y Axis, increase the font size of the Y Axis Title, change the format of the X Axis labels to show the day of week, etc. There are tons (and I mean tons) of features with this control….you could spend hours tweaking this thing. But it sure looks good.

    I hope you find this useful.

    Steve Wellens

    • Free Tools that I Use

      Here are tools I use on a regular basis. They have attributes I find essential:

      1. They are free.
      2. They do one thing and they do it well.

      XPathBuilder: Dynamically searches XML: Bubba Soft

      Expresso: Design and test regular expressions before you compile: Ultrapico

      WinMerge: Compares files and directories: WinMerge

      XVI32: A hex editor. With this I learned about the BOM: Christian Maas

      While these tools are great, they can really add to your productivity when you integrate them into Visual Studio. When you right click a file in the solution and use "Open With…" You can add these tools to the list of applications:

      I hope you find this useful.

      Steve Wellens