SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, and now iOS Charting & Android Chart Components

Welcome to the SciChart Community Forums!

Please use the forums below to ask questions about SciChart. Take a moment to read our Question asking guidelines on how to ask a good question and our support policy. We also have a tag=SciChart on Stackoverflow.com where you can earn rep for your questions!

Please note: SciChart team will only answer questions from customers with active support subscriptions. Expired support questions will be ignored. If your support status shows incorrectly, contact us and we will be glad to help.

0 votes
65 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 4 weeks ago
  • last active 3 weeks ago
0 votes
203 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
399 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
925 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
1k 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
2k 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
3k 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
4k 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
4k 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
4k 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 4 years ago
  • last active 4 years ago
1 vote
4k 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
6k 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 5 years ago
  • last active 4 years ago
0 votes
6k 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 5 years ago
  • last active 4 years ago
Showing 13 results
This template supports the sidebar's widgets. Add one or use Full Width layout.