Displaying GroupingCollection/HierarchicalData in Charts with drill-down

This example shows how to use GroupingCollection/HierarchicalData as dataProvider to a Chart and how to support drill down and drill up navigation.

Click on any item to drill-down and Ctrl+Click on any item to drill-up. The top chart uses HierarchicalData sample and the second chart uses GroupingCollection to generate a summary information from flat data.

Please note that all data is fictitious and I just cooked it up for the sample.

To get access to parent and children collections a HierarchicalCollectionView is constructed using GC/HD as source. To display a drilled down view the children collection is set as charts dataProvider. For a drill-up operation the clicked items parent collection is set as dataProvider.

The source can be downloaded from here.

I have used the DrillDown, DrillUp effects from Ely's chart drill down sample of XML data. The sample would have looked a bit dull without them. Thanks to Ely!.

XMLList, HierarchicalData and AdvancedDataGrid

Using a XMLList as source for GroupingCollection or HierarchicalData is a bit tricky. The trickiness comes from the fact that there are two ways to specify values for a XML node. One as attributes and second as child nodes. Depending on which way values are specified we need to set properties differently to get the desired display in ADG. For XMLList data type HierarchicalData treats the child nodes of a node to be children of the parent node by default. Specifying values as attributes:

<Parent field1="valueA" field2="valueB" >
 <Child1 field1="value1" field2="value1b" />
 <Child2 field1="value2" field2="value2b" />
 <Child3 field1="value3" field2="value3b" />
</Parent>

Here Child1, Child2 and Child3 would be recognized as children of Parent node. Specifying values as sub nodes:

<Parent>
    <field1>valueA</field1>
    <field2>valueB</field2>

   <subnodes>
    <Child1>
     <field1>value1</field1>
     <field2>value1b</field2>
    </Child1>
    <Child2>
     <field1>value2</field1>
     <field2>value2b</field2>
    </Child2>
    <Child3>
     <field1>value3</field1>
     <field2>value3b</field2>
    </Child3>
   </subnodes>
</Parent>

If above data is set as source to HierarchicalData it would treat field1, field2 and subnodes as children of Parent node, which is not correct. To tell HierarchicalData to use only the nodes under subnodes as children set HierarchicalData.childrenField to "subnodes".

The same rules apply when GroupingCollection (which is derived from HierarchicalData) is used to group flat data.

Suppose following data is used as input to GroupingCollection and grouped on Region

<Row>
    <Region>Southwest</Region>
    <Territory>Arizona</Territory>
    <Territory_Rep>Barbara Jennings</Territory_Rep>
    <Actual>38865</Actual>
    <Estimate>40000</Estimate>
</Row>

<Row>
    <Region>Southwest</Region>
    <Territory>trials</Territory>
    <Territory_Rep>Dana Binn</Territory_Rep>
    <Actual>4000</Actual>
    <Estimate>5000</Estimate>
</Row>
 
<Row>
    <Region>SouthEast</Region>
    <Territory>Central California</Territory>
    <Territory_Rep>Joe Smith</Territory_Rep>
    <Actual>5000</Actual>
    <Estimate>6000</Estimate>
</Row>

<Row>
   <Region>Southwest</Region>
   <Territory>Nevada</Territory>
   <Territory_Rep>Bethany Pittman</Territory_Rep>
   <Actual>1000</Actual>
   <Estimate>2000</Estimate>
</Row>

The result won't get displayed because the base HierarchicalData would treat <Region>, <Territory> etc nodes also as children of Row. To get proper display we need to set GroupingCollection.childrenField="abc" or some non existent node name. This would cause HierarchicalData to report that no children exist for the Row.