Providing Data
- 5 minutes to read
This document describes how to provide data for a chart, and lists two examples illustrating these approaches.
Overview
To provide data for a Series, it is necessary to specify one of the ChartDataAdapter class descendants to the Series.Data property. There are two ways of doing this:
Explicitly add all data points to the series.
To do this, assign the DataPointCollection object to the Series.Data property and add all data points to the DataPointCollection.Points collection.
Populate a series with data from a datasource.
To do this, assign the DataSourceAdapter object to the Series.Data property and specify its settings, such as DataSourceAdapter.DataSource and DataSourceAdapter.DataMembers.
Example: Using DataPointCollection
The following example demonstrates how to create a simple Pie Chart with one series.
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:PieChart"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:Charts="using:DevExpress.WinUI.Charts"
x:Class="PieChart.MainWindow"
mc:Ignorable="d">
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Charts:PieChart Margin="50" ToolTipEnabled="True">
<Charts:Series>
<Charts:Series.View>
<Charts:PieSeriesView LegendPointPattern="{}{A}"/>
</Charts:Series.View>
<Charts:Series.Data>
<Charts:DataPointCollection>
<Charts:DataPoint Argument="USA" Value="9.63142" />
<Charts:DataPoint Argument="Canada" Value="9.98467" />
<Charts:DataPoint Argument="Russia" Value="17.0752" />
<Charts:DataPoint Argument="Others" Value="81.2" />
<Charts:DataPoint Argument="India" Value="3.28759" />
<Charts:DataPoint Argument="Australia" Value="7.68685" />
<Charts:DataPoint Argument="Brazil" Value="8.511965" />
<Charts:DataPoint Argument="China" Value="9.59696" />
</Charts:DataPointCollection>
</Charts:Series.Data>
</Charts:Series>
<Charts:PieChart.Legend>
<Charts:Legend MaximumRowsOrColumns="4"/>
</Charts:PieChart.Legend>
</Charts:PieChart>
</Grid>
</Window>
Example: Using DataSourceAdapter
The following example demonstrates how to bind a chart to data provided by a ViewModel.
To do this, it is necessary to assign the DataSourceAdapter object to the Series.Data property and specify the datasource for the adapter via its DataSourceAdapter.DataSource property.
<Window
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:Charts="using:DevExpress.WinUI.Charts"
xmlns:local="using:BindChart"
x:Class="BindChart.MainWindow"
mc:Ignorable="d">
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Charts:CartesianChart>
<Charts:Series>
<Charts:Series.View>
<Charts:LineSeriesView/>
</Charts:Series.View>
<Charts:Series.Data>
<Charts:DataSourceAdapter DataSource="{Binding ItemsSource}">
<Charts:DataMember DataMemberType="Argument" ColumnName="PointArgument"
ScaleType="DateTime"/>
<Charts:DataMember DataMemberType="Value" ColumnName="PointValue"
ScaleType="Auto"/>
</Charts:DataSourceAdapter>
</Charts:Series.Data>
</Charts:Series>
<Charts:CartesianChart.AxisX>
<Charts:AxisX DateTimeGridAlignment="Year" DateTimeMeasureUnit="Hour">
<Charts:AxisX.LabelOptions>
<Charts:AxisLabelOptions Pattern="{}{V:yyyy}"/>
</Charts:AxisX.LabelOptions>
</Charts:AxisX>
</Charts:CartesianChart.AxisX>
</Charts:CartesianChart>
</Grid>
</Window>