How to Use XamOlapPieChart

Atanas Dyulgerov / Tuesday, April 24, 2012

With the previous version of Infragistics NetAdvantage 11.2 we shipped the awesome Olap Axis that enables the Data Chart to visualize data from an Olap data source. Here is the article that announced that. Now with the upcoming Infragistics NetAdvantage 2012.1 release we introduce as CTP the XamOlapPieChart control that extends our charting ability to use pie charts in addition to the bar and column series. Here is how it looks.

The new XamOlapPieChart control is fairly simple to use. You need to add the required assembly references, add the appropriate namespace and provide an olap data source to the control instance’s data source property. Read on to see how to do that.

First step that you need to take care of is adding the assembly references. Here is the list:

  • InfragisticsSL5.Controls.Charts.Olap.v12.1
  • One of the following for the data source depending on what you need:
    • InfragisticsSL5.Olap.FlatData.v12.1
    • InfragisticsSL5.Olap.Xmla.v12.1
    • InfragisticsSL5.Olap.Excel.v12.1
  • InfragisticsSL5.Olap.v12.1
  • InfragisticsSL5.v12.1

Once you add those use the following namespace references:

  1. xmlns:ig="http://schemas.infragistics.com/xaml"
  2. xmlns:igOlap="http://schemas.infragistics.com/olap"

The ig namespace holds the controls and the igOlap the datasources that are available.

The previous screenshot uses custom FlatDataSource, but to avoid writing down long code and focus on the chart functionality I will use the Adventure Works analysis database hosted in our samples server (XmlaDataSource).

So the next step is to create a data source to be used by the chart and any auxiliary controls you might have added (like slicers or data selector). Here is a simple code that uses the fore-mentioned xmla data source:

  1. <igOlap:XmlaDataSource x:Key="DataSource"
  2.                          ServerUri="http://sampledata.infragistics.com/olap/msmdpump.dll"
  3.                          Database="Adventure Works DW Standard Edition"
  4.                          Cube="Adventure Works"
  5.                          Filters="[Sales Territory].[Sales Territory Country]{[Sales Territory].[Sales Territory Country].&amp;[United Kingdom]}"
  6.                          Columns="[Date].[Calendar]"
  7.                          Rows="[Geography].[City]"
  8.                          Measures="Reseller Sales Amount" />

I usually put this snippet in the Resources section of my page/user control. In it as you see we have specified the address of the analysis server that hosts the Adventure Works sample data, we have selected some filters, columns, rows and measures.

The last step is to create the instance of the XamOlapPieChart and provide the data source:

  1. <ig:XamOlapPieChart x:Name="chart" DataSource="{StaticResource DataSource}" />

That’s pretty much it for the default scenario.

The control works the in following way. It creates a pie for each tuple that is loaded in the data source based on a specified olap axis source (which can be Columns or Rows and Rows being the default).  This means that if you run the code that we just wrote you will have one pie that says All periods in the middle and in the legend and All Geographies in the bottom.

The four basic areas are the title (That unless explicitly specified shows the dimensions and measures used for the chart), the pie itself, a legend to the right and a axis dimension selector in the bottom.

If you click on the plus sign next to All Geographies the Rows hierarchy will be expanded and new tuples will be created for each City in the data source.

If you click on one of the items in the circle (In this case its only one) the hierarchy item that it represents (also shown in the legend to the right) will be expanded. If you expand the tree in the legend the UI will also be updated.

If you move over an item a tooltip will be shown that displays the measure value and the percent size of the total for the pie chart. You can see it in the first screenshot.

Swapping the hierarchies in the data source’s rows and columns is not the only way to reverse the axis and the items selection. As I mentioned the Rows are the default setting for the Olap axis source. You can select the columns to be axis source by setting the property to that value. The title can also be set explicitly. The first screenshot uses this code:

 

  1. <ig:XamOlapPieChart x:Name="chart" OlapAxisSource="Columns" DataSource="{StaticResource DataSource}" Title="Product distribution throughout the years" />

 

Another thing that can be customized easily is the set of colors that the chart should assign to the items. Again as shown in the first screenshot this is the code you need:

 

  1. <ig:XamOlapPieChart x:Name="chart" OlapAxisSource="Columns" DataSource="{StaticResource DataSource}" Title="Product distribution throughout the years" >
  2.     <ig:XamOlapPieChart.BrushesHierarchy>
  3.         <ig:BrushHierarchyCollection>
  4.             <ig:BrushHierarchy Brush="#8a56e2" />
  5.             <ig:BrushHierarchy Brush="#cf56e2" />
  6.             <ig:BrushHierarchy Brush="#e256ae" />
  7.             <ig:BrushHierarchy Brush="#e25668" />
  8.             <ig:BrushHierarchy Brush="#e28956" />
  9.             <ig:BrushHierarchy Brush="#e2cf56" />
  10.             <ig:BrushHierarchy Brush="#aee256" />
  11.             <ig:BrushHierarchy Brush="#68e256" />
  12.             <ig:BrushHierarchy Brush="#56e289" />
  13.             <ig:BrushHierarchy Brush="#56e2cf" />
  14.             <ig:BrushHierarchy Brush="#56aee2" />
  15.             <ig:BrushHierarchy Brush="#5668e2" />
  16.         </ig:BrushHierarchyCollection>
  17.     </ig:XamOlapPieChart.BrushesHierarchy>
  18. </ig:XamOlapPieChart>

 

As you see you need to provide a BrushHierarchyCollection to the BrushesHierarchy property. Each BrushHierarchy object has a Brush property.

If you want to use different colors for the different levels in the hierarchies you can provide recursively brushes through the Children property like that.

 

 

  1. <ig:XamOlapPieChart x:Name="chart" OlapAxisSource="Columns" DataSource="{StaticResource DataSource}" Title="Product distribution throughout the years" >
  2.     <ig:XamOlapPieChart.BrushesHierarchy>
  3.         <ig:BrushHierarchyCollection>
  4.             <ig:BrushHierarchy Brush="Red" >
  5.                 <ig:BrushHierarchy.Children>
  6.                     <ig:BrushHierarchyCollection>
  7.                         <ig:BrushHierarchy Brush="Gray" >
  8.                             <ig:BrushHierarchy.Children>
  9.                                 <ig:BrushHierarchyCollection>
  10.                                     <ig:BrushHierarchy Brush="Aqua" />
  11.                                     <ig:BrushHierarchy Brush="BlueViolet" />
  12.                                     <ig:BrushHierarchy Brush="CadetBlue" />
  13.                                 </ig:BrushHierarchyCollection>
  14.                             </ig:BrushHierarchy.Children>
  15.                         </ig:BrushHierarchy>
  16.                         <ig:BrushHierarchy Brush="Green" >
  17.                             <ig:BrushHierarchy.Children>
  18.                                 <ig:BrushHierarchyCollection>
  19.                                     <ig:BrushHierarchy Brush="Yellow" />
  20.                                     <ig:BrushHierarchy Brush="Magenta" />
  21.                                     <ig:BrushHierarchy Brush="Black" />
  22.                                 </ig:BrushHierarchyCollection>
  23.                             </ig:BrushHierarchy.Children>
  24.                         </ig:BrushHierarchy>
  25.                         <ig:BrushHierarchy Brush="Lime" />
  26.                         <ig:BrushHierarchy Brush="Beige" />
  27.                     </ig:BrushHierarchyCollection>
  28.                 </ig:BrushHierarchy.Children>
  29.             </ig:BrushHierarchy>
  30.         </ig:BrushHierarchyCollection>
  31.     </ig:XamOlapPieChart.BrushesHierarchy>

 

If you want more detailed way to style the XamOlapPieChart you can always modify the default template of the control. This however is outside the scope of this article.

Have in mind that this control will be still in CTP and that’s pretty much all you can do with it for now.

I hope you are excited by this new addition to the XAML product and will give it a try as soon as the 12.1 release is officially out, which will happen in the coming weeks.

Have a great day!