Telerik UI for Windows Phone by Progress

This topic introduces the SelectionBehavior and explains its properties.

Introduction

The SelectionBehavior is a type of visualization that allow users to "select" part of the series or the whole series. This behavior can bring much more user interactivity to RadChart and make the data in the chart much easier to understand.

Types of selection

RadChart supports two types of selection:

  • DataPointSelection

  • SeriesSelection

This ensures different selection behaviors for the different types of series depending on their logical structure. For example the BarSeries and the PieSeries consist of different data points so DataPointSelection should be used. On the contrary, for LineSeries and AreaSeries for example, using this type of selection does not make sense, but the SeriesSelection can be used in a chart with more than on of these series to select only some of them. The SelectionPalette is used to specify the colours that will be used for the items of the chart while they are selected.

DataPointSelection

The DataPointSelection can be used on BarSeries, for example. Then the selection would be one or some of the bars. Here is an example:

CopyXAML
<chart:RadCartesianChart x:Name="chart" Palette="Warm" SelectionPalette="WarmSelected">

  <chart:RadCartesianChart.HorizontalAxis>
    <chart:CategoricalAxis/>
  </chart:RadCartesianChart.HorizontalAxis>

  <chart:RadCartesianChart.VerticalAxis>
    <chart:LinearAxis/>
  </chart:RadCartesianChart.VerticalAxis>

  <chart:RadCartesianChart.Behaviors>
    <chart:ChartSelectionBehavior/>
  </chart:RadCartesianChart.Behaviors>

  <chart:BarSeries CombineMode="Stack">
    <chart:BarSeries.DataPoints>
      <chartEngine:CategoricalDataPoint Value="10" Category="1"/>
      <chartEngine:CategoricalDataPoint Value="4"  Category="2"/>
      <chartEngine:CategoricalDataPoint Value="7"  Category="3"/>
      <chartEngine:CategoricalDataPoint Value="11" Category="4"/>
      <chartEngine:CategoricalDataPoint Value="15" Category="5"/>
    </chart:BarSeries.DataPoints>
  </chart:BarSeries>
  <chart:BarSeries CombineMode="Stack">
    <chart:BarSeries.DataPoints>
      <chartEngine:CategoricalDataPoint Value="7" Category="1"/>
      <chartEngine:CategoricalDataPoint Value="8" Category="2"/>
      <chartEngine:CategoricalDataPoint Value="5" Category="3"/>
      <chartEngine:CategoricalDataPoint Value="4" Category="4"/>
      <chartEngine:CategoricalDataPoint Value="7" Category="5"/>
    </chart:BarSeries.DataPoints>
  </chart:BarSeries>

</chart:RadCartesianChart>

SeriesSelection

The SeriesSelection can be used on AreaSeries, for example. When there are some AreaSeries with CombineMode set to Stack, the selection would be one or more of the series. Here is an example:

CopyXAML
<chart:RadCartesianChart x:Name="myChart" Height="300" Palette="Warm" SelectionPalette="WarmSelected">

  <chart:RadCartesianChart.Behaviors>
    <chart:ChartSelectionBehavior SeriesSelectionMode="Multiple"/>
  </chart:RadCartesianChart.Behaviors>

  <chart:RadCartesianChart.HorizontalAxis>
    <chart:CategoricalAxis/>
  </chart:RadCartesianChart.HorizontalAxis>

  <chart:RadCartesianChart.VerticalAxis>
    <chart:LinearAxis/>
  </chart:RadCartesianChart.VerticalAxis>

  <chart:AreaSeries CombineMode="Stack" AllowSelect="True" >
    <chartEngine:CategoricalDataPoint Value="3"/>
    <chartEngine:CategoricalDataPoint Value="1"/>
    <chartEngine:CategoricalDataPoint Value="2"/>
    <chartEngine:CategoricalDataPoint Value="5"/>
    <chartEngine:CategoricalDataPoint Value="6"/>
  </chart:AreaSeries>
  <chart:AreaSeries CombineMode="Stack" AllowSelect="True" >
    <chartEngine:CategoricalDataPoint Value="5"/>
    <chartEngine:CategoricalDataPoint Value="3"/>
    <chartEngine:CategoricalDataPoint Value="4"/>
    <chartEngine:CategoricalDataPoint Value="2"/>
    <chartEngine:CategoricalDataPoint Value="3"/>
  </chart:AreaSeries>

</chart:RadCartesianChart>
Note

Note that the AllowSelect property must be set to True to enable selection on the series. Also, it is a good idea that the TouchTargetOverhang property of the SelectionBehavior if the desired selection is LineSeries since it would be difficult to select a thin line.

TouchTargetOverhang Property

On touch devices it is a frequent scenario that the user wanted to tap on something but the tap event did not fire because the target was too small and the user did not tap on the right spot. The SelectionBehavior exposes the property TouchTargetOverhang. It makes the selectable area larger so it is easier for the user to make a selection even if its size is relatively small. TouchTargetOverhang is of type Thickness and has a default value of 0.

SelectedPointOffset Property

When applied to PieSeries, the SelectionBehavior has a special offset to emphasize the selection:

radchart-features-selection-offset

This offset is controlled by the SelectedPointOffset property in the PieSeries. This property is of type double and has a default value of 0.15. Here is the previous example without any offset on the selected slice:

CopyXAML
<chart:RadPieChart Palette="Warm" SelectionPalette="WarmSelected">

  <chart:RadPieChart.Behaviors>
    <chart:ChartSelectionBehavior/>
  </chart:RadPieChart.Behaviors>

  <chart:PieSeries SelectedPointOffset="0">
    <chartEngine:PieDataPoint Value="10"/>
    <chartEngine:PieDataPoint Value="14"/>
    <chartEngine:PieDataPoint Value="19"/>
    <chartEngine:PieDataPoint Value="29"/>
  </chart:PieSeries>

</chart:RadPieChart>