Channels ▼
RSS

.NET

Getting Started with the ASP.NET 3.5 Chart Control


Dan Wahlin (Microsoft Most Valuable Professional for ASP.NET and XML Web Services) is a .NET development instructor and architecture consultant at Interface Technical Training. Dan founded the XML for ASP.NET Developers site, which focuses on using ASP.NET, XML, Silverlight, AJAX, and Web Services on .NET and runs smartwebcontrols.com. Dan has co-authored/authored several different books on .NET, including ASP.NET 2.0 MVP Hacks, Professional ASP.NET AJAX, XML for ASP.NET Developers and is currently working on a new book on Silverlight 2. Dan blogs at http://weblogs.asp.net/dwahlin.


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 third-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.

  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:

  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.

  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:

  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.

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

  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:

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:

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!


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 

Comments:

Video