Silverlight Chart Drilldown: Part One

Posted Wed Nov 11, 2009 @ 12:15 PM

 

 

This blog post will demonstrate how to use the drilldown capability of the Silverlight Chart control. Silverlight Chart Drilldown: Part Two and Part Three will show how to integrate Chart drilldown with a BreadCrumb control and a RangeSlider control respectively. We will create a bare-bones drilldown chart with three drill levels showing yearly data, monthly data and daily data. Here are the steps that need to be taken:

 

Define the chart in XAML

In XAML we will define the chart for the top-most drill level. Charts for other drill levels will be instantiated in code as needed. Of the chart properties, only a single data series has been defined in XAML. All other chart properties will be set in code.

        <StackPanel Orientation="Vertical">
<Button Content="Back" Click="Button_Click" Width="80" />
<Grid>
<ComponentArt:Chart x:Name="DrillChart">
<ComponentArt:Chart.DataSeries>
<ComponentArt:Series/>
</ComponentArt:Chart.DataSeries>
</ComponentArt:Chart>
</Grid>
</StackPanel>


Notice that we have placed the chart into a Grid control. Other charts will be attached to the same element and since it is a Grid they will occupy the same spot in space which is exactly what we want. We have also defined a Button that will take us back to the previous drill levels.

 

Extend the DrillDownManager class  

	public class MyDrillDownManager : DrillDownManager

 

Charting assembly includes a DrillDownManager class that encapsulates all the drilldown plumbing needed for drilling up or down including all animations. All that is left for us to implement is some business logic. We will need to extend the DrillDownManager with our own class, here called MyDrillDownManager, to define an abstract method and override another virtual method.

Call the base constructor

The constructor will accept the top-level drill chart and pass it on to the base constructor. In the base constructor this chart will be assigned to the CurrentChart property.

        public MyDrillDownManager(Chart topLevelChart)
: base(topLevelChart)
{
InitializeChart(CurrentChart);
LoadData(CurrentChart, new DateTime(1991,1,1), new DateTime(2001,1,1));
}

 

Set the desired properties on the chart

At this point we will also set the properties we wish to set on the chart by calling a helper method InitializeChart.

        InitializeChart(CurrentChart);

...

private void InitializeChart(Chart chart)
{
chart.Width = 400;
chart.Height = 300;
chart.XValue = "Date";
chart.ChartKind = ChartKind.RoundedBlock;

chart.DataSeries.Clear();
Series series = new Series();
series.YValue = "Value";
chart.DataSeries.Add(series);

chart.MouseLeftButtonDownOnDataPoint += new EventHandler<SelectedDataPointEventArgs>(Chart_MouseLeftButtonDownOnDataPoint);
}


Notice that we have also created a handler for the mouse click on a data point event at which point we will initiate a drilldown.

 

Load data for the chart

        LoadData(CurrentChart, new DateTime(1991,1,1), new DateTime(2001,1,1));


We will load chart data by calling LoadData helper method and supplying the chart and a start and end date indicating the range of data to be included. For the purpose of this demo, LoadData generates random data values with the appropriate dates for each drill level. In reality, data will probably come from a database.

 

Initiate drilldown

In the handler for the mouse click on a data point event we will call Drill method to initiate a drilldown.

        private void Chart_MouseLeftButtonDownOnDataPoint(object sender, SelectedDataPointEventArgs e)
{
if (drillLevel < 2)
{
drillLevel++;
Drill(e.DataPointContext.DataPoint.X);
}
}


drillLevel member variable keeps track of the current drill level we are currently at (value of 0 for years, 1 for months and 2 for days). We need to increment this variable every time we drill and decrement it every time we go back as you will see below.

 

Implement the abstract method GetDrillChart

 After drilldown has been initiated, DrillDownManager will call an abstract method GetDrillChart to request a new chart instance for the next drill level. We need to implement this method to create a new chart, set properties on it and load the appropriate data.

        public override Chart GetDrillChart(Chart currentChart, object xCoordinate)
{
Chart newChart = new Chart();
InitializeChart(newChart);

DateTime start, end;
start = new DateTime(((DateTime)xCoordinate).Ticks);
if (drillLevel == 1)
end = new DateTime(((DateTime)xCoordinate).Ticks).AddYears(1);
else
end = new DateTime(((DateTime)xCoordinate).Ticks).AddMonths(1);

LoadData(newChart, start, end);
return newChart;
}


We will use the same InitializeChart method to set chart properties and LoadData to load the appropriate data. One of the parameters that the DrillDownManager passed us is the x-coordinate of the data point which the user clicked on to drill. Since the x-coordinate is a single value we need to have some logic that will determine, for each drill level, the appropriate range of values that this point represents.

 

If chart not ready return null

If the chart data is not immediately available (for example if the data is loaded asynchronously from a database) you can return null from GetDrillChart and when the data has been assigned to the data source of the chart call DrillChartReady to give the new chart instance to the DrillDownManager.

 

Going back

In XAML we have already defined a back button. In the Click event handler we just need to call the Back method of the DrillDownManager.

        private void Button_Click(object sender, RoutedEventArgs e)
{
drillDownManager.Back();
}


We also need to override the Back method in our MyDrillDownManager to correctly keep track of drill levels.

        public override void Back()
{
if (drillLevel > 0)
{
drillLevel--;
base.Back();
}
}


After performing these steps we should have a working drilldown application. Hopefully, now you have a clearer picture of how drilldown is intended to work in Silverlight Chart.

You can download the code for this demo here.

 

Comments

Posted on Wed Nov 11, 2009 @ 12:15 PM

Hi Bojan,

We are evaluating ComponentArt for our project and this drill down capability is crucial for me.

Can you please tell me where the LoadData method is defined? Also can you please send me the complete xaml and xaml.cs file for this drilldown demo?

Thanks!

Dheepak

Posted on Wed Nov 11, 2009 @ 12:15 PM

Hi

I am implementing the Drill Down Chart using WCF Data Services from an SQL Database. I am facing difficulty in binding the database with the chart. Kindly provide me with some sample source code.

Thanks for your help !!

Anjii

Click here to log in or create an account.