Pre loader

Tag: SciChartScrollBar

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums

0 votes
0 answers
2k views

Hello,

I created a custom chart modifier that moves a vertical line to the position where the user clicks on the scichart surface (I used OnModifierMouseUp to listen to this event), everything works well except the event fires also when the user scrolls or clicks on the scrollbar i defined for the x Axis (I guess because it is part of the surface anyway).

Is there a way to avoid the scrollbar interaction to fire this event? I’d like for it to be fired only when the user clicks directly on the data/surface rather than the scrollbar itself

Thanks a lot

1 vote
2k views

We’re working on a Nyquist plot using the latest SciChart SDK for WPF.
We have quite a MVVM dependent structure already in place.

We are working with 3D frequency based Complex data. The Nyquist plot would have 2 axes – Y for Imaginary values and X axis for Real values. We apply some averaging and post-processing of the 3D data to put in 2D form and show it in the Nyquist plot.

However, we’d like to be able to scroll the data at certain frequency ranges without showing the actual frequency graph in the plot. Is there a possibility to implement an independent scrollbar containing a averaged magnitude graph (similar idea to the processing of the Nyquist data) over a frequency range? We’d like to scroll this frequency range and on selected range changed to recalculate data in the Nyquist plot.

We have quite an extensive graphing structure implemented already. The main issue I’m currently facing is that the scrollbar is bound to the SciChartSurface and I cannot seem to figure out how to build it more like a “sexy” frequency range selector while staying within the SciChart library? Is there any possibility to not be bound to the SciChartSurface? And of course, the axes are quite different – in the Nyquist we have linear real and imaginary values (-2 to +2, for example) whereas the frequency range would extend much further data-wise (0 – 3000 Hz, for example).

Any help would be appreciated. Feel free to ask for more details.

0 votes
5k views

I am learning the official sample program: 2D Charts > Create Realtime Charts > 50-Channe EEG

I would like to modify this sample program to add a horizontal scrollbar and synchronize control of all channels, How do I do that?

The scrollbars need to be bound to an X-axis, but the charts in this example are in the ListBox and loaded from a template. How can I do this? Can you give me an example

  • hundun wds asked 2 years ago
  • last active 2 years ago
0 votes
6k views

As seen in the picture above.I want to use ScichartScrollBar to control the left and right movement of all items in the ListBox,And it doesn’t prevent me from dragging individual items.

What I mean by that is that when I use ScichartScrollBar I can control everything, and when I drag a single ListBoxItem it doesn’t affect all the other ListBoxItems

What should I do to achieve this effect?

  • zhang yu asked 3 years ago
  • last active 2 years ago
0 votes
0 answers
6k views

I am tryng to use ScichartScrollbar,and in trouble.

When view port range is beyond data binded with scrollbar and center of the scrollbar is clicked,data jumps horizontally.
please refer to the Picture below.
I used official sample program named SciChart_PerAxisScrollbar in the picture.
How can I stop this and scroll seamlessly?

0 votes
8k views

I would like to add scrollBar to SCINumericAxis for example xAxis.

I did find documentation:
https://www.scichart.com/documentation/v5.x/webframe.html#Scrollbars.html

But on iOS version, I can’t find numericAxis.Scrollbar is missing

0 votes
9k views

Hi team,

How to access, enable and disable scrollbar in c# wpf?

My declaration is as of below.

            <sc:SciChartScrollbar Axis="{Binding ElementName=SciChart, Path=XAxis}" Height="18" Width="150" />

Thanks in advance.

  • Adrian Loh asked 5 years ago
  • last active 5 years ago
0 votes
6k views

I created a custom control and created a theme for the visual of the SciChartSurface. The goal is to add/remove Y Axes as needed. The problem is only one Scrollbar is created for all the axes and as I add an axis the scroll bar gets bound to the latest axis.

But if I implement it as View/ViewModel and not a custom control, it works fine.

I’m evaluating SciChart for use in our product is this is my only issue with it. Any Ideas?

  • Joe Morin asked 6 years ago
  • last active 6 years ago
1 vote
10k views

How to programmatically add Scrollbars to MVVM instantiated axes?

I added DateTimeAxisViewModel and NumericAxisViewModel to my code. That works from so far. A way to add scrollbars i couldnt find a some tries.

Are there some ways to get this done? Maybe change the templates of the axes or the chart?

Best regards

0 votes
9k views

I am using a custom component based on the MultiPaneStockChart example which has the very nice overview scrollbar. I like a lot about this except for the scrolling behavior when clicked. When you click on either side of the “viewport” in the non-selected region it pans all the way to that spot. How would I go about changing this behavior so that it advances only one screen or page at a time (i.e. advances by the width or number of points that are in current XAxisVisibleRange)? In other words, if I am zoomed in on the middle of the chart so that only a portion is shown, whether I click immediately to the right of the viewport or two inches away it should scroll by the same amount. I see the SciChartScollBar exposes a SelectedRangeChanged event but I want to intercept before the range is changed. Thank you.

Best regards,
Lawson

0 votes
0 answers
12k views

Hi, I have a problem with Scrollbar at custom overview surface. I’ve made bigger grips to easy catch on smartphone / tablet but now it is really annoying that under viewport I don’t see the same thing that at main surface (part of chart is cover by grip). Viewport is bound to center of grip. Is it possible to bound viewport to internal grip borders?
Pawel

0 votes
13k views

I am using trial version of SciChart and doing some tests.

I need to bring scroll bar on top of X axis.

After some research and parsing visual tree, I am planning to change style of SciChartSurface and replace axis and scroll bar, which are placed inside stack panel.

Is this right solution? If AxisAlignment is Top, visual tree may differ. If this is right way to go, where can I find style of surface? Bland does not recognize chart and I can’t use it.

Thanks
Samvel

0 votes
10k views

I am using a SciChartScrollbar to scroll the Y axis of a plot. I was previously using SciChart 3.4 and the control worked well. My XAML is as follows:

    <Grid Grid.Column="1">

        <Grid.RowDefinitions>
            <RowDefinition Height="{Binding ActualYAxesHeightValue, ElementName=PropertyProxy, Mode=OneWay, Converter={StaticResource DoubleToGridLengthConverter}}"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <helpers:TotalSizeOfAxes x:Name="PropertyProxy" Element="{Binding ElementName=FormationChart}" />

        <s:SciChartSurface x:Name="OverviewSurface" s:ThemeManager.Theme="BrightSpark" Grid.Row="1" Loaded="OnOverviewSurfaceLoaded">
            <s:SciChartSurface.RenderableSeries>
                <sciChartExtensions:StepLineRenderableSeries DataSeries="{Binding HResistivityChartData, Mode=TwoWay}">
                    <s:FastLineRenderableSeries.Style>
                        <Style TargetType="s:FastLineRenderableSeries">
                            <Setter Property="Stroke" Value="Blue" />
                            <Setter Property="StrokeThickness" Value="1" />
                        </Style>
                    </s:FastLineRenderableSeries.Style>
                </sciChartExtensions:StepLineRenderableSeries>
            </s:SciChartSurface.RenderableSeries>

            <s:SciChartSurface.XAxis>
                <s:NumericAxis AxisAlignment="Left" DrawMajorGridLines="False" DrawMinorGridLines="False"
                               Visibility="Collapsed" />
            </s:SciChartSurface.XAxis>

            <s:SciChartSurface.YAxis>
                <s:LogarithmicNumericAxis AxisAlignment="Top" VisibleRange="0.2,2000" FlipCoordinates="True"
                                          DrawMajorGridLines="False" DrawMinorGridLines="False"
                                          Visibility="Collapsed"/>
            </s:SciChartSurface.YAxis>
        </s:SciChartSurface>

        <s:SciChartScrollbar x:Name="DepthScrollbar" Grid.Row="1" Axis="{Binding ElementName=DepthAxis}" VerticalAlignment="Top"
                             Margin="{Binding ElementName=FormationChart, Path=Padding, Mode=OneWay}"
                             Loaded="OnScrollbarLoaded">
        </s:SciChartScrollbar>

    </Grid>        

I have attached a picture of the plot. The scrollbar is black instead of transparent, and the width does not fill the grid column. I checked the knowledge base article on using this control, but I don’t think the article was updated for 4.x.

1 vote
13k views

I’m trying to create a chart where the visible range is scrolling “window” that advances ahead of the most recent data point when the data hits the edge so that the line is always moving from the center of the chart towards the edge.

Say we have data coming in once a second, we want the window to be 60 seconds wide and advance in increments of 30 seconds. In SciChart terms, we would begin with a data range of 0-0 and a visible range of 0-60. The line will start at the left edge of the chart and, as points come in, advance towards the right edge. When we get a point at t=60, we will programmatically advance the visible range by our increment so that we have a data range of 0-60 and a visible range of 30-90. The line will now be advancing from the middle of the chart to the right edge. When we hit t=90, we will advance the visible range again so data range = 0-90, visible range = 60-120. Again the line will advance from the center of the chart to the edge. And so on.

My current problem is the scrollbar. If I have a data range of 0-90 and a visible range of 60-120, the total extent of the chart as far as a normal viewer is concerned is 0-120. The scrollbar should reflect that, and the bit of the scrollbar that indicates the visible section should take up half its total width (0-60 being in the past and 60-120 being visible). Instead, the scrollbar is sized as though 0-60 is in the past and 60-90 is visible. Touching the scrollbar at all will, in fact, set the visible range to 60-90, re-rendering the chart and eliminating our buffer of visible space to the right. My question is how do I fix this behavior so that the scrollbar is aware of the “real” range of the chart which is neither data range nor visible range but a combination of the two?

0 votes
11k views

Hi Andrew,

I have a problem with the Scrollbar : when i Choosed “ZoomX” after this i pressed the button ” Zoom” the Scrollbar run but the curve removed like “first” picture and “second”,
i think that the problem in the scrollbar because in my application the scrollbar moves from right to left and in your application like picture”Scichart” the Scrollbar moves from left to right !!
So how can i do this!
Thank you!

Best Regards,
Sahar.

C# Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

using System.Timers;

using System.Windows.Threading;
using Abt.Controls.SciChart.Common;

using Abt.Controls.SciChart.Model.DataSeries;
using Abt.Controls.SciChart.Common.Helpers;
using Abt.Controls.SciChart;
using Common;
using System.Globalization;
using Microsoft.Win32;
using System.Diagnostics;
using Abt.Controls.SciChart.Visuals;
using System;
using System.Collections.Generic;
using System.Timers;
using Abt.Controls.SciChart.Model.DataSeries;
using Abt.Controls.SciChart.Numerics;
using Abt.Controls.SciChart.ChartModifiers;
using Abt.Controls.SciChart.Visuals.RenderableSeries;
using Abt.Controls.SciChart.Example.MVVM;
using Abt.Controls.SciChart.Example;
using Abt.Controls.SciChart.Visuals.Axes;
using Abt.Controls.SciChart.Example.Data;
using Abt.Controls.SciChart.Example.Common;
using Abt.Controls.SciChart.Example.Examples.IWantTo.AnnotateAChart.DragHorizontalThreshold;
using System.Collections.ObjectModel;
using System.Windows.Annotations;
using Abt.Controls.SciChart.Visuals.Annotations;


namespace BeanGUI
{
/// <summary>
/// Interaction logic for SensorGraph2D.xaml
/// </summary>
public partial class SensorGraph2D : UserControl, IExampleAware
{


    private IXyDataSeries<DateTime, double> series1;

    public double _Threshold;
    public Boolean chkBx_Threshold_checked = false;
    private bool _isMouseDoubleClick;
    private bool _isZoomEnabled;
    private bool _isPanEnabled;
    private TimedMethod _startDelegate;
    public Boolean Zoom_test = false;
    public int cpt = 0;
    private readonly Abt.Controls.SciChart.ActionCommand _zoomModeCommand;
    private I_BeanSensorModel sensor;

    private readonly Abt.Controls.SciChart.ActionCommand _panModeCommand;

    public double Measure_val;
    Boolean Circle = false;
    public string date_val;
    private IndexRange _xVisibleRange;
    public double val_Threshold;
    public int i = 0;
    public int h = 0;
    public double st;

    string[] Tab = new string[4];
    public SensorGraph2D()
    {
        InitializeComponent();
        _zoomModeCommand = new Abt.Controls.SciChart.ActionCommand(SetZoomMode);
        _panModeCommand = new Abt.Controls.SciChart.ActionCommand(SetPanMode);
        IsPanEnabled = true;


        /* for foreach all themeManager */


        foreach (string theme in ThemeManager.AllThemes)
        {
            cboTheme.Items.Add(theme);
        }
        cboTheme.SelectedItem = "Oscilloscope";


    }


    public ICommand ZoomModeCommand { get { return _zoomModeCommand; } }

    public ICommand PanModeCommand { get { return _panModeCommand; } }

    public bool IsZoomEnabled
    {
        get { return _isZoomEnabled; }
        set
        {
            _isZoomEnabled = value;

        }
    }
    public bool IsPanEnabled
    {
        get { return _isPanEnabled; }
        set
        {
            _isPanEnabled = value;

        }
    }

    private void SetPanMode()
    {
        IsPanEnabled = true;
        IsZoomEnabled = false;
    }

    private void SetZoomMode()
    {

        IsZoomEnabled = true;
    }


    public double Threshold
    {
        get { return _Threshold; }
        set
        {
            _Threshold = value;

        }
    }


    public IndexRange XVisibleRange
    {
        get { return _xVisibleRange; }
        set
        {
            if (Equals(_xVisibleRange, value))
                return;
            _xVisibleRange = value;
            OnPropertyChanged("XVisibleRange");

        }
    }

    private void OnPropertyChanged(string p)
    {
        throw new System.NotImplementedException();
    }

    public void CreateDataSetAndSeries_Alarm(List<DateTime> lstX1, List<double> lstY1)
    {
        series1 = new XyDataSeries<DateTime, double>();

        using (this.sciChartSurface.SuspendUpdates())
        {

            series1.Append(lstX1, lstY1);

        }
        redLine.DataSeries = series1;
        if (Zoom_test == false)
        {
            sciChartSurface.ZoomExtentsY();
        }

    }


    public double maxValuesY()
    {
        return (double)series0.YMax;
    }

    public double minValuesY()
    {
        return (double)series0.YMin;
    }

    public DateTime maxValuesX()
    {
        return (DateTime)series0.XMax;
    }

    public DateTime minValuesX()
    {
        return (DateTime)series0.XMin;
    }


    public void ClearDataSeries1()
    {
        if (series1 == null)
            return;

        using (this.sciChartSurface.SuspendUpdates())
        {
            series1.Clear();
        }
    }



    /* for the Theme Changed*/
    private void cboThemeChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e)
    {

        ThemeManager.SetTheme(sciChartSurface, (string)cboTheme.SelectedItem);
        ThemeManager.SetTheme(sciChartSurface, (string)cboTheme.SelectedItem);

    }

    /*Point values*/
    public void SeriesSelectionModifier_SelectionChanged(object sender, EventArgs e)
    {
        if (Circle == true)
        {
            OnSeriesSelectionChanged();
        }
    }
    public void OnSeriesSelectionChanged()
    {
        bool hasSelection = sciChartSurface.SelectedRenderableSeries.Any();

    }


    private void CopyToClipboardClick(object sender, RoutedEventArgs e)
    {

        var bmp = this.sciChartSurface.ExportToBitmapSource();
        Clipboard.SetImage(bmp);

        MessageBox.Show("Copied to Clipboard!");
    }

    private void SaveAsPngClick(object sender, RoutedEventArgs e)
    {
        var dialog = new SaveFileDialog();
        dialog.DefaultExt = "png";
        dialog.AddExtension = true;
        dialog.Filter = "Png Files|*.png";
        dialog.InitialDirectory = Environment.GetFolderPath(Environment.SpecialFolder.Desktop);
        if (dialog.ShowDialog() == true)
        {
            this.sciChartSurface.ExportToFile(dialog.FileName, ExportType.Png);
            Process.Start(dialog.FileName);
        }
    }


    private void ZoomExtendsClick(object sender, RoutedEventArgs e)
    {
        sciChartSurface.ZoomExtents();

        Zoom_test = false;
        this.panModifier.IsEnabled = false;
    }
    private void PrintToXpsClick(object sender, RoutedEventArgs e)
    {
        var dialog = new PrintDialog();
        if (dialog.ShowDialog() == true)
        {
            var size = new Size(dialog.PrintableAreaWidth, dialog.PrintableAreaWidth * 3 / 4);

            var scs = CreateSciChartSurfaceWithoutShowingIt(size);


            Action printAction = () => dialog.PrintVisual(scs, "Programmer Awesomeness");
            Dispatcher.BeginInvoke(printAction);
        }
    }

    private void ZoomExtentsY_Checked(object sender, RoutedEventArgs e)
    {
        this.XAxis.AutoRange = AutoRange.Always;
        this.YAxis.AutoRange = AutoRange.Never;
        if (rubberBandZoomModifier != null)
        {

            var checkBox = (CheckBox)sender;
            rubberBandZoomModifier.ZoomExtentsY = checkBox.IsChecked == true;
        }
    }
    private void ZoomExtentsX_Checked(object sender, RoutedEventArgs e)
    {

        this.YAxis.AutoRange = AutoRange.Always;
        this.XAxis.AutoRange = AutoRange.Never;
        if (rubberBandZoomModifier != null)
        {
            var checkBox = (CheckBox)sender;
            rubberBandZoomModifier.IsXAxisOnly = checkBox.IsChecked == true;
        }
    }

    private void ZoomClick(object sender, RoutedEventArgs e)
    {

        Zoom_test = true;


    }

    private void ZoomPanModifier_MouseDown(object sender, MouseButtonEventArgs e)
    {
        this.XAxis.AutoRange = AutoRange.Never;
        this.YAxis.AutoRange = AutoRange.Never;
    }

    private void UserControl_Loaded(object sender, RoutedEventArgs e)
    {

    }

    public void OnExampleExit()
    {
        throw new System.NotImplementedException();

    }

    public void OnExampleEnter()
    {
        throw new System.NotImplementedException();
    }
    public void CursorModifier_MouseDown(object sender, MouseButtonEventArgs e)
    {

        this.XAxis.Scrollbar.IsEnabled = false;
        System.Diagnostics.Debug.WriteLine("Sahar====>");
    }


    private void chkBx_Threshold_Checked(object sender, RoutedEventArgs e)
    {
        chkBx_Threshold_checked = true;
    }

    private void chkBx_Threshold_Unchecked(object sender, RoutedEventArgs e)
    {
        chkBx_Threshold_checked = false;

        ClearDataSeries1();
    }




}
}

XAML CODE

<UserControl x:Class="BeanGUI.SensorGraph2D"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:SciChart="http://schemas.abtsoftware.co.uk/scichart" 
         xmlns:helpers="clr-namespace:Abt.Controls.SciChart.Example.Helpers;assembly=Abt.Controls.SciChart.Example"
          xmlns:Common="clr-namespace:Abt.Controls.SciChart.Example.Common;assembly=Abt.Controls.SciChart.Example"
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300" Loaded="UserControl_Loaded">


<UserControl.Resources>

</UserControl.Resources>

<Grid x:Name="LayoutRoot">
    <Grid.Resources>
        <Common:DoubleToGridLengthConverter x:Key="DoubleToGridLengthConverter"/>
    </Grid.Resources>



    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <SciChart:SciStockChart x:Name="sciChartSurface" Grid.Row="1" Padding="20,40,10,10" IsPanEnabled="{Binding IsPanEnabled}" IsRubberBandZoomEnabled="{Binding IsZoomEnabled}" SciChart:ThemeManager.Theme="Oscilloscope"  >

        <!-- <SciChart:SciStockChart.Annotations>
            <SciChart:HorizontalLineAnnotation HorizontalAlignment="Stretch"
            IsEditable="True"
            LabelPlacement="Axis"
            LabelTextFormatting="0.00"
            ShowLabel="True"
            Stroke="Red"
            StrokeThickness="2"
            Y1="{Binding Threshold,Mode=TwoWay}"  />
        </SciChart:SciStockChart.Annotations> -->



        <!-- Create three RenderableSeries, which map 1:1 to the DataSeries created in code-behind -->
        <SciChart:SciChartSurface.RenderableSeries>
            <SciChart:FastLineRenderableSeries x:Name="lineSeries" SeriesColor="#FFFFA500" StrokeThickness="2" />


        </SciChart:SciChartSurface.RenderableSeries>


        <SciChart:SciStockChart.XAxisStyle>
            <Style TargetType="SciChart:CategoryDateTimeAxis">
                <Setter Property="VisibleRange" Value="{Binding XVisibleRange, Mode=TwoWay}"/>
            </Style>
        </SciChart:SciStockChart.XAxisStyle>
        <SciChart:SciStockChart.XAxis>
            <SciChart:DateTimeAxis  Name="XAxis"  DrawMinorTicks="true" DrawMinorGridLines="True"   DrawLabels ="true" DrawMajorGridLines="true" MinHeight="50"  TextFormatting="HH:mm MMM dd"
                                  SubDayTextFormatting="HH:mm:ss MMM dd yyyy" >

                <SciChart:DateTimeAxis.GrowBy>
                    <SciChart:DoubleRange Min="0" Max="0"/>
                </SciChart:DateTimeAxis.GrowBy>

            </SciChart:DateTimeAxis  >
        </SciChart:SciStockChart.XAxis>

        <!-- Create a Y Axis -->
        <SciChart:SciStockChart.YAxis>
            <SciChart:NumericAxis Name="YAxis" AutoRange="Never" AllowDrop="False" ToolTip="true"
                                  DrawMinorTicks="True" DrawMinorGridLines="true" DrawLabels ="true" DrawMajorBands="True" AutoTicks="True" DrawMajorGridLines="true" TextFormatting="0.0000" >

                <SciChart:NumericAxis.GrowBy>
                    <SciChart:DoubleRange Min="0.1" Max="0.1"/>
                </SciChart:NumericAxis.GrowBy>


            </SciChart:NumericAxis>
        </SciChart:SciStockChart.YAxis>

        <!--  Add some modifiers to zoom, zoom extents  -->

        <!--    -->
        <SciChart:SciStockChart.ChartModifier>

            <SciChart:ModifierGroup>


                <SciChart:RubberBandXyZoomModifier x:Name="rubberBandZoomModifier" IsEnabled="True" IsXAxisOnly="False" ZoomExtentsY="False"/>

                <SciChart:ZoomExtentsModifier ExecuteOn="MouseDoubleClick"/>
                <SciChart:ZoomPanModifier x:Name="panModifier"/>

                <SciChart:CursorModifier ReceiveHandledEvents="True" ShowAxisLabels="True" ShowTooltip="True" ShowTooltipOn="MouseRightButtonDown"  ToolTip="true"/>
                <!-- <SciChart:RubberBandXyZoomModifier IsEnabled="{Binding ChartModifier, Mode=TwoWay, ConverterParameter=RubberBandZoom}" IsXAxisOnly="False"/>-->
                <SciChart:MouseWheelZoomModifier/>
                <!-- For the point values -->

                <SciChart:SeriesSelectionModifier SelectionChanged="SeriesSelectionModifier_SelectionChanged">
                    <SciChart:SeriesSelectionModifier.SelectedSeriesStyle>
                        <Style TargetType="SciChart:BaseRenderableSeries">
                            <Setter Property="PointMarkerTemplate">
                                <Setter.Value>
                                    <ControlTemplate>
                                        <SciChart:EllipsePointMarker x:Name="PART_PointMarker" Stroke="White" Fill="#77777777" StrokeThickness="1" Width="5" Height="5"/>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </SciChart:SeriesSelectionModifier.SelectedSeriesStyle>
                </SciChart:SeriesSelectionModifier>
            </SciChart:ModifierGroup>
        </SciChart:SciStockChart.ChartModifier>
    </SciChart:SciStockChart>

    <!-- Define the Toolbar -->
    <!-- Define the Toolbar verticale -->
    <!-- Update Theme -->
    <!--  This grid is used to space Overview Control so its width matches parent chart XAxis  -->

    <Grid Grid.Row="2">
        <!--  The grid is used to set paddings around the Overview, so that the size of the Overview matches the size of the XAxis on the parent chart  -->
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="20"/>
            <!--  Matches parent surface padding left  -->
            <ColumnDefinition Width="25*"/>
            <!--  Hosts overview control  -->
            <ColumnDefinition Width="0"/>
            <!--  Used to bind to parent surface YAxis  -->
            <ColumnDefinition Width="80"/>
            <!--  Matches parent surface padding right  -->
        </Grid.ColumnDefinitions>

        <helpers:ActualSizePropertyProxy x:Name="proxy" Element="{Binding ElementName=sciChartSurface, Path=YAxis}"/>
        <SciChart:SciChartOverview  Grid.Column="1" ParentSurface="{Binding ElementName=sciChartSurface,
                                                    Mode=OneWay}"
                                                            SciChart:ThemeManager.Theme="{Binding ElementName=cboTheme,
                                                           Path=SelectedItem}"
                            SelectedRange="{Binding XVisibleRange,
                                             Mode=TwoWay}" Focusable="True" />




    </Grid>



    <Grid Grid.Row="1" Margin="40,40,0,0" VerticalAlignment="Top">
        <Grid.Resources>
            <!-- Style for Stats -->
            <Style TargetType="TextBlock" x:Key="StatsStyle">
                <Setter Property="FontSize" Value="26"/>
                <Setter Property="Margin" Value="0"/>
                <Setter Property="FontWeight" Value="Normal"/>
                <Setter Property="Foreground" Value="#BBFC9C29"/>
                <Setter Property="FontFamily" Value="pack://application:,,,/Resources/Fonts/#Neuropol Regular"/>
            </Style>
        </Grid.Resources>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="60"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="186*" />
        </Grid.ColumnDefinitions>
        <Label x:Name="measureLabel1"    Margin="-8,6,12,-2"  Foreground="GreenYellow" FontStyle="Normal" FontSize="11" FontStretch="UltraCondensed" Target="{Binding}" IsEnabled="True"/>
        <TextBlock Margin="5" FontSize="16" Foreground="#eee" Text="{Binding DataContext.Threshold, StringFormat='Threshold = {0:#0.00}', RelativeSource={RelativeSource AncestorType=SciChart:SciChartSurface}}"/>
    </Grid>
    <Grid Grid.Row="1" Margin="-4,102,0,119" VerticalAlignment="Center">
        <Grid.RowDefinitions>
            <RowDefinition Height="12*" />
            <RowDefinition Height="2*" />
        </Grid.RowDefinitions>
        <Grid.Resources>
            <!-- Style for Stats -->
            <Style TargetType="TextBlock" x:Key="StatsStyle">
                <Setter Property="FontSize" Value="26"/>
                <Setter Property="Margin" Value="0"/>
                <Setter Property="FontWeight" Value="Normal"/>
                <Setter Property="Foreground" Value="#BBFC9C29"/>
                <Setter Property="FontFamily" Value="pack://application:,,,/Resources/Fonts/#Neuropol Regular"/>
            </Style>
        </Grid.Resources>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="290*" />
        </Grid.ColumnDefinitions>
        <Label x:Name="ActifLabel"   IsEnabled="true"   HorizontalAlignment="Left" Foreground="GreenYellow" FontStyle="Normal" FontSize="11" FontStretch="UltraCondensed" Target="{Binding}"  />

    </Grid>
    <Grid Grid.Row="1" Margin="-4,-56,0,56" VerticalAlignment="Bottom">
        <Grid.RowDefinitions>
            <RowDefinition Height="15*" />
            <RowDefinition Height="2*" />
        </Grid.RowDefinitions>
        <Grid.Resources>
            <!-- Style for Stats -->
            <Style TargetType="TextBlock" x:Key="StatsStyle">
                <Setter Property="FontSize" Value="26"/>
                <Setter Property="Margin" Value="0"/>
                <Setter Property="FontWeight" Value="Normal"/>
                <Setter Property="Foreground" Value="#BBFC9C29"/>
                <Setter Property="FontFamily" Value="pack://application:,,,/Resources/Fonts/#Neuropol Regular"/>
            </Style>
        </Grid.Resources>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="290*" />
        </Grid.ColumnDefinitions>
        <Label x:Name="inactifLabel"   IsEnabled="true"   HorizontalAlignment="Left" Foreground="GreenYellow" FontStyle="Normal" FontSize="11" FontStretch="UltraCondensed" Target="{Binding}"  />

    </Grid>




    <Grid Grid.Row="1"  VerticalAlignment="top" HorizontalAlignment="Center" >
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.Resources>
            <!-- Style for Stats -->
            <Style TargetType="TextBlock" x:Key="StatsStyle">
                <Setter Property="FontSize" Value="26"/>
                <Setter Property="Margin" Value="0"/>
                <Setter Property="FontWeight" Value="Normal"/>
                <Setter Property="FontFamily" Value="pack://application:,,,/Resources/Fonts/#Neuropol Regular"/>
            </Style>
        </Grid.Resources>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="150"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="200*" />
        </Grid.ColumnDefinitions>
        <Label x:Name="graphPaneTitle" Margin="2" Foreground="#FFFFA500" FontStyle="Italic" FontSize="20" FontStretch="UltraCondensed" Height="31" />

    </Grid>

    <StackPanel Grid.Row="0" Orientation="Horizontal" >
        <!-- <Label x:Name="measureLabel1"    Margin="2"  Foreground="GreenYellow" FontStyle="Normal" FontSize="11" FontStretch="UltraCondensed" Height="25" Target="{Binding}" IsEnabled="True"/> -->
        <ComboBox x:Name="cboTheme" ToolTip="Update Theme" Margin="2,3,2,0" SelectionChanged="cboThemeChanged" Foreground="GreenYellow" HorizontalAlignment="center" SelectedItem="Oscilloscope"  Height="28" Width="92">
            <ComboBox.Background>

                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="Black" Offset="0" />
                    <GradientStop Color="#FF979D99" Offset="1" />
                </LinearGradientBrush>

            </ComboBox.Background>
        </ComboBox>
        <Line Margin="2,3,2,0" Stroke="Gray" Y2="25"/>
        <Button Click="PrintToXpsClick" ToolTip="Print Graph"  Foreground="GreenYellow"  Margin="2,3,2,0"  Content="Print"  Height="28" >

            <Button.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="Black" Offset="0" />
                    <GradientStop Color="#FFB3CBBB" Offset="1" />
                </LinearGradientBrush>
            </Button.Background>
        </Button>



        <Button Click="SaveAsPngClick" ToolTip="Save To PNG" Foreground="GreenYellow"  Margin="2,3,2,0"  Content="Save to PNG" Height="28" >
            <Button.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="Black" Offset="0" />
                    <GradientStop Color="#FF979D99" Offset="1" />
                </LinearGradientBrush>
            </Button.Background>
        </Button>
        <Button Click="CopyToClipboardClick" ToolTip="Copy To ClipBoard" Foreground="GreenYellow"  Margin="2,3,2,0"  Content="Copy to Clipboard" Height="28">
            <Button.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="Black" Offset="0" />
                    <GradientStop Color="#FF979D99" Offset="1" />
                </LinearGradientBrush>
            </Button.Background>
        </Button>
        <Line Margin="2,3,2,0" Stroke="Gray" Y2="25"/>

        <ToggleButton Click="ZoomExtendsClick" ToolTip="Extends Zoom" Margin="2,3,2,0"  Foreground="GreenYellow" Height="28" >
            <StackPanel Orientation="Horizontal">
                <Image Margin="3" Source="/Abt.Controls.SciChart.Example;component/Resources/Images/fit_to_size.png" Stretch="None"/>
                <TextBlock Margin="3" Text="Extends Zoom"/>

            </StackPanel>

            <ToggleButton.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="Black" Offset="0" />
                    <GradientStop Color="#FF979D99" Offset="1" />
                </LinearGradientBrush>
            </ToggleButton.Background>
        </ToggleButton>



        <ToggleButton Click="ZoomClick" ToolTip="Zoom Curves" Margin="2,3,2,0"  Foreground="GreenYellow" Height="28" >
            <StackPanel Orientation="Horizontal">
                <Image Margin="3" Source="/Abt.Controls.SciChart.Example;component/Resources/Images/zoom.png" Stretch="None"/>
                <TextBlock Margin="3" Text="Zoom"/>

            </StackPanel>
            <ToggleButton.Background>
                <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                    <GradientStop Color="Black" Offset="0" />
                    <GradientStop Color="#FF979D99" Offset="1" />
                </LinearGradientBrush>
            </ToggleButton.Background>
        </ToggleButton>
        <ToggleButton x:Name="btnPan" ToolTip="Pan"
                      Margin="2,3,2,0"  Foreground="GreenYellow" Height="28"
                      Content="Pan"

                      IsChecked="{Binding IsEnabled,ElementName=panModifier,
                                          Mode=TwoWay}"
                      SciChart:ToggleButtonExtensions.GroupName="ModifiersGroup">

            <ToggleButton.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="Black" Offset="0" />
                    <GradientStop Color="#FF979D99" Offset="1" />
                </LinearGradientBrush>
            </ToggleButton.Background>
        </ToggleButton>
        <CheckBox  Margin="2,3,2,0" Checked="ZoomExtentsY_Checked" Content="ZoomY" Foreground="GreenYellow" Unchecked="ZoomExtentsY_Checked" Height="14" >

        </CheckBox>
        <CheckBox  Margin="2,3,2,0" Checked="ZoomExtentsX_Checked" Foreground="GreenYellow" Content="ZoomX" Unchecked="ZoomExtentsX_Checked" Height="14">
        </CheckBox>
        <Line Margin="2,3,0,0" Stroke="Gray" Y2="25"/>
        <CheckBox  Margin="2,3,2,0" Name="chkBx_Threshold" Checked="chkBx_Threshold_Checked" Foreground="GreenYellow" Content="Alarm" Unchecked="chkBx_Threshold_Unchecked" Height="14">
        </CheckBox>

        <StackPanel.Background>
            <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                <GradientStop Color="Black" Offset="0" />
                <GradientStop Color="Black" Offset="1" />
            </LinearGradientBrush>
        </StackPanel.Background>





    </StackPanel>


    <!-- Define the SciChartSurface -->


    <!-- Create an X Axis -->



</Grid>
</UserControl>
1 vote
18k views

In your custom overview example the width of the grid column used as padding is linked to the width of the y axis.

            <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <!--  Hosts overview control  -->
            <ColumnDefinition Width="{Binding ActualWidthValue, ElementName=proxy, Mode=OneWay, Converter={StaticResource DoubleToGridLengthConverter}}" />
            <!--  Used to bind to parent surface YAxis  -->
        </Grid.ColumnDefinitions>

        <!-- This class is in the Examples Source Code, under your install directory -->
        <helpers:ActualSizePropertyProxy x:Name="proxy" Element="{Binding ElementName=MainChartSurface, Path=YAxis}" />

What do you use for the Path if you have multiple y axes. I have tried objects like AxisAreaLeft with no success.

1 vote
11k views

I attached a scrollbar to a Y axis, and it is functioning as expected except for how it handles VisibleRange.

If my code sets the Y Axis VisibleRange to be smaller than the min/max extent of the data series, the scrollbar behaves as expected – the size of the scrollbar decreases, and I can use it to pan through the full VisibleRange.

However, if I set the VisibleRange to be larger than the min/max extent of the data series, the scrollbar resets the VisibleRange to the actual data series extent as soon as I grab it.

Can I disable this behavior?

I would expect the scrollbar to navigate within the current VisibleRange, and not modify it.

This is using v3.21.0.5511

  • wrlear asked 9 years ago
  • last active 9 years ago
1 vote
13k views

hi, i have some issues with SciChartScrollbar control. i’m trying to use it like in the Custom Overview demo, but with possibility to contol zoom programmatically (by keyboard). So i bound SciChartScrollbar control’s property

Axis ="{Binding ElementName =XAxis}"

where XAxis is the axis from the top chart

     < s: SciChartSurface.XAxis >
        < s: NumericAxis x: Name ="XAxis"
                       DrawMinorGridLines ="True"
                       DrawMinorTicks ="True">
        </ s: NumericAxis >
    </ s: SciChartSurface.XAxis >

and then i change VisibleRange of top chart from code behind (previously i tried this without Scrollbar.SelectedRange)

        MainChartSurface.XAxis.VisibleRange.Min = Scrollbar.SelectedRange.Min = ((SpectraAnalysisTools )VM.AnalysisTools).ZoomMin;
        MainChartSurface.XAxis.VisibleRange.Max = Scrollbar.SelectedRange.Max = ((SpectraAnalysisTools )VM.AnalysisTools).ZoomMax;

eventually the top chart’s zoom works perfect but the bottom scrollbar moves only first time when value changed and never more again.
So my question is – what should i do to make the scrollbar control (like in Custom Overview demo) working with controlling from codebehind?

2 votes
18k views

Hi Guys

I am using an ItemsControl to display a collection of SciStockCharts. I want to be able to use a single SciChartOverview (not part of the Item Template) to set the visible range on all of the charts displayed in the ItemsControl. Is this possible and if so how would I go about achieving it.

Thanks in advance
Regards
Ian Carson

  • Ian Carson asked 10 years ago
  • last active 9 years ago
0 votes
16k views

How to move chart scroll by arrow key? For example, When I pressed the Right Arrow Key, the bars in the chart will move Right one Bar position, vice versa. Thanks.

  • fxchenlin asked 11 years ago
  • last active 9 years ago
Showing 20 results

Try SciChart Today

Start a trial and discover why we are the choice
of demanding developers worldwide

Start TrialCase Studies