Chart Controls in .net

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. The Charts home page is here: http://code.msdn.microsoft.com/mschart

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

Chart Controls for .NET Framework
Chart Controls Add-on for Visual Studio 2008
Chart Controls for .NET Framework Documentation (optional)

To try the control, 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.


ConnectionString="<%$ ConnectionStrings:NorthWind %>"
SelectCommand="
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">

ControlID="Calendar1"
DefaultValue="7/30/1996"
Name="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:
BackColor="LightSkyBlue"
BackGradientStyle="VerticalCenter"
BackSecondaryColor="128, 128, 255"
BorderlineColor="Black"
BorderlineDashStyle="Solid"
BorderlineWidth="3"
DataSourceID="SqlDataSource1"
Width="400px" Height="300px"
Style="top: 337px; left: 18px; position: absolute">

Text="Weekly Sales by Day"
Font="Times New Roman, 12pt, style=Bold">



XValueMember="OrderDate"
YValueMembers="OrdersTotal">












Here is the resultant image:
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.