Lesson 2 - Bind Chart Series to Data

• May 22, 2020
• 4 minutes to read

This lesson explains how to manually add a series to a chart's diagram, and then bind this series to a datasource. If you wish to learn how to automatically generate a series from a datasource, proceed to Lesson 3 - Using a Series Template for an Auto-Created Series.

Note that although in this tutorial we will bind a chart to the PointCollection object, the ChartControl for Silverlight supports a wide range of data providers. For more information on data binding, refer to the Providing Data section.

To create a data-bound charting application, do the following.

• Steps 1-3. Create a New Project and Add a Chart Control
• Steps 4-5. Choose the Chart Type and Add a Series
• Steps 6-8. Bind the Chart to a Datasource
• Steps 9-13. Customize the Chart
• Result

Steps 1-3. Create a New Project and Add a Chart Control

1. Run MS Visual Studio 2010, 2012 or 2013.
2. Create a new Silverlight Application project.
3. Add the ChartControl component to your project, as you did in Lesson 1.

Steps 4-5. Choose the Chart Type and Add a Series

Through these steps we will select the diagram type and add the series of the BarSideBySideSeries2D type to the diagram.

4. Locate the ChartControl.Diagram property in the Properties window and set it to XYDiagram2D.

   

5. Next, locate the Diagram.Series property and click the ellipsis button to invoke the Collection Editor: Series. In this editor, add a BarSideBySideSeries2D object and click OK.

   

Steps 6-8. Bind the Chart to a Datasource

Now we need to bind our chart to a datasource. To accomplish this, do the following.

6. Add a PointCollection object to resources of a user control, and then create several points within this point collection, as shown below.

   XAML

   
   <UserControl.Resources>
       <ResourceDictionary>
           <PointCollection x:Key="ObjectCollection">
               <Point X="1" Y="8" />
               <Point X="2" Y="3" />
               <Point X="3" Y="10" />
               <Point X="4" Y="4" />
               <Point X="5" Y="6" />
               <Point X="6" Y="7" />
               <Point X="7" Y="3" />
               <Point X="8" Y="-2" />
               <Point X="9" Y="-4" />
               <Point X="10" Y="-8" />
               <Point X="11" Y="-6" />
               <Point X="12" Y="-2" />
               <Point X="13" Y="-5" />
           </PointCollection>
       </ResourceDictionary>
   </UserControl.Resources>
   

7. Then, assign this resource to the Series.DataSource property.

   XAML

   
   <dxc:XYDiagram2D.Series>
       <dxc:BarSideBySideSeries2D DataSource="{StaticResource ObjectCollection}" />
   </dxc:XYDiagram2D.Series>
   

8. Set the Series.ArgumentDataMember and Series.ValueDataMember properties to X and Y, correspondingly. These values define point fields which provide data for series arguments and values.

   XAML

   
   <dxc:XYDiagram2D.Series>
       <dxc:BarSideBySideSeries2D DataSource="{StaticResource ObjectCollection}"
                                  ArgumentDataMember="X" ValueDataMember="Y" />
   </dxc:XYDiagram2D.Series>
   

Steps 9-13. Customize the Chart

In these steps we will learn how to customize our chart: create a legend, change the style of a series, etc.

Adjust the legend

9. Create a legend for the chart. To do this, locate the ChartControl.Legend property and select the Legend item in the drop-down list.

   

10. By default, the legend is shown in the top-right corner of the chart. To change the legend position, expand the ChartControl.Legend property, and set its Legend.HorizontalPosition property to Center, Legend.VerticalPosition to TopOutside, Legend.Orientation to Horizontal.

11. To display both the argument and value in the legend, it is necessary to create a PointOptions object using the Series.LegendPointOptions property and set the PointOptions.PointView property to ArgumentAndValues.

    

Adjust series-view specific options

12. For the created series, it is possible to paint each bar series in different colors. This can be done by setting the XYSeries.ColorEach property of the BarSideBySideSeries2D object to true.

    

Adjust the crosshair cursor options

13. Crosshair cursor labels and the crosshair argument line are displayed on a chart by default. You can disable (enable) a crosshair cursor at the chart level (using the ChartControl.CrosshairEnabled property) and at the series level (using the XYSeries2D.CrosshairEnabled property).

    To show crosshair cursor value lines and crosshair cursor axis labels, set the CrosshairOptions.ShowValueLine, CrosshairOptions.ShowArgumentLabels and CrosshairOptions.ShowValueLabels properties to true.

Result

The final XAML is shown below.

XAML

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts" x:Class="SilverlightApplication2.MainPage"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <UserControl.Resources>
        <ResourceDictionary>
            <PointCollection x:Key="ObjectCollection">
                <Point X="1" Y="8" />
                <Point X="2" Y="3" />
                <Point X="3" Y="10" />
                <Point X="4" Y="4" />
                <Point X="5" Y="6" />
                <Point X="6" Y="7" />
                <Point X="7" Y="3" />
                <Point X="8" Y="-2" />
                <Point X="9" Y="-4" />
                <Point X="10" Y="-8" />
                <Point X="11" Y="-6" />
                <Point X="12" Y="-2" />
                <Point X="13" Y="-5" />
            </PointCollection>
        </ResourceDictionary>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">
        <dxc:ChartControl>
            <dxc:ChartControl.CrosshairOptions>
                <dxc:CrosshairOptions ShowValueLabels="True" ShowValueLine="True" ShowArgumentLabels="True"/>
            </dxc:ChartControl.CrosshairOptions>
            <dxc:ChartControl.Legend>
                <dxc:Legend HorizontalPosition="Center" VerticalPosition="TopOutside" Orientation="Horizontal" />
            </dxc:ChartControl.Legend>
            <dxc:XYDiagram2D>
                <dxc:BarSideBySideSeries2D DataSource="{StaticResource ObjectCollection}" 
                                            ArgumentDataMember="X" ValueDataMember="Y" ColorEach="True">
                    <dxc:BarSideBySideSeries2D.LegendPointOptions>
                        <dxc:PointOptions PointView="ArgumentAndValues"/>
                    </dxc:BarSideBySideSeries2D.LegendPointOptions>
                </dxc:BarSideBySideSeries2D>
            </dxc:XYDiagram2D>
        </dxc:ChartControl>
    </Grid>
</UserControl>

Run the project. The following image shows the resulting chart at runtime.

TIP

A complete sample project is available in the DevExpress Code Examples database at http://www.devexpress.com/example=E3456.