This topic explains, with code examples, how to display multi-dimensional data (OnLine Analytical Processing (OLAP) data) in the XamDataChart™ control.
The following table lists the topics required as a prerequisite to understanding this topic.
This topic contains the following sections:
Displaying OLAP data in XamDataChart summary
In order to display OLAP data in the XamDataChart control, you need to configure a special type of axis – OlapXAxis – specifically designed for visiualizing multi-dimensional data sets. Apart from visualizing OLAP data in the XamDataChart , the OlapXAxis enables you to drill-down the data and to choose an axis from the data (columns or rows) for whose values the series will be plotted.
The OlapXAxis has a DataSource property, similar to the one in the xamPivotGrid control, which enables you to use the data sources used in the xamPivotGrid , in the XamDataChart , so you can visualize with the chart the same data that is displayed in the grid. The following picture demonstrates a XamPivotGrid and XamDataChart bound to the same data source. (Tooltips are added to the image for the sake of clarity.)
This procedure covers the required steps for displaying OLAP data in a XamDataChart .
The specific example outlined in the procedure uses a flat data source and the Sales Data Sample (SalesDataSample class) for generating the sample content displayed in a chart. For details about how to configure the data source, refer to the Using FlatDataSource topic.
The procedure also optionally suggests adding a selector so that users can select items for columns, rows, filters, and measures from the data source (step 4). The selector is implemented through an instance of the xamPivotDataSelector component.
The following screenshot is a preview of the final result.
To complete the procedure, you need the following:
A WPF Visual Studio 2013-2017 application project.
References to the following assemblies:
InfragisticsWPF.v23.2
InfragisticsWPF.DataVisualization.
InfragisticsWPF.Olap
InfragisticsWPF.Olap.FlatData (if you are not using flat data, include the respective assembly)
InfragisticsWPF.Controls.Grids.XamPivotGrid (required only if you want to use the XamPivotDataSelector™)
InfragisticsWPF.Controls.Charts.XamDataChart
InfragisticsWPF.Controls.Charts.Olap.
The SalesDataSample class from the Sales Data Sample resource added to your application
The following is a conceptual overview of the process:
1. Configuring the data source
2. Adding data chart and axes
3. Configuring the OlapXAxis
4. (Optional) * Adding a pivot data selector*
If you choose not to use a XamPivotDataSelector control for assigning hierarchies and measures, you should provide some other mechanism for this, or as in the example below, assign some initial items as columns and measures to the data source. The following code should be placed in the resources section of your page/user control.
In XAML:
<models:SalesDataSample x:Key="DataSample"/>
<olap:FlatDataSource
x:Key="DataSource"
Columns="[Date].[Date]"
Measures="AmountOfSale, NumberOfUnits"
MeasureListLocation="Rows"
ItemsSource="{StaticResource DataSample}" />Add a xamDataChart control to your page.
Add the required axes
Add the x-axis. Add an OlapXAxis to the Axes collection of the XamDataChart chart.
Add the y-axis.
Add a NumericYAxis to the Axes collection of the XamDataChart chart.
Since the data that is visualized contains numeric values, you need such a y-axis to correctly display the data chart series.
Attach the added y-axis to the OLAP-x-axis. Set the YAxis property to the NumericYAxis defined in the previous step.
Set the data source. Set the DataSource property to the data source defined in step 1.
Configure the data axis from which the data is read. To do this, set the OlapAxisSource property. This property determines whether data is read from rows or from the columns of the data source. If you choose the columns, then each column in the data source will be displayed in the OlapXAxis of the data chart. For each row, a data chart series will be generated and displayed. The illustration in the [OLE_LINK20]Displaying OLAP data in XamDataChart summary block demonstrates a pivot grid control and a data chart with an OLAP axis where the OlapAxisSource is set to Columns.
Configure the series type. To configure the series type, set the DefaultSeries property. (If you don’t configure it, the default Column series will be displayed.)
The following snippet will add a XamPivotDataSelector component bound to the same data source as the data chart.
In XAML:
<ig:Expander Grid.Column="1">
<ig:XamPivotDataSelector DataSource="{StaticResource DataSource}"/>
</ig:Expander>Following is the complete XAML code of the procedure.
In XAML:
<UserControl
…
xmlns:ig="http://schemas.infragistics.com/xaml"
xmlns:models="clr-namespace:Infragistics.Samples.Data.Models"
xmlns:olap="http://schemas.infragistics.com/olap">
<UserControl.Resources>
<models:SalesDataSample x:Key="DataSample"/>
<olap:FlatDataSource
x:Key="DataSource"
Columns="[Date].[Date]"
Measures="AmountOfSale, NumberOfUnits"
MeasureListLocation="Rows"
ItemsSource="{StaticResource DataSample}" />
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ig:XamDataChart OverviewPlusDetailPaneVisibility="Visible" HorizontalZoomable="True" VerticalZoomable="True">
<ig:XamDataChart.Axes>
<ig:OlapXAxis
YAxis="{Binding ElementName=YAxis}"
DataSource="{StaticResource DataSource}"
OlapAxisSource="Columns"
DefaultSeries="ColumnSeries"/>
<ig:NumericYAxis x:Name="YAxis" MinimumValue="0"/>
</ig:XamDataChart.Axes>
</ig:XamDataChart>
<!--<ig:Expander Grid.Column="1">
<ig:XamPivotDataSelector DataSource="{StaticResource DataSource}"/>
</ig:Expander>-->
</Grid>
</UserControl>The following topics provide additional information related to this topic.