Forums

I have a chart with a box annotation. When I try to resize the box annotation by dragging the left or right border, I got the “Uncaught TypeError: Cannot read properties of undefined (reading ‘x’)”. It’s not always reproducible and cannot be reproduced by dragging the whole box. Also, it only occurs with SciChart version 3 but not SciChart version 2. Please check the screenshots for more details.

Hello,

I have been working with an application that plots real-time serial data using a FIFO buffer. I have started programming around the ECG-Monitor example as this is exactly what I am creating.

I have a device that broadcasts real-time ECG data via Bluetooth (HC-05), to be exact. I have paired the device and opened a SerialPort in my program to receive the data. My sampling rate is 256 Hz.

When I used a text file to simulate ECG data, it works perfectly well. However, when I use real-time data, there is a delay in charting that increases as the time increases. An easier way to understand this is, the chart continues plotting for a significant period of time even after I have switched off my hardware device.

I have then come to the conclusion that my data is being received at the rate that I want it to, but the plotting gets delayed at an increasing rate as the time increases.

I am currently using the Direct-X rendering type as this gives me a very smooth plot. I receive the data via SerialPort, write to an array and then to the FIFO buffer.

I’m attaching my code for the same.

namespace SciChart.Examples.Examples.SeeFeaturedApplication.ECGMonitor
{
    public class ECGMonitorViewModel : BaseViewModel
    {
    private Timer _timer;
    private IXyDataSeries<double, double> _series0;
    public static double[] _sourceData = new double[50000];
    private int _currentIndex = 0;
    private int _totalIndex = 0;
    private DoubleRange _yVisibleRange;
    private bool _isBeat;
    private int _heartRate;
    private bool _lastBeat;
    private DateTime _lastBeatTime;
    private ICommand _startCommand;
    private ICommand _stopCommand;
    private const double WindowSize = 5.0;
    private const int TimerInterval = 40;
    public static int counter = 0;
    public static SerialPort mySerialPort=new SerialPort("COM3",9600);

    public ECGMonitorViewModel()
    {
        mySerialPort.Open();
        ECGMonitorViewModel.mySerialPort.WriteLine("A");
        ECGMonitorViewModel.mySerialPort.WriteLine("F");

        _series0 = new XyDataSeries<double, double>() { FifoCapacity = 2460, AcceptsUnsortedData = true };

        YVisibleRange = new DoubleRange(-20, 500);
        _startCommand = new ActionCommand(OnExampleEnter);
        _stopCommand = new ActionCommand(OnExampleExit);
    }

    public ICommand StartCommand
    {
        get
        {
            return _startCommand;
        }
    }

    public ICommand StopCommand
    {
        get
        {
            return _stopCommand;
        }
    }

    public IXyDataSeries<double, double> EcgDataSeries
    {
        get
        {
            return _series0;
        }
        set
        {
            _series0 = value;
            OnPropertyChanged("EcgDataSeries");
        }
    }

    public DoubleRange YVisibleRange
    {
        get
        {
            return _yVisibleRange;
        }
        set
        {
            _yVisibleRange = value;
            OnPropertyChanged("YVisibleRange");
        }
    }

    public bool IsBeat
    {
        get
        {
            return _isBeat;
        }
        set
        {
            if (_isBeat != value)
            {
                _isBeat = value;
                OnPropertyChanged("IsBeat");
            }
        }
    }

    public int HeartRate
    {
        get { return _heartRate; }
        set
        {
            _heartRate = value;
            OnPropertyChanged("HeartRate");
        }
    }

    public void OnExampleExit()
    {
        if (_timer != null)
        {
            _timer.Stop();
            _timer.Elapsed -= TimerElapsed;
            _timer = null;
        }
    }

    public void OnExampleEnter()
    {
        _timer = new Timer(TimerInterval) { AutoReset = true };
        _timer.Elapsed += TimerElapsed;
        _timer.Start();
    }

    private void TimerElapsed(object sender, EventArgs e)
    {
        lock (this)
        {
            for (int i = 0; i < 10; i++)
            {
                AppendPoint(250);
            }

            if ((DateTime.Now - _lastBeatTime).TotalMilliseconds < 120) return;

            IsBeat = _series0.YValues[_series0.Count - 3] > 120 ||
                     _series0.YValues[_series0.Count - 5] > 120 ||
                     _series0.YValues[_series0.Count - 8] > 120;

            if (IsBeat && !_lastBeat)
            {
                HeartRate = (int)(60.0 / (DateTime.Now - _lastBeatTime).TotalSeconds);
                _lastBeatTime = DateTime.Now;
            }
        }
    }

    private void AppendPoint(double sampleRate)
    {
        if (_currentIndex >= _sourceData.Length)
        {
            _currentIndex = 0;
        }

        double voltage = _sourceData[_currentIndex];
        double time = _totalIndex / sampleRate %10;

        if(time==0.00)
        {
            voltage = double.NaN;
        }

        _series0.Append(time, voltage);

        _lastBeat = IsBeat;
        _currentIndex++;
        _totalIndex++;
    }

    public static void mySerialPort_DataReceived(object sender, SerialDataReceivedEventArgs e)
    {
        while (mySerialPort.BytesToRead > 0)
        {
            int b;
            b = mySerialPort.ReadByte();
            _sourceData[counter] = b;
            counter++;
        }
    }
}
}

namespace SciChart.Examples.Examples.SeeFeaturedApplication.ECGMonitor
{
    public partial class ECGMonitorView : UserControl
    {
        public ECGMonitorView()
        {
            InitializeComponent();
            ECGMonitorViewModel.mySerialPort.DataReceived += new SerialDataReceivedEventHandler(ECGMonitorViewModel.mySerialPort_DataReceived);
        }
    }
}

The xaml code is as follows,

<UserControl
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
         xmlns:local="clr-namespace:SciChart.Examples.Examples.SeeFeaturedApplication.ECGMonitor"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         xmlns:s="http://schemas.abtsoftware.co.uk/scichart"
         xmlns:s3D="http://schemas.abtsoftware.co.uk/scichart3D" xmlns:XamlRasterizer="clr-namespace:SciChart.Drawing.XamlRasterizer;assembly=SciChart.Drawing" x:Class="SciChart.Examples.Examples.SeeFeaturedApplication.ECGMonitor.ECGMonitorView"
         d:DesignHeight="400"
         d:DesignWidth="600"
         mc:Ignorable="d">

<UserControl.Resources>

    <Style TargetType="{x:Type s:RenderSurfaceBase}">
        <Setter Property="Effect">
            <Setter.Value>
                <DropShadowEffect BlurRadius="5"
                                  ShadowDepth="0"
                                  Color="#FFB3E8F6" />
            </Setter.Value>
        </Setter>
    </Style>

    <local:BeatToScaleConverter x:Key="BeatToScaleConverter" />
</UserControl.Resources>

<i:Interaction.Triggers>
    <i:EventTrigger EventName="Loaded">
        <i:InvokeCommandAction Command="{Binding StartCommand}" />
    </i:EventTrigger>
    <i:EventTrigger EventName="Unoaded">
        <i:InvokeCommandAction Command="{Binding StopCommand}" />
    </i:EventTrigger>
</i:Interaction.Triggers>

<Grid>

    <s:SciChartSurface RenderPriority="Low" MaxFrameRate="25" AutoRangeOnStartup="False">

        <s:SciChartSurface.RenderableSeries>
            <s:FastLineRenderableSeries DataSeries="{Binding EcgDataSeries}"
                Stroke="#FFB3E8F6"                                      
                StrokeThickness="2" />
        </s:SciChartSurface.RenderableSeries>

        <s:SciChartSurface.YAxis>
            <s:NumericAxis AxisTitle="Voltage (mV)"
                DrawMinorGridLines="True"
                MaxAutoTicks="5"
                VisibleRange="{Binding YVisibleRange, Mode=TwoWay}" />
        </s:SciChartSurface.YAxis>

        <s:SciChartSurface.XAxis>
            <s:NumericAxis AxisTitle="Seconds (s)" TextFormatting="0.000s" VisibleRange="0, 10" AutoRange="Never"/>
        </s:SciChartSurface.XAxis>

        <s:SciChartSurface.RenderSurface>
            <s3D:Direct3D10RenderSurface/>
        </s:SciChartSurface.RenderSurface>

    </s:SciChartSurface>

    <StackPanel Margin="30,30" Orientation="Horizontal">
        <StackPanel.Effect>
            <DropShadowEffect BlurRadius="5"
                ShadowDepth="0"
                Color="#FFB3E8F6" />
        </StackPanel.Effect>

        <Grid HorizontalAlignment="Left" VerticalAlignment="Top">
            <Canvas x:Name="layer1"
                Width="20"
                Height="20"
                Margin="12,34,10,0">
                <Canvas.RenderTransform>
                    <ScaleTransform CenterX="-6"
                        CenterY="-6"
                        ScaleX="{Binding IsBeat, Converter={StaticResource BeatToScaleConverter}}"
                        ScaleY="{Binding IsBeat, Converter={StaticResource BeatToScaleConverter}}" />
                </Canvas.RenderTransform>
                <Path Data="m 0 0 c -4 -4 -8.866933 -10.79431 -10 -15 0 0 0 -5 5 -5 5 0 5 5 5 5 0 0 0 -5 5 -5 5 0 5.242535 4.02986 5 5 -1 4 -6 11 -10 15 z" Fill="#FFB0E6F4" />
            </Canvas>
        </Grid>

        <TextBlock HorizontalAlignment="Left"
            VerticalAlignment="Top"
            FontFamily="ArialBlack"
            FontSize="36"
            FontWeight="Bold"
            Foreground="#FFB0E6F4"
            Text="{Binding HeartRate}" />
        <TextBlock HorizontalAlignment="Left"
            VerticalAlignment="Top"
            FontFamily="ArialBlack"
            FontSize="36"
            FontWeight="Bold"
            Foreground="#FFB0E6F4"
            Text="BPM" />

    </StackPanel>

    <TextBlock Margin="5"
        HorizontalAlignment="Left"
        VerticalAlignment="Bottom"
        FontSize="9"
        FontStyle="Italic"
        Foreground="#FFB0E6F4"/>

</Grid>

I’ve attached pictures of what my program currently does. I have also attached a file with sample data in case anybody wants to test the program. I have also tried building in release mode and that doesn’t help, either.

The only issue is the delay in plotting of real-time data. Otherwise, the graphing and rendering is really smooth. As I am a complete beginner to this, can somebody help with me with what I might have done wrong?

Thanks a ton,

Jaivignesh Jayakumar

I am trying to add a “LineArrowAnnotation” using a composite annotation.
When I run my code (see below) I get an exception (also below).
When I put “AnnotationCoordinateMode” in AnnotationCoordinateMode.Absolute,
it will show the LineArrowAnnotation, but on the wrong place.

When I run my code I get the following exception:

‘NaN’ is not a valid value for property ‘Y1’.

And this is the stack trace:

   at System.Windows.DependencyObject.SetValueCommon(DependencyProperty dp, Object value, PropertyMetadata metadata, Boolean coerceWithDeferredReference, Boolean coerceWithCurrentValue, OperationType operationType, Boolean isInternal)
   at System.Windows.DependencyObject.SetValue(DependencyProperty dp, Object value)
   at SciChart.Charting.Visuals.Annotations.LineArrowAnnotation.c4fae01a1bd9d8777f0acbea006c37ddd(AnnotationCoordinates cb7eea21dddaf59b654790a03f7fecf82, LineArrowAnnotation c7816e538855bcbae71ae0f6efa624460)
   at SciChart.Charting.Visuals.Annotations.LineArrowAnnotation.ca698bc0a82170c849e74a3955c194cda.PlaceAnnotation(AnnotationCoordinates coordinates)
   at SciChart.Charting.Visuals.Annotations.AnnotationBase.PlaceAnnotation(AnnotationCoordinates coordinates)
   at SciChart.Charting.Visuals.Annotations.AnnotationBase.MakeVisible(AnnotationCoordinates coordinates)
   at SciChart.Charting.Visuals.Annotations.AnnotationBase.Update(ICoordinateCalculator`1 xCoordinateCalculator, ICoordinateCalculator`1 yCoordinateCalculator)
   at SciChart.Charting.Visuals.Annotations.CompositeAnnotation.Update(ICoordinateCalculator`1 xCoordinateCalculator, ICoordinateCalculator`1 yCoordinateCalculator)
   at SciChart.Charting.Visuals.Annotations.AnnotationBase.TryUpdate(ICoordinateCalculator`1 xCalc, ICoordinateCalculator`1 yCalc)
   at SciChart.Charting.Visuals.Annotations.AnnotationBase.Refresh()
   at SciChart.Charting.Visuals.Annotations.AnnotationBase.ccc682ea04b7d185ec619d8e3262c6d9b()
   at SciChart.Charting.Visuals.Annotations.AnnotationBase.OnAnnotationLoaded(Object sender, RoutedEventArgs e)
   at System.Windows.RoutedEventHandlerInfo.InvokeHandler(Object target, RoutedEventArgs routedEventArgs)
   at System.Windows.EventRoute.InvokeHandlersImpl(Object source, RoutedEventArgs args, Boolean reRaised)
   at System.Windows.UIElement.RaiseEventImpl(DependencyObject sender, RoutedEventArgs args)
   at System.Windows.UIElement.RaiseEvent(RoutedEventArgs e)
   at System.Windows.BroadcastEventHelper.BroadcastEvent(DependencyObject root, RoutedEvent routedEvent)
   at System.Windows.BroadcastEventHelper.BroadcastLoadedEvent(Object root)
   at MS.Internal.LoadedOrUnloadedOperation.DoWork()
   at System.Windows.Media.MediaContext.FireLoadedPendingCallbacks()
   at System.Windows.Media.MediaContext.FireInvokeOnRenderCallbacks()
   at System.Windows.Media.MediaContext.RenderMessageHandlerCore(Object resizedCompositionTarget)
   at System.Windows.Media.MediaContext.RenderMessageHandler(Object resizedCompositionTarget)
   at System.Windows.Threading.ExceptionWrapper.InternalRealCall(Delegate callback, Object args, Int32 numArgs)
   at System.Windows.Threading.ExceptionWrapper.TryCatchWhen(Object source, Delegate callback, Object args, Int32 numArgs, Delegate catchHandler)

This is the code I use to draw the “LineArrowAnnotation”:

var line = new LineArrowAnnotation
{
     X1 = (double)annotation.MeasureFrom,
     X2 = (double)annotation.MeasureTo,
     Y1 = 0.9d,
     Y2 = 0.9d,
     Padding = new Thickness(0, 20, 0, 20),
     HeadLength = 4,
     HeadWidth = 6,
     //ToolTip = annotation.Tooltip,
     SnapsToDevicePixels = true,
     //CoordinateMode = AnnotationCoordinateMode.Absolute,
     CoordinateMode = AnnotationCoordinateMode.RelativeY,
     Stroke = new SolidColorBrush(color),
     StrokeDashArray = new DoubleCollection { 2, 2 },
     Tag = annotation,
};
Annotations.Add(line);

I am trying to modify the 3D Charts > Tooltips and Hit Test 3D Charts > Series Tooltips 3D Chart example to change the colour of the tooltip crosshairs to red. By crosshairs I mean the green lines in the image attached.

I modified SeriesTooltips3DChart.xaml by adding:

    <UserControl.Resources>
        <Style x:Key="MyCrosshairOverlayStyle" TargetType="Line">
            <Setter Property="Stroke" Value="Red" />
            <Setter Property="StrokeThickness" Value="2" />
        </Style>
        <Style x:Key="MyCrosshairProjectionStyle" TargetType="t3D:CrosshairLines">
            <Setter Property="CrosshairOverlayStyle" Value="{StaticResource MyCrosshairOverlayStyle}" />
            <Setter Property="ProjectionMode" Value="Crosshair" />
        </Style>
    </UserControl.Resources>

and modifying the TooltipModifier3D element:

<t3D:TooltipModifier3D CrosshairMode="Lines" CrosshairPlanesFill="#33FF6600" CrosshairProjectionStyle="{StaticResource MyCrosshairProjectionStyle}" />

I expected this to apply the coloured lines but it did not. What have I misunderstood?

Good day!
I’m working with painting FastMountainRenderableSeries. Now I need to give to user an ability to paint curve not only under the line, but above line too.
Is there any automatic property to make it?
Thank in advance.

Hi,

After I’ve added some TextAnnotations on the graph, I’ve noticed that the TextAnnotations and CustomaAnnotations doesn’t resize with the view. They all stay constant in size. I’ve found a previous question about this in here: https://www.scichart.com/questions/question/text-annotation-size

But I’m not getting the results I hoped for with this. The test is still not resizing with the surface. Since it’s been a while that a question was asked about this, maybe there are new methods to do this in Scichart?

Thanks

Hi everybody! I’m using SciChart V2.2.5. I have a chart with XyDataSeries<DateTime, double> on it, and i need to associate some extra data with each point to be able to display it on hint.
Something like this:

struct Point
{
    public DateTime XValue;
    public double YValue;
    public long ByteOffset;
}

And i need to find ByteOffset associated with XValue and YValue when user moves mouse over the point in the chart.

I looked at the Multi-pane stock charts example and fail to understand how I can have the height of my panes change dynamically during runtime as function of updated window size (SizeChanged event) or when adjusting the number panes in the chartgroup? Problem with the below code is that when I resize the window only the first pane in chartgroup is changed not any of the other panes. What am I missing? Do I need to also bind the SciChartSurface.Height within the ItemTemplate to Height for each individual pane height? (I commented out the Height property binding in SciChartSurface. Would I need that?). Either way the panes do not resize when the whole window resizes. I made sure the events all fire and “ChartGroupHeight” is properly updated each time the window is resized.

I implemented the following in my view:

<i:Interaction.Triggers>
    <i:EventTrigger EventName="SizeChanged">
        <mvvm:EventToCommand 
            Command="{Binding UserControlResizedCommand, Mode=OneWay}"
            EventArgsConverterParameter="{Binding ElementName=LayoutRoot}"
            PassEventArgsToCommand="True" />
    </i:EventTrigger>
</i:Interaction.Triggers>

<UserControl.Resources>

    <!-- This allows setting the Height of a pane from a viewmodel -->
    <Style x:Key="ChartPaneStyle" TargetType="s:SciChartGroupPane">
        <Setter Property="Height" Value="{Binding ChartGroupHeight, Mode=TwoWay}"/>
    </Style>

    <!-- A number of converters which change parameters of charts based on the IsFirstChartPane property -->
    <resources:BoolToValueConverter x:Key="MinorsPerMajorConverter" TrueValue="4" FalseValue="2"/>
    <resources:BoolToValueConverter x:Key="MaxAutoTicksConverter" TrueValue="8" FalseValue="4"/>
    <resources:BoolToValueConverter x:Key="GrowByConverter" >
    <resources:BoolToValueConverter.TrueValue>
        <s:DoubleRange Min="0.02" Max="0.02"/>
    </resources:BoolToValueConverter.TrueValue>
    <resources:BoolToValueConverter.FalseValue>
        <s:DoubleRange Min="0.02" Max="0.02"/>
    </resources:BoolToValueConverter.FalseValue>
    </resources:BoolToValueConverter>

</UserControl.Resources>

<Grid>

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

    <StackPanel Grid.Row="0" Orientation="Horizontal" Background="Black">
        <TextBlock Text="Dataseries Type:" Margin="5,0" VerticalAlignment="Center" FontSize="12" Foreground="White"/>
        <ComboBox x:Name="ComboBox_ChooseSeriesType" MinWidth="140" Margin="5,3" VerticalContentAlignment="Center"/>
        <TextBlock Text="Theme:" Margin="5,0" VerticalAlignment="Center" FontSize="12" Foreground="White"/>
        <ComboBox x:Name="ComboBox_ChooseTheme" MinWidth="140" Margin="5,3" VerticalContentAlignment="Center"/>
    </StackPanel>

    <s:SciChartGroup
        Grid.Row="1" 
        ItemsSource="{Binding ChartPaneViewModels}"
        s:ThemeManager.Theme="{Binding ElementName=ComboBox_ChooseTheme, Path=SelectedItem}"
        ItemContainerStyle="{StaticResource ChartPaneStyle}">

        <s:SciChartGroup.ItemTemplate>

            <DataTemplate>

                <s:SciChartSurface
                    s:SciChartGroup.VerticalChartGroup="SharedChartGroup"
                    SeriesSource="{Binding ChartSeriesViewModels}">
                    <!--Height = "{Binding Height}">-->

                    <s:SciChartSurface.XAxis>
                        <s:DateTimeAxis Visibility="Visible" 
                                        LabelProvider="{Binding XAxisFormatting}" 
                                        VisibleRange="{Binding ParentViewModel.XVisibleRange, Mode=TwoWay}"
                                        GrowBy="0.02, 0.02"/>
                    </s:SciChartSurface.XAxis>

                    <s:SciChartSurface.YAxis>
                        <s:NumericAxis AxisAlignment="Right"
                                       Visibility="Visible" 
                                       TextFormatting="{Binding YAxisTextFormatting}" 
                                       GrowBy="0.02, 0.02" 
                                       AutoRange="Always"/>
                    </s:SciChartSurface.YAxis>

                    <s:SciChartSurface.ChartModifier>
                        <s:ModifierGroup s:MouseEventGroup="SharedMouseGroup">

                            <!-- Provides Interactivity -->
                            <s:RubberBandXyZoomModifier IsAnimated = "False" IsXAxisOnly = "True" ExecuteOn = "MouseRightButton"/>
                            <s:ZoomPanModifier XyDirection="XYDirection" ClipModeX = "ClipAtExtents" ExecuteOn ="MouseLeftButton" />
                            <s:MouseWheelZoomModifier XyDirection = "XYDirection"/>
                            <s:ZoomExtentsModifier IsAnimated = "False" ExecuteOn = "MouseDoubleClick" />
                            <s:XAxisDragModifier  DragMode = "Scale"/>
                            <s:CursorModifier SourceMode="AllSeries"  UseInterpolation="True"/>
                            <s:LegendModifier ShowLegend="True" LegendPlacement ="Inside" GetLegendDataFor="AllSeries" Margin="10"/>

                            <!-- Provides selection of series and custom styling to the selected series -->
                            <!--<s:SeriesSelectionModifier ReceiveHandledEvents="True">
                                <s:SeriesSelectionModifier.SelectedSeriesStyle>
                                    <Style TargetType="s:BaseRenderableSeries">
                                        <Setter Property="SeriesColor" Value="White"/>
                                        <Setter Property="PointMarkerTemplate">
                                            <Setter.Value>
                                                <ControlTemplate>
                                                    <s:EllipsePointMarker Fill="#FF00DC" Stroke="White" Width="7" Height="7"/>
                                                </ControlTemplate>
                                            </Setter.Value>
                                        </Setter>
                                    </Style>
                                </s:SeriesSelectionModifier.SelectedSeriesStyle>
                            </s:SeriesSelectionModifier>-->

                            <!-- Provides a data source for the legend control -->


                        </s:ModifierGroup>
                    </s:SciChartSurface.ChartModifier>

                </s:SciChartSurface>

            </DataTemplate>
        </s:SciChartGroup.ItemTemplate>
    </s:SciChartGroup>

</Grid>

Hi, Support team.

I’m using MVVM pattern and trying to implement multi-chart which can insert Box Annotations at the same time into each chart .
So I’m testing in SciChart Example [“DigitalAnalyzerPerformanceDemo”] to know how to implement this.

But what i only got is just looping through and create annotation for each ChannelViewModels.

In the Demo, the VisibleRange ‘XRange’ is shared to all the ChannelViewModels by binding TwoWay-mode in ParentViewModel without looping for each ChildViewModels.
Like this, I wonder is there ways to apply BoxAnnotation all the ChannelViewModel at the same time by binding in ParentViewModel.

    <!-- BottomAxis -->
        <s:SciChartSurface Grid.Column="1">
            <s:SciChartSurface.XAxis>
                <s:NumericAxis Height="30"
                               AxisAlignment="Bottom"
                               VisibleRange="{Binding XRange, Mode=TwoWay}"                 
                               LabelProvider="{StaticResource TimeLabelProvider}"
                               MajorTickLineStyle="{StaticResource TimeAxisMajorTickLineStyle}"
                               MinorTickLineStyle="{StaticResource TimeAxisMinorTickLineStyle}"/>
            </s:SciChartSurface.XAxis>
            <s:SciChartSurface.YAxis>
                <s:NumericAxis Visibility="Collapsed"/>
            </s:SciChartSurface.YAxis>
        </s:SciChartSurface>
    </Grid>

    <!--  Create an X Axis with GrowBy  -->
     <s:SciChartSurface.XAxis>
           <s:NumericAxis Style="{StaticResource HiddenAxisStyle}"
                    VisibleRangeLimitMode="Min"
                    VisibleRangeLimit="0,0"
                    VisibleRange="{Binding DataContext.XRange, Mode=TwoWay, RelativeSource={RelativeSource AncestorType=ItemsControl, AncestorLevel=2}}"/>
     </s:SciChartSurface.XAxis>

I tried to bind annotation in ParentViewModel like XRange Binding method, But it doesn’t work.

This is View.xaml.

<Grid Grid.IsSharedSizeScope="True" IsEnabled="{Binding IsLoading, Converter={StaticResource InvertBooleanConverter}}">


    <!-- BottomAxis -->
        <s:SciChartSurface Grid.Column="1">
            <s:SciChartSurface.XAxis>
                <s:NumericAxis Height="30"
                               AxisAlignment="Bottom"
                               VisibleRange="{Binding XRange, Mode=TwoWay}"                 
                               LabelProvider="{StaticResource TimeLabelProvider}"
                               MajorTickLineStyle="{StaticResource TimeAxisMajorTickLineStyle}"
                               MinorTickLineStyle="{StaticResource TimeAxisMinorTickLineStyle}"/>
            </s:SciChartSurface.XAxis>
            <s:SciChartSurface.YAxis>
                <s:NumericAxis Visibility="Collapsed"/>
            </s:SciChartSurface.YAxis>
        </s:SciChartSurface>
    </Grid>

    <!-- Channels -->
        <ScrollViewer Background="#1C1C1E"
                      VerticalScrollBarVisibility="Auto"
                      HorizontalScrollBarVisibility="Disabled">

            <b:Interaction.Behaviors>
                <common:DigitalAnalyzerScrollBehavior ChannelHeightDelta="10" ChangeChannelHeightCommand="{Binding ChangeChannelHeightCommand}"/>
            </b:Interaction.Behaviors>

            <ItemsControl x:Name="chartItemsControl" ItemsSource="{Binding ChannelViewModels}">

                <b:Interaction.Behaviors>
                    <common:FocusedChannelScrollBehavior ScrollToFocusedChannel="False"/>
                </b:Interaction.Behaviors>

                <ItemsControl.ItemTemplate>
                    <DataTemplate DataType="{x:Type local:ChannelViewModel}">
                        <Grid Background="#2D2C32" Height="{Binding ChannelHeight, Mode=OneWay}" Focusable="False" UseLayoutRounding="False" >
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition SharedSizeGroup="ChannelNames" />
                                <ColumnDefinition />
                            </Grid.ColumnDefinitions>

                            <Border BorderThickness="0,0,0,1" BorderBrush="#1C1C1E">
                                <DockPanel>
                                    <Border DockPanel.Dock="Left"     
                                            Background="{Binding ChannelColor, Mode=OneWay}" 
                                            Width="5"/>

                                    <TextBlock DockPanel.Dock="Left"
                                               Margin="10,5"
                                               VerticalAlignment="Center"
                                               Foreground="White"
                                               Text="{Binding ChannelName}"/>
                                </DockPanel>
                            </Border>

                            <s:SciChartSurface x:Name="channelSurface" Grid.Column="1"
                                               RenderableSeries="{Binding RenderableSeries}"
                                               Annotations="{s:AnnotationsBinding  DataContext.Annotations, Mode=TwoWay, RelativeSource={RelativeSource AncestorType=ItemsControl, AncestorLevel=2} }">

                                <!--  Create an X Axis with GrowBy  -->
                                <s:SciChartSurface.XAxis>
                                    <s:NumericAxis Style="{StaticResource HiddenAxisStyle}"
                                                   VisibleRangeLimitMode="Min"
                                                   VisibleRangeLimit="0,0"
                                                   VisibleRange="{Binding DataContext.XRange, Mode=TwoWay, RelativeSource={RelativeSource AncestorType=ItemsControl, AncestorLevel=2}}"/>
                                </s:SciChartSurface.XAxis>

                                <!--  Create a Y Axis with GrowBy. Optional bands give a cool look and feel for minimal performance impact  -->
                                <s:SciChartSurface.YAxis>
                                    <s:NumericAxis Style="{StaticResource HiddenAxisStyle}"
                                                   VisibleRange="{Binding YRange, Mode=OneWay}"/>
                                </s:SciChartSurface.YAxis>

                                <s:SciChartSurface.ChartModifier>
                                    <s:ModifierGroup s:MouseManager.MouseEventGroup="ChannelModifierGroup">
                                        <s:RubberBandXyZoomModifier IsAnimated="False" IsXAxisOnly="True" ZoomExtentsY="False" ReceiveHandledEvents="True" IsEnabled="{Binding IsChecked, Mode=OneWay, ElementName=IsZoomEnabled}"/>
                                        <s:ZoomPanModifier ZoomExtentsY="False" XyDirection="XDirection" IsEnabled="{Binding IsChecked, Mode=OneWay, ElementName=IsPanEnabled}"/>
                                        <s:ZoomExtentsModifier XyDirection="XDirection" IsAnimated="False" />
                                        <s:MouseWheelZoomModifier XyDirection="XDirection" />
                                    </s:ModifierGroup>
                                </s:SciChartSurface.ChartModifier>
                            </s:SciChartSurface>

                            <Border Grid.Column="1"
                                    BorderThickness="0,0,0,1"
                                    BorderBrush="#2D2C32"
                                    VerticalAlignment="Bottom"/>
                        </Grid>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </ScrollViewer>
    </Border>


</Grid>

This is ViewModel.cs

public class DigitalAnalyzerExampleViewModel : BaseViewModel
{
    private bool _isLoading;
    private DoubleRange _xRange;

    public DigitalAnalyzerExampleViewModel()
    {
        ChannelViewModels = new ObservableCollection<ChannelViewModel>();
        Annotations = new ObservableCollection<IAnnotationViewModel>();
        Annotations.Add(new BoxAnnotationViewModel() { X1 = 0, X2 = 1000, Y1 = 0, Y2 = 1 }); //I want to implement sharing annotation like this.

        SelectedChannelType = "Digital";
        SelectedChannelCount = 32;
        SelectedPointCount = 1000000;
        SelectedResamplingPrecision =ResamplingPrecision.Default;
        SelectedStrokeThickness = 1;

        ChangeChannelHeightCommand = new ActionCommand<object>((d) =>
        {
            var delta = (double)d;
            foreach (var channelViewModel in ChannelViewModels)
            {
                channelViewModel.SetChannelHeightDelta(delta);
            }
        });

        AddChannelCommand = new ActionCommand(async () =>
        {
            IsLoading = true;

            var isDigital = SelectedChannelType == "Digital";
            await AddChannels(isDigital ? 1 : 0, isDigital ? 0 : 1);

            IsLoading = false;
        });

        LoadChannelsCommand = new ActionCommand(async () =>
        {
            IsLoading = true;

            // Clear ViewModels
            foreach (var channelVm in ChannelViewModels)
            {
                channelVm.Clear();
            }
            ChannelViewModels.Clear();
            XRange = null;

            // Create a bunch of Digital channels
            await AddChannels(SelectedChannelCount, 0);

            XRange = new DoubleRange(0, SelectedPointCount);
            IsLoading = false;
        });

        LoadChannelsCommand.Execute(null);
    }


    public ObservableCollection<ChannelViewModel> ChannelViewModels { get; private set; }
    public ObservableCollection<IAnnotationViewModel> Annotations { get; private set; }

    public string SelectedChannelType { get; set; }


    public ResamplingPrecision SelectedResamplingPrecision { get; set; }

    public int SelectedChannelCount { get; set; }

    public ActionCommand<object> ChangeChannelHeightCommand { get; }

    public ActionCommand AddChannelCommand { get; }

    public ActionCommand LoadChannelsCommand { get; }

    public long TotalPoints => ChannelViewModels.Sum(c => (long)c.DataCount);

    public bool IsLoading
    {
        get => _isLoading;
        set
        {
            _isLoading = value;
            OnPropertyChanged(nameof(IsLoading));
        }
    }

    public bool IsEmpty => ChannelViewModels.Count <= 0;

    public DoubleRange XRange
    {
        get => _xRange;
        set
        {
            _xRange = value;
            OnPropertyChanged(nameof(XRange));
        }
    }
}

+Attached image below is what i want to implement.
++I also attached tried code in .zip .

Hi. Is it possible to implement a depth chart like in the screenshot using scichart?! depth chart

Hi,

New to using Scichart JS, is it possible to change the series colour of the overview chart?

See screenshot, I have a FastColumnRenderableSeries as the main chart, and using FastMountainRenderableSeries for the overview. I would like to change the colour of the overview chart.

Tried setting the stroke colour etc, as in the example but can not seem to make it work.

Kind Regards,

James

Sorry for opening another question, but this followup to https://www.scichart.com/questions/js/series-labels got missed.

I’m looking to add a border and background to a TextAnnotation.

Back in the WPF days we had the ability to pretty easily add background colors and such to annotations, thanks to the existing WPF model. I’m assuming in the JS example this would be custom; do you have any existing code/examples for that? Looking for being able to use a colored box whose fill matches the renderable series stroke, along with a contrasting text color.

Dan

Hi!

I have chart with mountain series with a palette provider.
It performs extremely well with 50k points.

However, I noticed that when I drag the chart away, to a point where the series is not visible, the performance sinks and the chart is extremely laggy.

I have uploaded my code to codepen: https://codepen.io/robrob123/pen/KKJjyvp

I checked the performance using the chrome performance profiler and I found that a function called applyStrokeFillPalletting is called repeatedly many times and each time it takes way too long to execute, considering there is no series to draw.

I have attached a screenshot showing the performance profiling.

Thank you!

Hello!

Great work, thanks a lot for this framework!

Could you provide an example of animated inserting of a new point? My goal is to implement interpolation between previous retrieved and last point on the real-time line chart.