Load Chart Data

• May 03, 2022
• 8 minutes to read

This document describes different approaches that allow you to load data to a chart.

Available Data Types

The type of data point arguments and values loaded to a chart should be compatible with supported scale types. The following scale types are available:

Numeric

Available for arguments and values. Displays data values as numbers. For example, 27 or 3.14.

Date-Time

Available for arguments and values. Displays data values as instants in time. For example, November, 10 or 2020/02/14 7:00:00.

Qualitative

Available for arguments. Displays data values as string categories. For example, VIII or Company A.

The Chart automatically analyzes and determines the type of data source values. You can use the following properties to explicitly specify the type of used values and to avoid unnecessary type casting procedures in internal chart algorithms; these properties can also be used if you want to use a scale type that differs from the one determined by the chart:

• PointDataCollection.ArgumentScaleType, DataSource.ArgumentScaleType – Use these properties to notify the chart about which argument type is used.
• PointDataCollection.ValueScaleType, DataSource.ValueScaleType – Use these properties to notify the chart on what value type is used.

The default value for these properties is ScaleType.Auto.

Explicitly Add All Data Points to the Series

You can explicitly create series points, and add them directly to a chart’s point collection. Follow the steps below to do this:

1. Initialize the Series.Data, PieSeries.Data, or FunnelSeries.Data property with a PointDataCollection object.

2. Add a PointData object to the point data collection.

3. Specify the point’s PointDataBase.Argument and PointData.Value properties.

4. Repeat steps 2-3 to add other points.

XAML

<Charts:PieChart>
    <Charts:PieChart.Series>
        <Charts:PieSeries>
            <Charts:PieSeries.Data>
                <Charts:PointDataCollection ArgumentScaleType="Qualitative"
                                            ValueScaleType="Numerical">
                    <Charts:PointData Argument='A' Value="10"/>
                    <Charts:PointData Argument='B' Value="15"/>
                    <Charts:PointData Argument='C' Value="20"/>
                </Charts:PointDataCollection>
            </Charts:PieSeries.Data>
        </Charts:PieSeries>
    </Charts:PieChart.Series>
</Charts:PieChart>

Populate a Series with Data from a Data Source

You can create a series and bind it to a data source. To do so, follow the steps below:

1. Initialize the Series.Data, PieSeries.Data, or FunnelSeries.Data property with a DataSource object.

2. Define the DataSource.PointSource property to specify the name of a point collection.

3. Use the DataSource.ArgumentDataMember and DataSource.ValueDataMember properties to specify data members that store arguments and values.

The following example creates a pie series and binds it to a data source (a List<T> of objects):

XAML

<Grid.DataContext>
    <local:ChartViewModel/>
</Grid.DataContext>
<Charts:PieChart>
    <Charts:PieChart.Series>
        <Charts:PieSeries>
            <Charts:PieSeries.Data>
                <Charts:DataSource PointSource="{Binding DataPoints}" 
                                   ArgumentDataMember="Product"
                                   ArgumentScaleType="Qualitative"
                                   ValueDataMember="Income"
                                   ValueScaleType="Numerical"/>
            </Charts:PieSeries.Data>
        </Charts:PieSeries>
    </Charts:PieChart.Series>
    <Charts:PieSeries.View>
        <Charts:PieSeriesView .../>
    </Charts:PieSeries.View>
</Charts:PieChart>

C#

using DevExpress.Mvvm;
using Microsoft.UI.Xaml;
using System.Collections.Generic;

namespace PieChartSample {
    public sealed partial class MainWindow : Window {
        public MainWindow() {
            this.InitializeComponent();
        }
    }
    public class DataPoint {
        public string Product { get; set; }
        public double Income { get; set; }
    }
    public class ChartViewModel : ViewModelBase {
        public ChartViewModel() {
            List<DataPoint> dataPoints = new List<DataPoint> {
                new DataPoint() { Product = "Camera", Income = 78 },
                new DataPoint() { Product = "Flash", Income = 92 },
                new DataPoint() { Product = "Smartphone", Income = 43 },
                new DataPoint() { Product = "Tripod", Income = 98 },
                new DataPoint() { Product = "Mobile Phone", Income = 70 },
                new DataPoint() { Product = "Smart Watch", Income = 98 },
                new DataPoint() { Product = "Laptop", Income = 85 },
                new DataPoint() { Product = "Tablet", Income = 99 },
                new DataPoint() { Product = "Headphone", Income = 94 }
            };
            DataPoints = dataPoints;
        }
        public List<DataPoint> DataPoints { get; }
    }
}

VB.NET

Imports DevExpress.Mvvm
Imports Microsoft.UI.Xaml
Imports System.Collections.Generic

Namespace PieChartSample
    Public NotInheritable Partial Class MainWindow
        Inherits Window

        Public Sub New()
            Me.InitializeComponent()
        End Sub
    End Class

    Public Class DataPoint
        Public Property Product As String
        Public Property Income As Double
    End Class

    Public Class ChartViewModel
        Inherits ViewModelBase

        Public Sub New()
            Dim dataPoints As List(Of DataPoint) = New List(Of DataPoint) From {
                New DataPoint() With {
                    .Product = "Camera",
                    .Income = 78
                },
                New DataPoint() With {
                    .Product = "Flash",
                    .Income = 92
                },
                New DataPoint() With {
                    .Product = "Smartphone",
                    .Income = 43
                },
                New DataPoint() With {
                    .Product = "Tripod",
                    .Income = 98
                },
                New DataPoint() With {
                    .Product = "Mobile Phone",
                    .Income = 70
                },
                New DataPoint() With {
                    .Product = "Smart Watch",
                    .Income = 98
                },
                New DataPoint() With {
                    .Product = "Laptop",
                    .Income = 85
                },
                New DataPoint() With {
                    .Product = "Tablet",
                    .Income = 99
                },
                New DataPoint() With {
                    .Product = "Headphone",
                    .Income = 94
                }
            }
            Me.DataPoints = dataPoints
        End Sub

        Public ReadOnly Property DataPoints As List(Of DataPoint)
    End Class
End Namespace

Generate Series from a Source (MVVM)

Use the ChartBase.SeriesSource property to bind a chart to a collection of series view models when your application uses the MVVM (Model-View-ViewModel) architecture. Then, define the ChartBase.SeriesItemTemplate and ChartBase.SeriesItemTemplateSelector properties to specify how the chart converts view model objects to series.

The following code uses the MVVM architecture to populate the Chart Control with series:

XAML

<Window
    x:Class="StackedSeriesChart.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:StackedSeriesChart"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Charts="using:DevExpress.WinUI.Charts"
    mc:Ignorable="d">
    <Grid>
        <Charts:CartesianChart ToolTipEnabled="True"
                               SeriesSource="{x:Bind ViewModel.SeriesData}">
            <Charts:CartesianChart.SeriesItemTemplate>
                <DataTemplate x:DataType="local:SeriesViewModel">
                    <Charts:Series DisplayName="{x:Bind Name}">
                        <Charts:Series.Data>
                            <Charts:DataSource PointSource="{x:Bind DataPoints}"
                                               ArgumentDataMember="Argument"
                                               ValueDataMember="Value"/>
                        </Charts:Series.Data>
                        <Charts:Series.View>
                            <Charts:BarSeriesView StackedMode="FullStacked"
                                                  StackedGroup="{x:Bind Group}">
                            </Charts:BarSeriesView>
                        </Charts:Series.View>
                    </Charts:Series>
                </DataTemplate>
            </Charts:CartesianChart.SeriesItemTemplate>
            <Charts:CartesianChart.AxisY>
                <Charts:AxisY LabelPattern="{}{V:p0}"/>
            </Charts:CartesianChart.AxisY>
            <Charts:CartesianChart.Legend>
                <Charts:Legend/>
            </Charts:CartesianChart.Legend>
        </Charts:CartesianChart>
    </Grid>
</Window>

C#

using DevExpress.Mvvm;
using Microsoft.UI.Xaml;
using System.Collections.Generic;

namespace StackedSeriesChart {

    public sealed partial class MainWindow : Window {
        public ChartViewModel ViewModel { get; } = new ChartViewModel();
        public MainWindow() {
            this.InitializeComponent();
        }
    }
    public class ChartViewModel : ViewModelBase {
        public List<SeriesViewModel> SeriesData { get; }
        public ChartViewModel() {
            List<SeriesViewModel> seriesData = new List<SeriesViewModel> {
                new SeriesViewModel{ Name = "Canada", Group = 0,
                    DataPoints = new List<DataPoint> {
                        new DataPoint{ Argument = "March", Value = 125.45 },
                        new DataPoint{ Argument = "April", Value = 144.3 },
                        new DataPoint{ Argument = "May", Value = 133.54 }
                    }
                },
                new SeriesViewModel{ Name = "USA", Group = 0,
                    DataPoints = new List<DataPoint> {
                        new DataPoint{ Argument = "March", Value = 122.36 },
                        new DataPoint{ Argument = "April", Value = 126.87 },
                        new DataPoint{ Argument = "May", Value = 128.33 }
                    }
                },
                new SeriesViewModel{ Name = "France", Group = 1,
                    DataPoints = new List<DataPoint> {
                        new DataPoint{ Argument = "March", Value = 56.32 },
                        new DataPoint{ Argument = "April", Value = 58.63 },
                        new DataPoint{ Argument = "May", Value = 59.14 }
                    }
                },
                new SeriesViewModel{ Name = "Germany", Group = 1,
                    DataPoints = new List<DataPoint> {
                        new DataPoint{ Argument = "March", Value = 62.12 },
                        new DataPoint{ Argument = "April", Value = 69.123 },
                        new DataPoint{ Argument = "May", Value = 75.11 }
                    }
                },
                new SeriesViewModel{ Name = "Austria", Group = 1,
                    DataPoints = new List<DataPoint> {
                        new DataPoint{ Argument = "March", Value = 42.852 },
                        new DataPoint{ Argument = "April", Value = 41.77 },
                        new DataPoint{ Argument = "May", Value = 39.25 }
                    }
                }
            };
            SeriesData = seriesData;
        }
    }
    public class SeriesViewModel {
        public int Group { get; set; }
        public string Name { get; set; }
        public List<DataPoint> DataPoints { get; set; }
    }
    public class DataPoint {
        public string Argument { get; set; }
        public double Value { get; set; }

    }
}

VB.NET

Imports DevExpress.Mvvm
Imports Microsoft.UI.Xaml
Imports System.Collections.Generic

Namespace StackedSeriesChart
    Public NotInheritable Partial Class MainWindow
        Inherits Window

        Public ReadOnly Property ViewModel As ChartViewModel = New ChartViewModel()

        Public Sub New()
            Me.InitializeComponent()
        End Sub
    End Class

    Public Class ChartViewModel
        Inherits ViewModelBase

        Public ReadOnly Property SeriesData As List(Of SeriesViewModel)

        Public Sub New()
            Dim seriesData As List(Of SeriesViewModel) = New List(Of SeriesViewModel) From {
                New SeriesViewModel With {
                    .Name = "Canada",
                    .Group = 0,
                    .DataPoints = New List(Of DataPoint) From {
                        New DataPoint With {
                            .Argument = "March",
                            .Value = 125.45
                        },
                        New DataPoint With {
                            .Argument = "April",
                            .Value = 144.3
                        },
                        New DataPoint With {
                            .Argument = "May",
                            .Value = 133.54
                        }
                    }
                },
                New SeriesViewModel With {
                    .Name = "USA",
                    .Group = 0,
                    .DataPoints = New List(Of DataPoint) From {
                        New DataPoint With {
                            .Argument = "March",
                            .Value = 122.36
                        },
                        New DataPoint With {
                            .Argument = "April",
                            .Value = 126.87
                        },
                        New DataPoint With {
                            .Argument = "May",
                            .Value = 128.33
                        }
                    }
                },
                New SeriesViewModel With {
                    .Name = "France",
                    .Group = 1,
                    .DataPoints = New List(Of DataPoint) From {
                        New DataPoint With {
                            .Argument = "March",
                            .Value = 56.32
                        },
                        New DataPoint With {
                            .Argument = "April",
                            .Value = 58.63
                        },
                        New DataPoint With {
                            .Argument = "May",
                            .Value = 59.14
                        }
                    }
                },
                New SeriesViewModel With {
                    .Name = "Germany",
                    .Group = 1,
                    .DataPoints = New List(Of DataPoint) From {
                        New DataPoint With {
                            .Argument = "March",
                            .Value = 62.12
                        },
                        New DataPoint With {
                            .Argument = "April",
                            .Value = 69.123
                        },
                        New DataPoint With {
                            .Argument = "May",
                            .Value = 75.11
                        }
                    }
                },
                New SeriesViewModel With {
                    .Name = "Austria",
                    .Group = 1,
                    .DataPoints = New List(Of DataPoint) From {
                        New DataPoint With {
                            .Argument = "March",
                            .Value = 42.852
                        },
                        New DataPoint With {
                            .Argument = "April",
                            .Value = 41.77
                        },
                        New DataPoint With {
                            .Argument = "May",
                            .Value = 39.25
                        }
                    }
                }
            }
            Me.SeriesData = seriesData
        End Sub
    End Class

    Public Class SeriesViewModel
        Public Property Group As Integer
        Public Property Name As String
        Public Property DataPoints As List(Of DataPoint)
    End Class

    Public Class DataPoint
        Public Property Argument As String
        Public Property Value As Double
    End Class
End Namespace

See also: DevExpress MVVM Framework.