Archives / 2008 / November
  • 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.


    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">
            <asp:Series Name="Series1" XValueMember="Country" YValueMembers="Column1" 
            <asp:ChartArea BackColor="NavajoWhite" BackGradientStyle="LeftRight" 
                Name="ChartArea1" ShadowOffset="5">
                <AxisY Title="Number of Customers">
                <AxisX Title="Countries" IsLabelAutoFit="True">
                    <LabelStyle Angle="-90" Interval="1" />
                <Area3DStyle Enable3D="True" />
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
        ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" 
        SelectCommand="SELECT COUNT(*),Country FROM Customers GROUP BY Country">

    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!

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


  • Silverlight 2 Development Workshop Code


    I’m in Las Vegas this week at the DevConnections conference (I know….rough…but someone had to do it).  I just wrapped up the Silverlight 2 development workshop and promised that I’d post the code samples (see the link below).  Thanks to everyone that attended….I had a lot of fun and met a lot of great people building (or starting to build) Silverlight 2 applications. 

    Silverlight 2 Code Samples

    If you missed the workshop but are interested in Silverlight 2 development come visit me in Phoenix at Interface Technical Training.  We just started offering Silverlight 2 programming classes with the first one running in December.


  • Using Styles to Define Silverlight 2 Control Templates

    Silverlight 2 allows styles to be defined to prevent duplication of attributes across controls in a XAML file. In a previous post I demonstrated how styles could be defined and used. As a review, here's an example of defining a style named ButtonStyle that targets a Button control:

    <Style x:Key="ButtonStyle" TargetType="Button">
        <Setter Property="FontFamily" Value="Arial" />
        <Setter Property="FontWeight" Value="Bold" />
        <Setter Property="Width" Value="100" />
        <Setter Property="Height" Value="25" />
        <Setter Property="Margin" Value="5,10,0,10" />

    The style can be applied to one or more buttons using the following StaticResource syntax:

    <Button x:Name="btnSubmit" Style="{StaticResource ButtonStyle}" />
    <Button x:Name="btnCancel" Style="{StaticResource ButtonStyle}" />

    In addition to defining control property values, styles can also be used to define control templates. This is useful any time you'd like to customize a control and make it look and feel different than it looks out of the box. In this post you'll see how a standard rectangular Button control can be made into a rounded button. Here’s an example of what the standard Silverlight 2 Button control looks like:


    By using control templates you can do virtually anything you'd like to a control. Here’s an example of a Button that has a custom style and control template defined to give it a flat look with rounded corners:


    Control templates can be defined within a control's Resources section, within a UserControl's Resources section, or within the Application.Resources section of App.xaml. Defining a template in App.xaml is recommended anytime you'd like to re-use a template across multiple controls in an application.  Here's an example of a style named ButtonFlatStyle that defines a custom control template for a Button:

    <Style x:Key="ButtonFlatStyle" TargetType="Button">
        <Setter Property="Width" Value="100" />
        <Setter Property="Template">
                <ControlTemplate TargetType="Button">                        
                    <Border Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"
                            Background="{TemplateBinding Background}" 
                            CornerRadius="8" BorderBrush="Black" BorderThickness="1">
                         <ContentPresenter Content="{TemplateBinding Content}" 
    ="Center" VerticalAlignment="Center"/> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style>

    Looking through the ButtonFlatStyle style you'll see that it first defines a width of 100. It then defines a Template property with an associated value. Although this is a very simple example of a control template, you can see that a template is nothing more than a way to define custom control rendering. More complex templates may use many more controls, styles, bindings and even include animations using Silverlight's Visual State Manager (a topic that I'll save for a later article).

    Control templates are defined using the ControlTemplate element which acts as a container for template controls and defines the target control type of the template by using the TargetType attribute. This example targets a Button control. The ControlTemplate element shown here includes a Border child element which is used to generate rounded corners using the CornerRadius property.

    Notice that a special TemplateBinding syntax appears within several of the Border element's attribute values. What's a TemplateBinding and why would you use it? It's nothing more than a way to allow control properties defined by a developer to be used in the control template. In other words, if a developer defines a Button control that uses the ButtonFlatStyle style, any Width, Height or Background values that they set on the control will automatically be used within the template. This allows the control template to take developer customizations into account.

    Within the Border control you'll see a ContentPresenter XAML element. This element marks where the control's content (such as a Button's Content attribute value) will be placed within the template. It literally handles "presenting" the content within the template. The Content="{TemplateBinding Content}" attribute binds the target control's Content property to the ContentPresenter's Content property. To clarify this more, consider the following XAML code:

    <Button x:Name="btnClear" Content="Clear" 
      Background="LightGray" Style="{StaticResource ButtonFlatStyle}" />

    The ContentPresenter element defined within the template will render the text "Clear" within the control template's Border element. If a control's Content property defines more complex content it would also be applied using the ContentPresenter. Here's an example of defining complex content within a Button control:

    <Button x:Name="btnClear2" Click="btnSubmit_Click" Background="LightGray"
      Style="{StaticResource ButtonFlatStyle}">
            <StackPanel Orientation="Horizontal">
                <Image Source="/red_x_mark.jpg" Width="20" Height="19" 
                 VerticalAlignment="Center" />
                <TextBlock Margin="5" Text="Clear" Foreground="Navy" 
                 VerticalAlignment="Center" />

    In this example the content consists of additional controls rather than only basic text. Here’s an example of how the custom content would be rendered by the control template:


    Control templates allow you to take over the look and feel of a control and customize how it's rendered in a Silverlight 2 application. By defining control templates within styles you can easily re-use a template across multiple controls.


comments powered by Disqus