Providing Data
- 3 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.
Note
A complete sample project is available at: https://github.com/DevExpress-Examples/winrt-charts-getting-started-lesson-2-create-a-pie-chart-e4239
<Page
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.UI.Xaml.Charts"
x:Class="PieChart.MainPage"
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>
</Page>
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.
Note
A complete sample project is available at: https://github.com/DevExpress-Examples/how-to-bind-a-chart-to-data-e4362
<Page
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.UI.Xaml.Charts"
xmlns:local="using:BindChart"
x:Class="BindChart.MainPage"
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>
</Page>
using System;
using System.Collections;
using System.Collections.Generic;
namespace BindChart {
public class DateTimeDataPoint {
public DateTime PointArgument { get; set; }
public double PointValue { get; set; }
}
public class ViewModel {
DateTime start = new DateTime(2000, 1, 1);
IEnumerable itemsSource;
readonly Random random = new Random();
public TimeSpan Step { get; set; }
public int Count { get; set; }
public double Start { get; set; }
public IEnumerable ItemsSource {
get { return itemsSource ?? (itemsSource = CreateItemsSource(Count)); }
}
protected IEnumerable CreateItemsSource(int count) {
var points = new List<DateTimeDataPoint>();
double value = GenerateStartValue(random);
points.Add(new DateTimeDataPoint() { PointArgument = start, PointValue = value });
for (int i = 1; i < count; i++) {
value += GenerateAddition(random);
start = start + Step;
points.Add(new DateTimeDataPoint() { PointArgument = start, PointValue = value });
}
return points;
}
protected double GenerateStartValue(Random random) {
return Start + random.NextDouble() * 100;
}
protected double GenerateAddition(Random random) {
double factor = random.NextDouble();
if (factor == 1)
factor = 50;
else if (factor == 0)
factor = -50;
return (factor - 0.5) * 50;
}
}
}
using System;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;
namespace BindChart {
public sealed partial class MainPage : Page {
public MainPage() {
this.InitializeComponent();
DataContext = new ViewModel() {
Start = 10000,
Count = 50000,
Step = TimeSpan.FromHours(3),
};
}
protected override void OnNavigatedTo(NavigationEventArgs e) {
}
}
}