Version

High Density Scatter Series

Topic Overview

Purpose

This topic provides information on using the XamDataChart™ control’s HighDensityScatterSeries type of series.

Required background

The following topics are prerequisites to understanding this topic:

Topic Purpose

This topic explains how to add the XamDataChart control

This topic explains how add the ScatterSeries to the XamDataChart

High Density Scatter Series

Overview

Use the XamDataChart control’s HighDensityScatterSeries series to bind and show scatter data ranging from hundreds to millions of data points with very little loading time. Because there are so many data points, the series displays the scatter data as tiny dots as opposed to full size markers, and displays areas with the most data using a higher color density representing a cluster of data points.

Preview

The following screenshot is a preview of the HighDensityScatterSeries series in the XamDataChart control bound to 500,000 data points. The areas colored bright red are the area with the highest concentration of data points.

High Density Scatter Series 1 1.png

Data Requirements

Similar to other types of scatter series in the XamDataChart control, the HighDensityScatterSeries series has the ItemsSource property for data binding. This property can be bound to objects implementing an IEnumerable interface.

In addition, each item in the items source must have two data columns for X and Y values to position a data point in the Cartesian coordinate system, and uses the XMemberPath and YMemberPath Path properties to map these data columns.

Data Binding

The following table summarizes the HighDensityScatterSeries series properties used for data binding.

Property Name Property Type * Description*

IEnumerable

Gets or sets the items source

string

Uses the ItemsSource property to determine where the X values reside on assigned items

string

Uses the ItemsSource property to determine where the Y values reside on the assigned items

Heat Color Scale

The Heat Color Scale is an optional feature that determines the color pattern within the series. The following table summarizes the properties used for determining the color scale.

Property Name Property Type * Description*

double

Defines the double value representing the minimum end of the color scale

double

Defines the double value representing the maximum end of the color scale

Color

Defines the point density color used at the bottom end of the color scale

Color

Defines the point density color used at the top end of the color scale

Example

The screenshot, following the table, demonstrates how the XamDataChart with the HeatMinimumColor and HeatMaximumColor properties of the HighDensityScatterSeries looks as a result of the following settings:

Property Value

Green

Orange

High Density Scatter Series 1 2.png

Following is the code that implements this example:

In XAML:

<ig:XamDataChart.Series>
   <ig:HighDensityScatterSeries
      XAxis="{Binding ElementName=numericXAxis}"
      YAxis="{Binding ElementName=numericYAxis}"
      ItemsSource="{Binding}"
      XMemberPath="XValue"
      YMemberPath="YValue"
      HeatMaximumColor="Orange"
      HeatMinimumColor="Green">
   </ig:HighDensityScatterSeries>
</ig:XamDataChart.Series>

Performance

Overview

The HighDensityScatterSeries series of the XamDataChart is performance optimized. There are many performance specific properties and methods designed to optimize the XamDataChart’s

performance when using hundreds to millions of data points.

Series Resolution

The HighDensityScatterSeries series’ Resolution property determines how aggressively the series consolidates display data. The higher the value, the more aggressively data is merged, and the

greater the performance of the series. While using lower values provide enhanced display resolution, it does so with correspondingly diminished performance.

Example

The screenshot, following the table, demonstrates how the XamDataChart renders with the following Resolution property of the HighDensityScatterSeries setting:

Property Value(1 – 10)

10

High Density Scatter Series 1 3.png

Following is the code implemented for this example:

In XAML:

<ig:XamDataChart.Series>
   <ig:HighDensityScatterSeries
      XAxis="{Binding ElementName=numericXAxis}"
      YAxis="{Binding ElementName=numericYAxis}"
      ItemsSource="{Binding}"
      XMemberPath="XValue"
      YMemberPath="YValue"
      Resolution="10">
   </ig:HighDensityScatterSeries>
</ig:XamDataChart.Series>

Progressive Loading

The XamDataChart control progressively renders the HighDensityScatterSeries series loading the data in pieces so that the UI remains responsive for the entire time it takes to load the XamDataChart . By default, the ProgressiveLoad property is set to true. While XamDataChart is rendering, the HighDensityScatterSeries series provides two ways in which you can display the loading status:

  • Listens for the ProgressiveLoadStatusChanged event allowing the loading status to display

  • The ProgressiveStatus property represents the progressive load series status with values ranging from 0 to 100; 100 being fully loaded. This property binds to controls that indicate the loading status such as a progress bar.

Example

The screenshot, following this table, illustrates how the XamDataChart renders with the HighDensityScatterSeries series ProgressiveLoadStatusChanged event configured:

Property Value

True

OnSeriesProgressiveLoadStatusChanged

High Density Scatter Series 1 4.png

The following is the code used to implement the preceding example:

In XAML:

<ig:XamDataChart.Series>
   <ig:HighDensityScatterSeries
      XAxis="{Binding ElementName=numericXAxis}"
      YAxis="{Binding ElementName=numericYAxis}"
      ItemsSource="{Binding}"
      XMemberPath="XValue"
      YMemberPath="YValue"
      Resolution="3"
      ProgressiveLoad="True"
      ProgressiveLoadStatusChanged="OnSeriesProgressiveLoadStatusChanged">
   </ig:HighDensityScatterSeries>
</ig:XamDataChart.Series>

In C#:

private void OnSeriesProgressiveLoadStatusChanged(object sender,
                                   ProgressiveLoadStatusEventArgs e)
{
   this.SeriesLoadingProgressBar.Value = e.CurrentStatus;
   if (e.CurrentStatus == 100)
   {
      SeriesLoadingPanel.Visibility = Visibility.Collapsed;
   }
}

In Visual Basic:

Private Sub OnSeriesProgressiveLoadStatusChanged(ByVal sender As Object, ByVal e As ProgressiveLoadStatusEventArgs)   Me.SeriesLoadingProgressBar.Value = e.CurrentStatus   If (e.CurrentStatus = 100) Then      SeriesLoadingPanel.Visibility = Visibility.Collapsed   End IfEnd Sub

Mouse over Support

The HighDensityScatterSeries series’ MouseOverEnabled property specifies whether or not the MouseOver event fires. The default setting for this property is False. The mouse over support for this series can be very expensive in terms of memory and performance. The main disadvantage of setting this value to false is the inability to render Tooltips.

Example

The screenshot, following this table, illustrates the rendering of the XamDataChart with the HighDensityScatterSeries series’ MouseOverEnabled property set as follows, and with a custom ToolTip:

Property Value

True

High Density Scatter Series 1 5.png

The following is the code used to implement the preceding example:

In XAML:

<ig:XamDataChart.Series>
   <ig:HighDensityScatterSeries
      XAxis="{Binding ElementName=numericXAxis}"
      YAxis="{Binding ElementName=numericYAxis}"
      ItemsSource="{Binding}"
      XMemberPath="XValue"
      YMemberPath="YValue"
      MouseOverEnabled="True"   >
      <ig:HighDensityScatterSeries.ToolTip>
         <StackPanel>
            <StackPanel Orientation="Horizontal">
               <TextBlock Text="X: " />
               <TextBlock Text="{Binding Item.XValue, StringFormat='#,##0.000'}" />
            </StackPanel>
            <StackPanel Orientation="Horizontal">
               <TextBlock Text="Y: " />
               <TextBlock Text="{Binding Item.YValue, StringFormat='#,##0.000'}" />
            </StackPanel>
         </StackPanel>
      </ig:HighDensityScatterSeries.ToolTip>
   </ig:HighDensityScatterSeries>
</ig:XamDataChart.Series>

Brute Force Mode

The UseBruteForce property of the HighDensityScatterSeries series determines how the series rendering. When this property is set to true, the series will not build its internal data structures for rendering, but instead renders all the data points every time, thus allowing for quicker initial load time and less memory usage; however, subsequent navigation through the data is significantly slower.

Example

The screenshot following this table illustrates the rendering of the XamDataChart with the HighDensityScatterSeries series’ UseBruteForce property set as follows:

Property Value

True

High Density Scatter Series 1 6.png

The following is the code used to implement the preceding example:

In XAML:

<ig:XamDataChart.Series>
   <ig:HighDensityScatterSeries
       XAxis="{Binding ElementName=numericXAxis}"
       YAxis="{Binding ElementName=numericYAxis}"
       ItemsSource="{Binding}"
       XMemberPath="XValue"
       YMemberPath="YValue"
       ProgressiveLoadStatusChanged="OnSeriesProgressiveLoadStatusChanged"
       UseBruteForce="True">
   </ig:HighDensityScatterSeries>
</ig:XamDataChart.Series>

Point Size

The HighDensityScatterSeries series’ PointExtent property raises the minimum point size used for rendering high density scatter series’ points. The point size directly affects the series performance, where the higher the PointExtent property value the lower the performance.

Example

The screenshot, following this table, illustrates how the XamDataChart renders with the HighDensityScatterSeries series’ PointExtent property configured thusly:

Property Value

7

High Density Scatter Series 1 7.png

The following is the code used to implement the preceding example:

In XAML:

<ig:XamDataChart.Series>
   <ig:HighDensityScatterSeries
      XAxis="{Binding ElementName=numericXAxis}"
      YAxis="{Binding ElementName=numericYAxis}"
      ItemsSource="{Binding}"
      XMemberPath="XValue"
      YMemberPath="YValue"
      PointExtent="7">
   </ig:HighDensityScatterSeries>
</ig:XamDataChart.Series>

Related Content

The following topics provide additional information related to this topic.

Topic Purpose

This topic provides information on how to add the XamDataChart control to an application page.

This topic provides information on the scatter series available in the XamDataChart control.