Lesson 3 - Using a Series Template for an Auto-Created Series

• May 22, 2020
• 6 minutes to read

This lesson demonstrates how to add a series template to a chart's diagram, and then automatically bind this template to a datasource. If you wish to learn how to manually generate series from a datasource, refer to Lesson 2 - Bind Chart Series to Data.

Note that although in this tutorial we will bind a chart to the GSP.xml datasource, DXCharts 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-4. Create a New Project and Add a Chart Control
• Steps 5-6. Choose the Chart Type and Add a Series Template
• Steps 7-9. Connect to a Datasource
• Steps 10-13. Bind a Chart to a Datasource
• Steps 14-17. Customize the Chart
• Result

Steps 1-4. 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 (see steps 1-4).
4. Give the ChartControl's name as "chartControl" using the Name property.

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

In these steps we will select the chart type and add the series template of the BarSideBySideSeries2D type to the diagram.

To accomplish this, do the following:

5. Locate the ChartControl.Diagram property in the Properties window and set the diagram type to XYDiagram2D.

   

6. Next, locate the Diagram.SeriesTemplate property and set it to BarSideBySideSeries2D.

   

Steps 7-9. Connect to a Datasource

You need to connect the ChartControl to the GSP database. The chart will represent this table as bars. To do this:

7. Copy the GSP.xml file to the directory of your project. By default, this file is placed in C:\Users\Public\Documents\DevExpress Demos 14.2\Components\Silverlight\CS\ChartsDemo\Data\GSP.xml

8. Include the GSP.xml file into the project.

   

   NOTE

   If GSP.xml is not displayed in the Solution Explorer, select Show All Files from the Project menu or click Show All Files on the Solution Explorer toolbar.

9. To embed the GSP.xml file into the application's resources, set its Build Action property to Resource.

   

Steps 10-13. Bind a Chart to a Datasource

10. Now you need to populate the underlying dataset with data and bind it to a series template. To do this, insert the following code.

    C#

    
    using System;
    using System.Collections.Generic;
    using System.Globalization;
    using System.Windows.Controls;
    using System.Xml.Linq;
    
    namespace SilverlightApplication3 {
        public partial class MainPage : UserControl {
    
            public MainPage() {
                InitializeComponent();
                chartControl.DataSource = CreateDataSource();
            }
    
            List<GSP> CreateDataSource() {
                XDocument document = DataLoader.LoadXmlFromResources("/GSP.xml");
                List<GSP> result = new List<GSP>();
                if (document != null) {
                    foreach (XElement element in document.Element("GSPs").Elements()) {
                        string region = element.Element("Region").Value;
                        string year = element.Element("Year").Value;
                        double product = Convert.ToDouble(element.Element("Product").Value, CultureInfo.InvariantCulture);
                        result.Add(new GSP(region, year, product));
                    }
                }
                return result;
            }
    
            public static class DataLoader {
                public static XDocument LoadXmlFromResources(string fileName) {
                    try {
                        return XDocument.Load("/SilverlightApplication3;component" + fileName);
                    }
                    catch {
                        return null;
                    }
                }
            }
    
            public class GSP {
                readonly string region;
                readonly string year;
                readonly double product;
    
                public string Region { get { return region; } }
                public string Year { get { return year; } }
                public double Product { get { return product; } }
    
                public GSP(string region, string year, double product) {
                    this.region = region;
                    this.year = year;
                    this.product = product;
                }
            }
        }
    }
    

    VB.NET

    
    Imports Microsoft.VisualBasic
    Imports System
    Imports System.Collections.Generic
    Imports System.Windows.Controls
    Imports System.Globalization
    Imports System.Xml.Linq
    
    Namespace SilverlightApplication3
        Partial Public Class MainPage
            Inherits UserControl
    
            Public Sub New()
                InitializeComponent()
                chartControl.DataSource = CreateDataSource()
            End Sub
    
            Private Function CreateDataSource() As List(Of GSP)
                Dim document As XDocument = DataLoader.LoadXmlFromResources("/GSP.xml")
                Dim result As New List(Of GSP)()
                If document IsNot Nothing Then
                    For Each element As XElement In document.Element("GSPs").Elements()
                        Dim region As String = element.Element("Region").Value
                        Dim year As String = element.Element("Year").Value
                        Dim product As Double = Convert.ToDouble(element.Element("Product").Value, _
                            CultureInfo.InvariantCulture)
                        result.Add(New GSP(region, year, product))
                    Next element
                End If
                Return result
            End Function
    
            Public NotInheritable Class DataLoader
                Private Sub New()
                End Sub
                Public Shared Function LoadXmlFromResources(ByVal fileName As String) As XDocument
                    Try
                        Return XDocument.Load("/SilverlightApplication3;component" & fileName)
                    Catch
                        Return Nothing
                    End Try
                End Function
            End Class
    
            Public Class GSP
                Private ReadOnly region_Renamed As String
                Private ReadOnly year_Renamed As String
                Private ReadOnly product_Renamed As Double
    
                Public ReadOnly Property Region() As String
                    Get
                        Return region_Renamed
                    End Get
                End Property
                Public ReadOnly Property Year() As String
                    Get
                        Return year_Renamed
                    End Get
                End Property
                Public ReadOnly Property Product() As Double
                    Get
                        Return product_Renamed
                    End Get
                End Property
    
                Public Sub New(ByVal region As String, ByVal year As String, ByVal product As Double)
                    Me.region_Renamed = region
                    Me.year_Renamed = year
                    Me.product_Renamed = product
                End Sub
            End Class
        End Class
    
    End Namespace
    

11. To define the name of a data column where a new series will be created, locate the Diagram.SeriesDataMember property of the XYDiagram2D object and set its value to Year.

    

12. To set the name of the data field which contains the series template points' argument, locate the BarSideBySideSeries2D object returned by the Diagram.SeriesTemplate property, and set its Series.ArgumentDataMember property to Region.

    

13. To specify the name of the data field which contains the series template points' value, set the Series.ValueDataMember property to Product.

    

Steps 14-17. Customize the Chart

With these steps we will learn how to customize our chart: format numbers displayed along axis labels, specify the crosshair label pattern, show a legend and adjust crosshair cursor options.

Adjust format numbers displayed in axis labels

14. In this step, let's specify the representation format of numeric values in axis labels. To do this, locate the PointOptions.ValueNumericOptions property for the BarSideBySideSeries2D object, and set the NumericOptions.Format property to FixedPoint.

    

Adjust the crosshair label pattern

15. Let's specify a pattern that will determine the displayed text inside the crosshair cursor labels for the BarSideBySideSeries2D type. To do this, set the XYSeries2D.CrosshairLabelPattern property to {S} {A}:{V:F2}.

    

Create the legend

16. Now, we'll create a legend for our chart. To do this, locate the ChartControl.Legend property and select the Legend item in the drop-down list.

    

Adjust the crosshair cursor options

17. 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="SilverlightApplication3.MainPage"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
        <dxc:ChartControl Name="chartControl">
            <dxc:ChartControl.CrosshairOptions>
                <dxc:CrosshairOptions ShowArgumentLabels="True" ShowValueLabels="True" ShowValueLine="True"/>
            </dxc:ChartControl.CrosshairOptions>
            <dxc:ChartControl.Legend>
                <dxc:Legend/>
            </dxc:ChartControl.Legend>
            <dxc:XYDiagram2D SeriesDataMember="Year">
                <dxc:XYDiagram2D.SeriesTemplate>
                    <dxc:BarSideBySideSeries2D ArgumentDataMember="Region" ValueDataMember="Product" CrosshairLabelPattern="{}{S} {A}:{V:F2}">
                        <dxc:BarSideBySideSeries2D.PointOptions>
                            <dxc:PointOptions>
                                <dxc:PointOptions.ValueNumericOptions>
                                    <dxc:NumericOptions Format="FixedPoint"/>
                                </dxc:PointOptions.ValueNumericOptions>
                            </dxc:PointOptions>
                        </dxc:BarSideBySideSeries2D.PointOptions>
                    </dxc:BarSideBySideSeries2D>
                </dxc:XYDiagram2D.SeriesTemplate>
            </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=E3458.