Selection
This help topic will demonstrate how you can make your charts more interactive by adding a selection behavior.
Here are the main properties that ChartSelectionBehavior exposes:
DataPointSelectionMode - to control single / multiple data point selection.
HitTestMargin - to increase the hit-testable area around the data point (especially useful when visualizing small scatter points that can be selected).
SelectionPoints - to detect the selection. You may also use the SelectionChanged event of the RadChartView for the same purpose.
SelectionPalette - to control the selected element appearance.
For the purpose of this section we'll create a Scatter Series and demonstrate selecting points and styling them.
You may read how to create a databound Series in Create Data-Bound Chart topic.
<telerik:RadCartesianChart x:Name="RadChart1" Palette="Metro">
<telerik:RadCartesianChart.Behaviors>
<telerik:ChartSelectionBehavior DataPointSelectionMode="Single" />
</telerik:RadCartesianChart.Behaviors>
<telerik:ScatterPointSeries />
<telerik:RadCartesianChart.HorizontalAxis>
<telerik:LinearAxis />
</telerik:RadCartesianChart.HorizontalAxis>
<telerik:RadCartesianChart.VerticalAxis>
<telerik:LinearAxis />
</telerik:RadCartesianChart.VerticalAxis>
</telerik:RadCartesianChart>
public MainWindow()
{
InitializeComponent();
var series = RadChart1.Series[0] as ScatterPointSeries;
series.XValueBinding = new PropertyNameDataPointBinding("XValue");
series.YValueBinding = new PropertyNameDataPointBinding("YValue");
series.ItemsSource = this.GetData();
}
private List<ChartData> GetData()
{
Random rand = new Random();
List<ChartData> data = new List<ChartData>();
for (int i = 1; i < 30; i++)
{
data.Add(new ChartData() { XValue = i, YValue = rand.Next(10, 100) });
}
return data;
}
}
public class ChartData
{
public double XValue
{
get;
set;
}
public double YValue
{
get;
set;
}
}
public MainWindow()
Public Sub New()
InitializeComponent()
Dim series = TryCast(RadChart1.Series(0), ScatterPointSeries)
series.XValueBinding = New PropertyNameDataPointBinding("XValue")
series.YValueBinding = New PropertyNameDataPointBinding("YValue")
series.ItemsSource = Me.GetData()
End Sub
Private Function GetData() As List(Of ChartData)
Dim rand As New Random()
Dim data As New List(Of ChartData)()
For i As Integer = 1 To 29
data.Add(New ChartData() With {.XValue = i, .YValue = rand.Next(10, 100)})
Next i
Return data
End Function
}
Public Class ChartData
Public Property XValue() As Double
Public Property YValue() As Double
End Class
To be able to change the selected element(s) appearance we'll use Selection Palette:
<telerik:RadCartesianChart.SelectionPalette>
<telerik:ChartPalette>
<telerik:ChartPalette.GlobalEntries>
<telerik:PaletteEntry Fill="Red" />
</telerik:ChartPalette.GlobalEntries>
</telerik:ChartPalette>
</telerik:RadCartesianChart.SelectionPalette>
A sample result can be seen below:
Let's wire to SelectionChanged event of the ChartSelectionBehavior where we can easily determine the data point clicked, the series it belongs to and was it selected or de-selected:
private void RadChart1_SelectionChanged(object sender, ChartSelectionChangedEventArgs e)
{
//Handle selection of the current point
if (e.AddedPoints.Count > 0)
{
// Get the data point.
var addedPoint = e.AddedPoints[0];
// Get the series.
var series = addedPoint.Presenter as ScatterPointSeries;
//Your code here...
}
//Handle de-selection of the current point
if (e.RemovedPoints.Count > 0)
{
// Get the data point.
var removedPoint = e.RemovedPoints[0];
// Get the series.
var series = removedPoint.Presenter as LineSeries;
//Your code here...
}
}
Private Sub RadChart1_SelectionChanged(sender As Object, e As ChartSelectionChangedEventArgs)
'Handle selection of the current point '
If e.AddedPoints.Count > 0 Then
' Get the data point. '
Dim addedPoint = e.AddedPoints(0)
' Get the series. '
Dim series = TryCast(addedPoint.Presenter, ScatterPointSeries)
'Your code here... '
End If
'Handle de-selection of the current point '
If e.RemovedPoints.Count > 0 Then
' Get the data point. '
Dim removedPoint = e.RemovedPoints(0)
' Get the series. '
'Your code here... '
Dim series = TryCast(removedPoint.Presenter, LineSeries)
End If
End Sub
For Line/Area/Spline/SplineArea series selection refers to selecting the pointmarks and is therefore triggered when clicking any of the corresponding pointmarks. You will need to define a PointMarkTemplate so the item can be selected. For example:
<telerik:LineSeries>
<telerik:LineSeries.PointTemplate>
<DataTemplate>
<Ellipse Height="8" Width="8" Fill="Yellow" Stroke="Black" />
</DataTemplate>
</telerik:LineSeries.PointTemplate>
</telerik:LineSeries>
In order distinguish the selected point from the not-selected one (for example to change the Ellipse color) in the SelectionChanged event you will have to get the series' ContentPresenter:
private void RadChart1_SelectionChanged(object sender, ChartSelectionChangedEventArgs e)
{
//Handle selection of the current point
if (e.AddedPoints.Count > 0)
{
var addedPoint = e.AddedPoints[0];
var series = addedPoint.Presenter as LineSeries;
//Get the Content Presenter of the series
var pointPresenter = series.
ChildrenOfType<ContentPresenter>().
Where(cp => cp.Tag == addedPoint).FirstOrDefault();
var ellipseElement = pointPresenter.
ChildrenOfType<Ellipse>().FirstOrDefault();
//Do whatever you want with it :)
ellipseElement.Fill = new SolidColorBrush(Colors.Red);
}
//Handle de-selection of the current point
if (e.RemovedPoints.Count > 0)
{
var removedPoint = e.RemovedPoints[0];
var series = removedPoint.Presenter as LineSeries;
var pointPresenter = series.
ChildrenOfType<ContentPresenter>().
Where(cp => cp.Tag == removedPoint).FirstOrDefault();
var ellipseElement = pointPresenter.
ChildrenOfType<Ellipse>().FirstOrDefault();
//Do whatever you want with it :)
ellipseElement.Fill = new SolidColorBrush(Colors.Yellow);
}
}
Private Sub RadChart1_SelectionChanged(sender As Object, e As ChartSelectionChangedEventArgs)
'Handle selection of the current point '
If e.AddedPoints.Count > 0 Then
Dim addedPoint = e.AddedPoints(0)
Dim series = TryCast(addedPoint.Presenter, LineSeries)
Dim pointPresenter = series.ChildrenOfType(Of ContentPresenter)().Where(Function(cp) cp.Tag = addedPoint).FirstOrDefault()
Dim ellipseElement = pointPresenter.ChildrenOfType(Of Ellipse)().FirstOrDefault()
'Do whatever you want with it :) '
ellipseElement.Fill = New SolidColorBrush(Colors.Red)
End If
'Handle de-selection of the current point '
If e.RemovedPoints.Count > 0 Then
Dim removedPoint = e.RemovedPoints(0)
Dim series = TryCast(removedPoint.Presenter, LineSeries)
Dim pointPresenter = series.ChildrenOfType(Of ContentPresenter)().Where(Function(cp) cp.Tag = removedPoint).FirstOrDefault()
Dim ellipseElement = pointPresenter.ChildrenOfType(Of Ellipse)().FirstOrDefault()
'Do whatever you want with it :) '
ellipseElement.Fill = New SolidColorBrush(Colors.Yellow)
End If
End Sub
