Demonstrates a supplimentary control, the SciChartOverview. This control can be bound to a parent SciChartSurface and renders the first series on that surface in entirely. A reticule is overlaid on the SciChartOverview to show the portion of the parent data in the viewport.

Interact with the SciChartOverview by dragging the middle area to scroll, or the edges of the middle area to scale. Similarly as you pan the chart by dragging, the SciChartOverview updates to show the current section of the data in the viewport.

This doesn’t increase the memory burden by much as the SciChartOverview shares the same source data as the parent SciChartSurface.

Documentation Links

– Scrolling a Chart with the SciChartOverview
– Creating a Custom SciChartOverview with many series using the ScrollBar API
– SciChartScrollbar – per axis ScrollBars API
– SciChartOverview Type

// ScrollChartUsingOverviewControl.xaml

<UserControl x:Class="SciChart.Examples.Examples.ZoomAndPanAChart.ScrollChartUsingOverviewControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:s="http://schemas.abtsoftware.co.uk/scichart"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:ext="http://schemas.abtsoftware.co.uk/scichart/exampleExternals"             
             d:DesignHeight="400"
             d:DesignWidth="600"
             mc:Ignorable="d">
    <Grid>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

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

        <!-- The SciChartInteractionToolbar adds zoom, pan, zoom extents and rotate functionality -->
        <!-- to the chart and is included for example purposes. -->
        <!-- If you wish to know how to zoom and pan a chart then do a search for Zoom Pan in the Examples suite! -->
        <ext:SciChartInteractionToolbar TargetSurface="{Binding Source={x:Reference Name=sciChart}}" Grid.RowSpan="2"/>

        <!-- Declare the SciChartSurface -->
        <s:SciChartSurface x:Name="sciChart"
                                  Grid.Column="1">

            <s:SciChartSurface.RenderableSeries>

                <s:FastMountainRenderableSeries x:Name="mountainSeries"
                                                Fill="#771964FF"
                                                Stroke="#FF0944CF"/>

                <s:FastLineRenderableSeries x:Name="lineSeries"
                                            Stroke="#FF279B27"
                                            StrokeThickness="2"/>

            </s:SciChartSurface.RenderableSeries>

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

            <s:SciChartSurface.YAxis>
                <s:NumericAxis AxisAlignment="Right" GrowBy="0.1, 0.1" />
            </s:SciChartSurface.YAxis>

        </s:SciChartSurface>

        <!-- Declare the SciChartOverview and bind to the main chart -->
        <s:SciChartOverview Grid.Row="1" Grid.Column="1"
                                   DataSeries="{Binding Source={x:Reference Name=sciChart}, Path=RenderableSeries[1].DataSeries}"
                                   ParentSurface="{Binding Source={x:Reference Name=sciChart}}"
                                   SelectedRange="{Binding Source={x:Reference Name=sciChart}, Path=XAxis.VisibleRange, Mode=TwoWay}"/>

    </Grid>
</UserControl>

// ScrollChartUsingOverviewControl.xaml.cs

// *************************************************************************************
// SCICHART® Copyright SciChart Ltd. 2011-2022. All rights reserved.
//  
// Web: http://www.scichart.com
//   Support: support@scichart.com
//   Sales:   sales@scichart.com
// 
// ScrollChartUsingOverviewControl.xaml.cs is part of the SCICHART® Examples. Permission is hereby granted
// to modify, create derivative works, distribute and publish any part of this source
// code whether for commercial, private or personal use. 
// 
// The SCICHART® examples are distributed in the hope that they will be useful, but
// without any warranty. It is provided "AS IS" without warranty of any kind, either
// expressed or implied. 
// *************************************************************************************
using System.Windows;
using System.Windows.Controls;
using SciChart.Charting.Model.DataSeries;
using SciChart.Data.Model;
using SciChart.Examples.ExternalDependencies.Data;

namespace SciChart.Examples.Examples.ZoomAndPanAChart
{
    /// <summary>
    /// Interaction logic for ScrollChartUsingOverviewControl.xaml
    /// </summary>
    public partial class ScrollChartUsingOverviewControl : UserControl
    {
        public ScrollChartUsingOverviewControl()
        {
            InitializeComponent();
            this.Loaded += ScrollChartUsingOverviewControl_Loaded;
        }

        private void ScrollChartUsingOverviewControl_Loaded(object sender, RoutedEventArgs e)
        {
            // Performing multiple updates in a SuspendUpdates block is efficient as only one redraw is performed
            using (sciChart.SuspendUpdates())
            {
                // Create some DataSeries of type X=double, Y=double
                var dataSeries0 = new XyDataSeries<double, double>();
                var dataSeries1 = new XyDataSeries<double, double>();

                var data2 = DataManager.Instance.GetFourierSeries(1.0, 0.1);
                var data1 = DataManager.Instance.GetDampedSinewave(1500, 3.0, 0.0, 0.005, data2.Count);

                // Append data to series.
                dataSeries0.Append(data1.XData, data1.YData);
                dataSeries1.Append(data2.XData, data2.YData);

                mountainSeries.DataSeries = dataSeries0;
                lineSeries.DataSeries = dataSeries1;

                // Set initial zoom
                sciChart.XAxis.VisibleRange = new DoubleRange(3, 6);
                sciChart.ZoomExtentsY();
            }
        }
    }
}

< BACK TO ALL WPF CHART CHART EXAMPLES