Chart Extensions

RadChart supports extensibility mechanism for the creation of custom chart extensions (tools) via the Extensible Object Pattern. This pattern enables an object to participate in custom behaviors, such as registering for events, or watching state transitions.

The purpose of this tutorial is to show you how to create a custom chart area extension.

Extensible Object Pattern Overview

There are three interfaces in the extensible object pattern: IExtensibleObject, IExtension, and IExtensionCollection.

The IExtensibleObject interface is implemented by types that allow IExtension objects to customize their functionality. Extensible objects allow dynamic aggregation of IExtension objects. IExtension objects are characterized by the following interface:

public interface IExtension<T> 
    where T : IExtensibleObject<T> 
{ 
   void Attach(T owner); 
   void Detach(T owner); 
} 
Public Interface IExtension(Of T As IExtensibleObject(Of T)) 
    Sub Attach(ByVal owner As T) 
    Sub Detach(ByVal owner As T) 
End Interface 

By design the chart extensions work on ChartArea basis (you can add different extensions to the separate ChartArea instances defined in your chart template) thus the IExtensibleObject interface is implemented by the ChartArea class.

How to Create Custom Chart Extensions

In order to plug your custom tool into the extensibility infrastructure supported by RadChart each extension should inherit from the Telerik.Windows.Controls.Charting.ChartExtension base class that implements the IExtension interface. Then you need to override the two methods of the IExtension interface:

  • Attach(ChartArea owner)- this method enables an extension object to find out when it has been aggregated. It is called when the extension is added to the ChartArea.Extensions collection property. You can get hold of the ChartArea that "owns" this extension here and use its instance as per the requirements of your custom tool.

  • Detach(ChartArea owner) - this method enables an object to find out when it is no longer aggregated. It is called when an extension is removed from the ChartArea.Extensions collection property.

How to Add Custom Extension to the Chart Control

In order to utilize the already defined custom tool you need to add it to the Extensions collection property of the respective ChartArea which functionality you would like to extend. Here is a sample code snippet that demonstrates adding / removing the CameraExtension on UserControl.Loaded / Unloaded events:

private void UserControl_Loaded(object sender, RoutedEventArgs e) 
{ 
    CameraExtension cameraExtension = new CameraExtension(); 
    radChart.DefaultView.ChartArea.Extensions.Add(cameraExtension); 
} 
private void UserControl_Unloaded(object sender, RoutedEventArgs e) 
{ 
    radChart.DefaultView.ChartArea.Extensions.Clear(); 
} 
Private Sub UserControl_Loaded(ByVal sender As Object, ByVal e As RoutedEventArgs) 
    Dim cameraExtension As New CameraExtension() 
    radChart.DefaultView.ChartArea.Extensions.Add(cameraExtension) 
End Sub 
Private Sub UserControl_Unloaded(ByVal sender As Object, ByVal e As RoutedEventArgs) 
    radChart.DefaultView.ChartArea.Extensions.Clear() 
End Sub 

RadChart provides out-of-the-box a custom CameraExtension that follows this pattern and handles the zooming and the rotation of the chart in the 3D space:

  • On the Attach(...) method a 2D canvas wrapper is created that serves as an event source for the mouse-related events associated with zooming and rotation (i.e. MouseDown, MouseUp, MouseMove, MouseWheel).

  • The ChartArea owner is used as a reference point to inject this canvas element into the control tree of the chart (the 2D element is placed on the top so mouse events can be correctly registered).

  • The mouse event handlers use the 2D input to produce the resultant 3D transforms for zooming and rotation.

  • These transforms are then applied to the ChartArea Visual3D in order to actually zoom / rotate the ChartArea in the 3D space.

See Also

In this article