Lives: 30

Dashboards Made Easy - The DrillDownManager Control

Posted Fri Mar 5, 2010 @ 12:23 PM

The usability and value of most modern dashboards becomes seriously questioned if the data shown is fixed, and the user does not have the ability to zoom in or drill-down into the data to a more detailed view.  Implementing this functionality can sometimes be a time consuming task - a lot of plumbing code is needed to connect all the components and handle the events to interpret the drill-down actions and the parameters.  The whole purpose of the DrillDownManager is to make this task simple for the developer.

The Concept

The idea behind the control is the following:

  1. The page will contain an instance of the DrillDownManager control which will define all the available levels the end user can drill into.  
  2. Each level will have a data source associated with it.  
  3. Every control displaying the current data will bind to the DrillDownManager's DataContext property.  
  4. Actions such as drill-down and drill-back will all be handled through the DrillDownManager, which will notify all the managed controls of the actions currently taking place.

The Simple Drill-Down demo is a perfect example of this concept in action.  Here we use the WcfServiceDataProvider control to configure the data source for each of our four levels.  Even though we'll be using the same WCF Service for each of our levels, we'll be using a different method from the service for each level.  Because of this it is easiest to create four instances of the WcfServiceDataProvider, like we do in the example:

<CAdata:WcfServiceDataProvider x:Key="Service1" IsInitialLoadEnabled="False" EndPointConfigurationName="CustomBinding_SalesDataService" MethodName="GetAllData" ObjectTypeRef="{StaticResource SalesDataServiceClient}" />
<CAdata:WcfServiceDataProvider x:Key="Service2" IsInitialLoadEnabled="False" EndPointConfigurationName="CustomBinding_SalesDataService" MethodName="GetYearlyDataFromDecade" ObjectTypeRef="{StaticResource SalesDataServiceClient}" />
<CAdata:WcfServiceDataProvider x:Key="Service3" IsInitialLoadEnabled="False" EndPointConfigurationName="CustomBinding_SalesDataService" MethodName="GetMonthlyData" ObjectTypeRef="{StaticResource SalesDataServiceClient}" />
<CAdata:WcfServiceDataProvider x:Key="Service4" IsInitialLoadEnabled="False" EndPointConfigurationName="CustomBinding_SalesDataService" MethodName="GetDailyData" ObjectTypeRef="{StaticResource SalesDataServiceClient}" />

Now we can instantiate the DrillDownManager to use these instances as data sources for each of its levels:

<CAdata:DrillDownManager x:Name="DDManager" ManagedControls="Chart1">
	<CAdata:DrillDownManager.Levels>
	    <CAdata:DrillDownLevel x:Name="RootLevel" DataProvider="{StaticResource Service1}" />
	    <CAdata:DrillDownLevel x:Name="Decade" DataProvider="{StaticResource Service2}" />
	    <CAdata:DrillDownLevel x:Name="Year" DataProvider="{StaticResource Service3}" />
	    <CAdata:DrillDownLevel x:Name="Month" DataProvider="{StaticResource Service4}" />
	</CAdata:DrillDownManager.Levels>
</CAdata:DrillDownManager>

We can now instantiate the Chart control to bind to our DrillDownManager instance's DataContext property in order to automatically update the chart when the data is changed.  Our chart code can look like this:

<Chart:Chart x:Name="Chart1" ChartKind="Rectangle" XValue="Date" Height="480" Width="640" EnableAnimation="True"
		MouseLeftButtonDownOnDataPoint="MyChart_MouseLeftButtonDownOnDataPoint"
		DataSource="{Binding DataContext, ElementName=DDManager}" 
		DrillDownTransitionDuration="0:0:1" BackUpTransitionDuration="0:0:1">

    <Chart:Chart.DataSeries >
	<Chart:Series Id="S0" YValue="Sales" MarkerStyle="Circle" />
    </Chart:Chart.DataSeries>
</Chart:Chart>

Note also that in addition to binding the DataSource and setting the drill down and back up animation transition durations, we also register a handler for the MouseLeftButtonDownOnDataPoint event.  This is where we want to initiate the drill down action.  The idea, as shown in the  Simple Drill-Down demo, is that when a user clicks on a data point, we show a more granular view of that data.  Our event handler from the demo looks like this:

private void MyChart_MouseLeftButtonDownOnDataPoint(object sender, SelectedDataPointEventArgs e)
{
    DDManager.DrillDown(e.DataPointContext.DataPoint.X);
}

This calls the DrillDownMnager and tells it to go into the next level, passing the DataPoint's X value to the call.  The DrillDownManager will move to the next level and refresh that level's data with the provided parameter being passed directly to the method in the WCF Service that is registered as the data source of this level.  As such we must make sure that the method in the WCF service registered with each level, can take the type of parameter being passed.  In our case it is the X value of the DataPoints in the previous level. 

We can go back up a level simply by calling the DrillUp() method on the DrillDownManager instance.  In the Simple Drill-Down demo, this is done through the BreadCrumb control, which also makes use of DrillDownManagers Levels and CurrentLevel properties to show how deep we have drilled down.  Additionally, we can bind any other control we have on the page to the DataContext property of the DrillDownManager, and it will update automatically when the level changes.

Posted to Filip Karadzic by filipK

Posted on Fri Mar 5, 2010 @ 12:23 PM

Comments

There are currently no comments for this blog post.

Anonymous comments are not allowed. Click here to log in or create an account.

Copyright © 2010 ComponentArt, Inc. All rights reserved.