Version

Series Highlighting

Topic Overview

Purpose

This topic provides information on enabling the series highlighting feature along with a listing of the supported series. This topic also explains how to configure the series highlighting using the available events.

Required background

The following topic is a prerequisite to understanding this topic:

Topic Purpose

The XamDataChart requires a data object model to be mapped to control’s DataContext property. This article will provide a simple data object model but you can create your own and use it with this sample code instead.

Series Highlighting

Overview

This feature allows you to highlight an entire series or individual items within the series. For example, highlights the entire line in a series such as the LineSeries as it is all one shape; however, highlights can be applied to each individual column in a series such as ColumnSeries. Individual markers can be highlighted in all supported series.

Currently the feature only supports highlighting via the mouse.

The series highlighting feature is supported for the following series types:

Preview

The following screenshot is a preview of the xam DataChart control with a ColumnSeries and the series highlighting feature enabled.

xamDataChart Series Highlighting 01.png

Properties

The following table summarizes the properties used for series highlighting. These properties are set on the supported series.

Property Name Property Type * Description*

Boolean

Enables the series highlighting feature, by default it is set to False.

TimeSpan

Determines the duration that the highlighting change takes.

Example

The screenshot, following the table, demonstrates how a chart with the IsHighlightingEnabled and HighlightingTransitionDuration properties of the ColumnSeries looks as a result of the following settings:

xamDataChart Series Highlighting 01.png

Following is the code that implements this example:

In XAML:

<ig:XamDataChart x:Name="xamColumnChart"
                 HighlightingTransitionDuration="00:00:10"
 <ig:XamDataChart.Series>
 <ig:ColumnSeries ItemsSource="{Binding EnergySampleData}"
                       ValueMemberPath="Coal"
                       Source="{StaticResource DataViewModel}"
                       XAxis="{Binding ElementName=ColumnXAxis}"
                       YAxis="{Binding ElementName=ColumnYAxis}"
                       IsHighlightingEnabled="True">
 </ig:ColumnSeries>
 </ig:XamDataChart.Series>
</ig:XamDataChart>

Events

Overview

There are two events that are specifically related to the series highlighting feature.

The series highlighting feature is supported for the following series types:

These events can be configured to achieve the following:

  • Modify the way that the highlighting is represented

  • Modify the appearance properties assigned to the entire series such as a LineSeries, or each individual item in the series for the series having individual items such as ColumnSeries.

When using the above events to configure the highlighting on the series, only the properties that are available on that particular series can be used. For example, overriding the Fill or RadiusX property of a LineSeries does not have any affect since those properties do not affect the LineSeries.

Event Arguments Properties

The following table summarizes the properties of the AssigningCategoryStyleEventArgsBase.

Property Name Property Type * Description*

Int

Start index of the range of data that is currently being highlighted.

Int

End index of the range of the data that is currently being highlighted.

DateTime

Start date of the range of data that is currently being highlighted.

DateTime

End date of the range of data that is currently being highlighted.

GetCategoryItemsEventHandler

Actual items from the data source being highlighted. However, if there is a lot of data and you called it every time the event was fired, will negatively impact performance.

Brush

Overrides the default Fill property of the series. However, this property only takes affect if the Fill property only affects that particular series.

Brush

Overrides the default Stroke property of the series.

Double

Overrides the default the Opacity property of the series.

HiglightingInfo

Determine the styling of the highlighted series.

Double

Progress state of the highlighting of the series. Value from 0 to 1.

Double

Progress state of the highlighting of the series. Value from 0 to 1.

Bool

When set to True the default highlighting does not apply.

Bool

Determines the event has a valid date range

The AssigningCategoryMarkerStyleEventArgs inherit all the same properties as the AssigningCategoryStyleEventArgsBase as listed in the table above.

Example

The following screenshot displays an example of using the AssigningCategoryStyle event to change the highlighting feature to fade non highlighting columns instead of changing the highlighting column.

xamDataChart Series Highlighting 02.png

Following is the code implemented for this example:

In C#:

private void CategorySeries_OnAssigningCategoryStyle(object sender, AssigningCategoryStyleEventArgs args)
{
 double minOpacity = .3, opacity = 1.0;
   if (args.SumAllSeriesHighlightingProgress > 0.0)
   {
      var progress = 0.0;
      if (args.HighlightingInfo != null)
      {
         progress = args.HighlightingInfo.Progress;
      }
      progress = progress - args.SumAllSeriesHighlightingProgress;
      opacity = minOpacity + (1.0 + progress) * (1.0 - minOpacity);
      args.Opacity = opacity;
      args.HighlightingHandled = true;
      for (var i = 0; i < this.DataChart.Series.Count; i++)
      {
         var curr = this.DataChart.Series[i];
         var series = sender as Infragistics.Controls.Charts.Series;
         if (series != null && series.Name != curr.Name)
         {
            curr.NotifyVisualPropertiesChanged();
         }
      }
   }
}

In Visual Basic:

Private Sub CategorySeries_OnAssigningCategoryStyle(ByVal sender As Object, ByVal args As AssigningCategoryStyleEventArgs)
Dim minOpacity As Double 3
Dim opacity As Double 1
If (args.SumAllSeriesHighlightingProgress > 0) Then
 Dim progress As var = 0
 If (Not (args.HighlightingInfo) Is Nothing) Then
 progress = args.HighlightingInfo.Progress
 End If
 progress = (progress - args.SumAllSeriesHighlightingProgress)
 opacity = (minOpacity + ((1 + progress) * (1 - minOpacity)))
 args.Opacity = opacity
 args.HighlightingHandled = true
 Dim i As var = 0
 Do While (i < Me.DataChart.Series.Count)
 Dim curr As var = Me.DataChart.Series(i)
 Dim series As var = CType(sender,Infragistics.Controls.Charts.Series)
 If ((Not (series) Is Nothing)
 AndAlso (series.Name <> curr.Name)) Then
 curr.NotifyVisualPropertiesChanged
 End If
 i = (i + 1)
 Loop
 End If
End Sub

Related Content

The following topics provide additional information related to this topic:

Topic Purpose

The XamDataChart requires a data object model to be mapped to control’s DataContext property. This article will provide a simple data object model but you can create your own and use it with this sample code instead.

This section is your gateway to important conceptual and task-based information that will help you to use the various features and functionalities provided by the XamDataChart control.