Getting Started with the ASP.NET 3.5 Chart Control

I think it’s safe to say that charting is a key part of many applications run on company Intranets.  People like to see data visually as opposed to viewing it in rows and columns sometimes (especially higher level managers).  While there are many 3rd party solutions available that provide charting solutions, you now have access to a very powerful solution from Microsoft that won’t set you back any $$ at all.  Translated…it’s free!  Sure, some of you may think that “free” products aren’t good but that’s not the case here.  The new Chart control can generate visually stunning 2D and 3D charts without a lot of work on your part.  In fact, there are over 25 different chart types that you can select for use in your ASP.NET or Windows Forms applications.

To get started using the Chart control you’ll need to download and install the following:

Once you’ve installed the chart controls you’ll see a System.Web.DataVisualization.dll assembly in the Global Assembly Cache.  Within the assembly’s System.Web.UI.DataVisualization.Charting namespace you’ll find the new ASP.NET Chart control.  Here’s a step by step look at getting started with the Chart control and binding it to data in a database using the good old SqlDataSource control.

1. Drag the Chart control from the VS 2008 Toolbox onto the design surface.  You’ll see the following in the designer.  Change the control’s Height and Width properties to 400 and 600 respectively in the Property window.

image

2. Click the Chart control’s smart tag and and bind it to a data source.  I’ll use a basic SqlDataSource for this example and display the number of customers in each country from the Northwind database:

image

3. Right-click on the Chart and select Properties from the menu.  Locate the ChartAreas property and click the ellipse (…) button.

4. A single chart area named ChartArea1 should show in the ChartArea Collection Editor window.  Expand Area3DStyle and set (Enable3D) to True.  This causes a 3D version of the chart to be generated which is cool if you’re trying to impress friends, family or your boss! You can change the perspective, rotation, plus more by tweaking properties.

image

5. If you want to change the background locate the Appearance section (still in the ChartArea Collection Editor) and choose a value for the BackColor and BackGradientStyle (if you want a gradient) properties:

image

6. Locate the Axes property and open the collection editor by clicking the ellipse (…) button.  Within the X axis locate the Title property and change it to Countries. Within the Y(Value) axis locate the Title property and change it to Number of Customers.

7. Close the property editor windows and locate the Chart control’s Series property.  Click the ellipse (…) button to open the property editor.

8. For the Series1 member locate the Data Source section and change the XValueMember to Country and YValueMembers to Column1 (or the name of the field returned from the query if you don’t use the one shown above in the SqlDataSource wizard).  This tells the Chart control which fields to bind to based on what it gets back from the SqlDataSource.

image

9. Save the page and run it to see the chart in action:

image

 

 

 

 

 

 

 

10. Notice that not all of the countries are shown on the X axis.  If you’d like to see all of them go back to the ChartAreas property, select Axes and locate the X axis, LabelStyle section.  Change the Angel property to –90 and the Interval to 1.  Doing that will cause the following output to be generated:

image

Here’s what the ASPX code looks like at this point:

<asp:Chart ID="Chart1" runat="server" Width="600" Height="400" DataSourceID="SqlDataSource1">
    <series>
        <asp:Series Name="Series1" XValueMember="Country" YValueMembers="Column1" 
            ChartType="Column">
        </asp:Series>
    </series>
    <chartareas>
        <asp:ChartArea BackColor="NavajoWhite" BackGradientStyle="LeftRight" 
            Name="ChartArea1" ShadowOffset="5">
            <AxisY Title="Number of Customers">
            </AxisY>
            <AxisX Title="Countries" IsLabelAutoFit="True">
                <LabelStyle Angle="-90" Interval="1" />
            </AxisX>
            <Area3DStyle Enable3D="True" />
        </asp:ChartArea>
    </chartareas>
</asp:Chart>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
    ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" 
    SelectCommand="SELECT COUNT(*),Country FROM Customers GROUP BY Country">
</asp:SqlDataSource>

You can show a lot of different types of charts by simply changing the Series ChartType to a different value.  Here are examples of Point, Pie and Line charts:

image
image 
image

 

 

There’s much, much more than can be done including adding multiple series (think of charts on top of charts).  Check out the Chart control samples located here to learn more!

image
Interested in .NET development training?  Visit Interface Technical Training’s website for more information about their courses. 

Published Tuesday, November 25, 2008 11:10 PM by dwahlin
Filed under: ,

Comments

# re: Getting Started with the ASP.NET 3.5 Chart Control

Wednesday, November 26, 2008 6:13 AM by Israr ahmed

After installing the latest SP1 and MSChart.exe and the VS2008 Charts addon i dont see any chart control in toolbox. How do i add it..

# re: Getting Started with the ASP.NET 3.5 Chart Control

Wednesday, November 26, 2008 10:37 AM by dwahlin

Israr,

Right-click in your toolbox and select choose items from the menu.  You should see it show up in the list and can check the checkbox next to it.

# re: Getting Started with the ASP.NET 3.5 Chart Control

Wednesday, November 26, 2008 12:09 PM by kdavis6

Dan, I liked your article, I started using this control.  I really like its look and ease to code.  If anyone is having troubles, I recommend to download the sample web site that comes with it.  It is very intuitive.  

Happy T-Day!

Aloha,

Kev

# re: Getting Started with the ASP.NET 3.5 Chart Control

Thursday, November 27, 2008 1:06 AM by dwahlin

Hey Kevin,

Glad you liked the article.  It's definitely a cool control. :-)

# re: Getting Started with the ASP.NET 3.5 Chart Control

Thursday, November 27, 2008 12:36 PM by dwahlin

Robert,

Nice post on using the Chart control with MVC.  Good stuff.

# re: Getting Started with the ASP.NET 3.5 Chart Control

Saturday, December 6, 2008 5:09 PM by CC

we are using the 3rd party controls..this sounds like pretty good promise from microsoft, this could be really helpful.

# re: Getting Started with the ASP.NET 3.5 Chart Control

Monday, December 22, 2008 4:00 PM by Parag

How to provide print functionality for the charts on webpage?

# re: Getting Started with the ASP.NET 3.5 Chart Control

Tuesday, December 23, 2008 12:13 AM by Sandeep

I started using the control. Wanted to know if the control has oncontextmenu property.