OLAP Axis: DataChart with data from cube data

Atanas Dyulgerov / Monday, October 24, 2011

Setting up the DataChart to display cube data was a complicated job before. You had to manually create the series in the chart based on the data in the data source and update the UI every time when something changes in the data source. Integration with the PivotGrid involved lots of code, handling synchronization, hierarchical data and multiple dimensions was possible, but very difficult. Exceptions and special cases had to be foreseen and accounted for. It was a hassle. However, with the new 11.2 release building a chart that uses cube data is a breeze.

A major new feature of the DataChart with this new Infragistics release is the OLAP Axis. It allows you to read data automatically from an IOlapViewModel data source (FlatDataSource and XmlaDataSource for instance) and construct a chart based on the data, measures and hierarchies specified in it. Here is an example of what can be achieved with just a few lines of code:

The OLAP axis is just a normal axis. It can be used in the data chart and used in a combination with the other existing axes just like you would normally do with the CategoryXAxis or the NumericXAxis. It just needs to be given a DataSource to use for getting data (the same one that you would put in a PivotGrid). By default it would use whatever hierarchies there are in the Columns of the DataSource and you can specify that explicitly through the OlapAxisSource property. Possible values are Columns and Rows.

Here is an example code of very basic chart using the olap axis and a numeric axis for the measures:

        <ig:XamDataChart x:Key ="xmOlapDataChart">
            <ig:XamDataChart.Axes>
                <ig:OlapXAxis x:Name="olapXAxis"
                                     DataSource="{StaticResource XmlaDataSource}"
                                     YAxis="{Binding ElementName=xmYAxis1}"
                                     />
                <ig:NumericYAxis x:Name="xmYAxis1" MinimumValue="0" />
            </ig:XamDataChart.Axes>
        </ig:XamDataChart>

 

In order to use the chart and the olap axis you also need to add the ig namespace - http://schemas.infragistics.com/xaml and add the InfragisticsSL4.Controls.Charts.OlapAxis.v11.2 and InfragisticsSL4.Controls.Charts.XamDataChart.v11.2 assemblies.

The olap axis is interactive as you can see on the graphic above you can expand through the levels of the hierarchies added just like you would in the PivotGrid, only the data is not going to be in raw form, but as bars. You can drill in your data either form the UI of the chart or by manipulating the members of the data source. Updates will happen automatically as you edit the data source and the UI will refresh.

As with any chart axis from the Infragistics controls you can auto-generate your series or define them manually. If you want to use automatic generation just set the AutopGenerateSeries property to true. Otherwise you have to create your series of type OlapColumnSeries in the Series collection property of the data chart. Here is an example.

        <ig:XamDataChart.Series>

                <ig:OlapColumnSeries Title="Series1"

                                     YAxis="{Binding ElementName=xmYAxis}" 

                                     OlapXAxis="{Binding ElementName=olapXAxis}" 

                                     ValueMemberPath="Europe"/>

                <ig:OlapColumnSeries Title="Series2"

                                     YAxis="{Binding ElementName=xmYAxis}"

                                     OlapXAxis="{Binding ElementName=olapXAxis}" 

                                     ValueMemberPath="Units"/>

        </ig:XamDataChart.Series>

In the code snippet above the olapXAxis is the name of the OLAP axis.

Now you know all the basic information that you need to start using the OLAP axis. You can start experimenting to integrate your chart with other components. The data that feeds the chart comes from the OLAP data source and it can be easily reused in any other component, like the XamPivotGrid, XamPivotDataSelector and XamPivotDataSlicer. Integration of all those with the XamDataChart is no longer complicated and allows you to build some really powerful applications.

Here is an example of such integration.

And here is a link to the xaml file with all the code you need. There is no code behind that is relevant to this example. Just create an empty user control and copy and paste the code there.