Knowledgebase: Scrolling and Viewport
Scrolling a Chart with the SciChartOverview
Posted by Andrew BT on 19 November 2014 09:53 AM

What is the SciChartOverview?

The SciChartOverview is a specialized form of SciChartScrollBar, which allows scrolling on the XAxis only, displaying a chart with all your data behind it. 

SciChartOverview for XAxis Scrolling

How to use the SciChartOverview

The SciChartOverview is demonstrated in our Scroll Chart using Overview example in the examples suite. 

In order to declare an overview, you need to declare a SciChartOverview control and bind to the ParentSurface, the ParentSurface.XAxis.VisibleRange and a DataSeries (denoting which data-series to display on the chart)

<Grid>
	<Grid.RowDefinitions>
		<RowDefinition Height="*" />
		<RowDefinition Height="32" />            
	</Grid.RowDefinitions>

	<!-- Declare a SciChartSurface -->
	<sciChart:SciChartSurface x:Name="sciChart" Grid.Row="0" sciChart:ThemeManager.Theme="Oscilloscope">

		<sciChart:SciChartSurface.RenderableSeries>
			<sciChart:FastMountainRenderableSeries x:Name="mountainSeries" AreaBrush="#771964FF" SeriesColor="#FF0944CF"/>
			<sciChart:FastLineRenderableSeries x:Name="lineSeries" SeriesColor="#FF279B27" StrokeThickness="2" />
		</sciChart:SciChartSurface.RenderableSeries>

		<sciChart:SciChartSurface.XAxis>
			<sciChart:NumericAxis GrowBy="0.1, 0.1" />
		</sciChart:SciChartSurface.XAxis>

		<!--  Create Y Axes on the Left and Right  -->
		<sciChart:SciChartSurface.YAxes>
			<sciChart:NumericAxis AxisAlignment="Right" TickTextBrush="#FF279B27" GrowBy="0.1, 0.1" />
		</sciChart:SciChartSurface.YAxes>

		<sciChart:SciChartSurface.ChartModifier>
			<sciChart:ModifierGroup>
				<sciChart:ZoomPanModifier XyDirection="XDirection"/>
				<sciChart:ZoomExtentsModifier ExecuteOn="MouseDoubleClick" />
			</sciChart:ModifierGroup>
		</sciChart:SciChartSurface.ChartModifier>

	</sciChart:SciChartSurface>

	<!-- Declare the SciChartOverview. You need to bind ... -->
	<!-- 1. ParentSurface 									-->
	<!-- 2. DataSeries (which data series to display) 		-->
	<!-- 3. SelectedRange (TwoWay to XAxis.VisibleRange 	-->
	<sciChart:SciChartOverview Grid.Row="1" ParentSurface="{Binding ElementName=sciChart}"
							   DataSeries="{Binding ElementName=sciChart, Path=RenderableSeries[1].DataSeries}"
							   SelectedRange="{Binding ElementName=sciChart, Path=XAxis.VisibleRange, Mode=TwoWay}"
							   sciChart:ThemeManager.Theme="Oscilloscope" >            
	</sciChart:SciChartOverview>

</Grid>

Selecting Which DataSeries to display

The SciChartOverview only supports one data-series. It displays all of the data in the data-series, giving you an 'overview' of the data in your chart. You can select the data-series it displays via the SciChartOverview.DataSeries property. 

Getting a Notification of Selected Range Changed

We advise subscribing to AxisBase.VisibleRangeChanged on the ParentSurface.XAxis itself, as this will be fired whenever the range changes.

Alternatively, you can create your own custom Overview using the SciChartScrollBar API in v3.2, and subscribe to the SelectedRangeChanged event.

Styling the SciChartOverview

Since SciChart v3.2, the SciChartOverview control now uses the Scrollbar API at its core. You can style the scrollbar element directly by changing the SciChartOverview.ScrollbarStyle property

<!--  SciChartOverviewControl Style hosted in resource dictionary  -->
<UserControl.Resources>
	<Style x:Key="OverviewScrollbarStyle" TargetType="visuals:SciChartScrollbar">
		<Setter Property="Orientation" Value="Horizontal" />
		<Setter Property="GripsLength" Value="25" />
		<Setter Property="ViewportStyle">
			<Setter.Value>
				<Style TargetType="Control">
					<Setter Property="Opacity" Value="0" />
				</Style>
			</Setter.Value>
		</Setter>
		<Setter Property="NonSelectedAreaStyle">
			<Setter.Value>
				<Style TargetType="Path">
					<Setter Property="Fill" Value="{z:ThemeBinding Path=OverviewFillBrush}" />
				</Style>
			</Setter.Value>
		</Setter>
	</Style>
</UserControl.Resources>

<s:SciChartOverview ScrollbarStyle="{StaticResource OverviewScrollbarStyle}"/>

You can also set the following properties, which allow changing the some basic brushes in the SciChartOverview:

  • Background, Foreground
  • AreaBrush (for mountain series), SeriesColor (for bound renderable series)
  • Padding

Templating the SciChartOverview

For SciChart v3.2+, the Control Template for the SciChartOverview is defined as follows. 

<ControlTemplate TargetType="visuals:SciChartOverview">
	<Grid Name="PART_Container">
		<visuals:SciChartSurface x:Name="PART_BackgroundSurface"
								 Background="{TemplateBinding Background}"
								 BorderThickness="0"
								 FontSize="{TemplateBinding FontSize}"
								 FontWeight="{TemplateBinding FontWeight}"
								 Foreground="{TemplateBinding Foreground}"
								 Padding="{TemplateBinding Padding}">

			<visuals:SciChartSurface.RenderableSeries>
				<r:FastMountainRenderableSeries AreaBrush="{TemplateBinding AreaBrush}"
												DataSeries="{TemplateBinding DataSeries}"
												SeriesColor="{TemplateBinding SeriesColor}" />
			</visuals:SciChartSurface.RenderableSeries>

			<visuals:SciChartSurface.YAxis>
				<axes:NumericAxis AutoRange="Always"
								  DrawMajorGridLines="False"
								  DrawMinorGridLines="False"
								  TextFormatting="###E+0"
								  Visibility="Collapsed">
					<axes:NumericAxis.GrowBy>
						<s:DoubleRange Max="0.1" Min="0.0" />
					</axes:NumericAxis.GrowBy>
				</axes:NumericAxis>
			</visuals:SciChartSurface.YAxis>

		</visuals:SciChartSurface>

		<visuals:SciChartScrollbar x:Name="PART_Scrollbar"
								   Axis="{TemplateBinding Axis}"
								   Style="{TemplateBinding ScrollbarStyle}" />
	</Grid>
</ControlTemplate>

For SciChart v3.1, the ControlTemplate for the SciChartOverview is defined as follows.

<ControlTemplate TargetType="visuals:SciChartOverview">
	<Grid Name="PART_Container">

		<visuals:SciChartSurface x:Name="PART_OverviewControl"
								 Background="{TemplateBinding Background}"
								 BorderThickness="0"
								 FontSize="{TemplateBinding FontSize}"
								 FontWeight="{TemplateBinding FontWeight}"
								 Foreground="{TemplateBinding Foreground}"
								 Padding="{TemplateBinding Padding}">

			<visuals:SciChartSurface.RenderableSeries>
				<r:FastMountainRenderableSeries />
			</visuals:SciChartSurface.RenderableSeries>

			<visuals:SciChartSurface.YAxis>
				<axes:NumericAxis AutoRange="Always"
								  DrawMajorGridLines="False"
								  DrawMinorGridLines="False"
								  TextFormatting="###E+0"
								  Visibility="Collapsed">
					<axes:NumericAxis.GrowBy>
						<s:DoubleRange Max="0.1" Min="0.0" />
					</axes:NumericAxis.GrowBy>
				</axes:NumericAxis>
			</visuals:SciChartSurface.YAxis>

		</visuals:SciChartSurface>

		<StackPanel Name="PART_RangeSliderContainer" Orientation="Horizontal">
			<Rectangle Name="PART_LeftEdge" />
			<Thumb Name="PART_LeftThumb" Cursor="SizeWE" />
			<Thumb Name="PART_MiddleThumb"
				   Cursor="Hand"
				   Opacity="0" />
			<Thumb Name="PART_RightThumb" Cursor="SizeWE" />
			<Rectangle Name="PART_RightEdge" />
		</StackPanel>

	</Grid>
</ControlTemplate>

 

For older versions of SciChart, we have this FAQ on styling the SciChartOverview by changing its control template.

Frequently Asked Questions

Please see our site-search for SciChartOverview Frequently Asked Questions. Some of the key FAQs are highlighted below.

Q: Can I get a SciChartOverview on the YAxis?

Kind of! You can use our SciChartScrollBar API to host scrollbars on both X and Y Axes

Q: Can I customize the SciChartOverview Axis,
      .. or display more than one series,
      .. or display an image behind the SciChartOverview? 

Yes, by changing the ControlTemplate of the SciChartOverview (see above), or, alternatively by creating a custom control which uses our new ScrollBar API (part of SciChart v3.2)

Q: I want to add a SciChartOverview to an ItemsControl, or to the SciChartGroup control. How do I do this?

Please see this KB article How to add a SciChartOverview to an ItemsControl or SciChartGroup Control

 

 

(1 vote(s))
Helpful
Not helpful

Comments (1)
Jumana
31 March 2015 08:06 PM
I used two rectangles. The first one as you did; the whole grdnieat painted out. The second, a mask box as you had. But I showed more of the color grdnieat by applying a RenderTransform with the ScaleX property bound to whatever value controls it.I also had to set flow direction for the mask box from RightToLeft so it would shrink in the correct way to allow more grdnieat from the bottom verses from the top.

CONTACT US

Not sure where to start? Contact us, we are happy to help!


CONTACT US

SciChart Ltd, 16 Beaufort Court, Admirals Way, Docklands, London, E14 9XL. Email: Legal Company Number: 07430048, VAT Number: 101957725