Tag: WPF

If I set AutoRange = “Always” myHorizontalLineAnnotation draws fine. When I set it to “Never” – which I want – my HorizontalLineAnnotation won’t draw. How do I do this? ty

  <s:SciChartSurface.YAxis>
        <s:NumericAxis AutoRange="Never"
                       VisibleRange="{Binding ElementName=this, Path=YMinMax}"

        <s:HorizontalLineAnnotation HorizontalAlignment="Stretch"
                                    Y1="{Binding ElementName=this, Path=CurrentHigh}"
                                    Stroke="{Binding ElementName=this, Path=ToleranceColor}"
                                    StrokeThickness="1" />

I am considering applying server-side licensing for my javerScript application.

In the document below, there is a phrase “Our server-side licensing component is written in C++.”
(https://support-dev.scichart.com/index.php?/Knowledgebase/Article/View/17256/42/)

However, there is only asp.net sample code on the provided github.
(https://github.com/ABTSoftware/SciChart.JS.Examples/tree/master/Sandbox/demo-dotnet-server-licensing)

I wonder if there is a sample code implemented in C++ for server-side licensing.

Can you provide c++ sample code?
Also, are there any examples to run on Ubuntu?

I have introduced a real time chart in my WPF Application. The chart starts plotting points from the left of the chart ( close to Y-Axis).

I would like it to start plotting from the right of the chart ( Away from Y-Axis) and as when points start adding up, I would like the points to slide to the left ( Towards Y-Axis).

Similar to how performance tab in Task Manager displays the CPU utilization.

XAxis Labels

I want to have a label on the x axis for each custom annotations. Is this possible. if so how do i do that.

Thanks

I am have a vertical stacked chart setup which shares the same x- axis ranges. I am trying to find a way to add vertical lines in both the charts at once and further I need the vertical lines to be dragged in sync. When one vertical line annotation is dragged, I need the same movement to happen in the other chart as well. I can share a prototype if you want. Please suggest a solution.

I am trying to call the ZoomBy() method of SciChart control from ViewModel. The ZoomBy() is easily available in the xaml.cs file like below:

// TODO: Need to implement zoom using MVVM
    private void BtnZoomIn_Click(object sender, RoutedEventArgs e)
    {
        TemperatureGraph.ChartModifier.XAxis.ZoomBy(-0.1, -0.1);
    }

The same functionality I need to implement using the ViewModel pattern.

However the ZoomExtents method is easily being called using ViewportManager of SciChart control. E.g. below: XAML file

<RocheButton Name="BtnZoomOut" DockPanel.Dock="Top" Icon="{IconResource Icon=ZoomOut}" HorizontalAlignment="Right" Command="{Binding ZoomOutCommand}" />    
<s:SciChartSurface x:Name="TemperatureGraph" Grid.Column="0" s:ThemeManager.Theme="BrightSpark"  
                           RenderableSeries="{s:SeriesBinding TemperatureGraphViewModel}" DockPanel.Dock="Bottom"
                           ViewportManager="{Binding ViewportManager}">

And the ViewModel Code:

public class TemperatureSummaryGraphViewModel : ViewModelBase
    {
        #region Private Members

        private IXyDataSeries<TimeSpan, double> TemperatureDataSeries = new XyDataSeries<TimeSpan, double>();
        private IXyDataSeries<TimeSpan, double> AcquisitionPointDataSeries = new XyDataSeries<TimeSpan, double>();
        private DefaultViewportManager _viewportManager = new DefaultViewportManager();
        private ICommand _zoomOutCommand;

        #endregion

        #region Constructor

        public TemperatureSummaryGraphViewModel()
        {
            ZoomOutCommand = new DelegateCommand(() => ZoomOutTemperatureGrpah());
            GenerateDummySeries();

            TemperatureGraphViewModel.Add(new LineRenderableSeriesViewModel()
            {
                DataSeries = TemperatureDataSeries,
                StyleKey = "LineSeriesStyle0"
            });

            TemperatureGraphViewModel.Add(new XyScatterRenderableSeriesViewModel()
            {
                DataSeries = AcquisitionPointDataSeries,
                StyleKey = "ScatterSeriesStyle0"
            });
        }

        #endregion

        #region Public Properties

        public ObservableCollection<IRenderableSeriesViewModel> TemperatureGraphViewModel { get; } = new ObservableCollection<IRenderableSeriesViewModel>();

        public IViewportManager ViewportManager
        {
            get
            {
                return _viewportManager;
            }

            set
            {
                if (ReferenceEquals(value, _viewportManager))
                {
                    return;
                }

                _viewportManager = (DefaultViewportManager)value;
                OnPropertyChanged("ViewportManager");
            }
        }

        public ICommand ZoomOutCommand
        {
            get
            {
                return _zoomOutCommand;
            }

            set
            {
                if (ReferenceEquals(value, _zoomOutCommand))
                {
                    return;
                }

                _zoomOutCommand = value;
                OnPropertyChanged(nameof(ZoomOutCommand));
            }
        }

        #endregion

        #region Public Methods

        /// <summary>
        /// To generate dummy data
        /// // TODO: Need to integrate it with RunEditor with the actual data
        /// </summary>
        public void GenerateDummySeries()
        {
            double y = 80.5, yVar = 30.0;

            TemperatureDataSeries.Append(TimeSpan.FromMinutes(1), 40.0);
            TemperatureDataSeries.Append(TimeSpan.FromMinutes(2), 80.5);
            for (int x = 2; x < 50; x++)
            {
                TemperatureDataSeries.Append(TimeSpan.FromMinutes(x), y);

                yVar *= -1;
                y += yVar;
            }

            for (var i = 5.4; i < 50; i += 2)
            {
                AcquisitionPointDataSeries.Append(TimeSpan.FromMinutes(i), 60.0);
            }
        }

        public void ZoomOutTemperatureGrpah()
        {
            _viewportManager.ZoomExtents();
        }

        #endregion
    }
}

This code is working fine and zooming out the scichart control to 100%.

I want to implement the same using the ZoomBy().

Please help!

I’m trying to render Histograms at runtime where the bins’ information like upper and lower bounds and width are known. However when I set the DataPointWidth to 0.2 for example, the bin spacing is different. Here is my code and XAML:

        // We can create a histogram with evenly spaced bins 
        // by specifying the lower bound, the upper bound, 
        // and the number of bins:
        var histogram = Histogram.CreateEmpty(values.Min(), values.Max(), numberOfBins);
        double width = (values.Max() - values.Min()) / numberOfBins;
        histogram.Tabulate(values);

        foreach (var bin in histogram.BinsAndValues)
        {
            XyDataSeries<double, double> dataSeries = new XyDataSeries<double, double>();
            dataSeries.Append(bin.Key.LowerBound, bin.Value);
            pointList.Add(new ColumnRenderableSeriesViewModel() { DataSeries = dataSeries, StrokeThickness = 2, Stroke = Colors.Gray, Fill = Brushes.CornflowerBlue, DataPointWidth = 0.2 });
        }

        ChartData = new ObservableCollection<IRenderableSeriesViewModel>(pointList);

        <Style x:Key="BaseColumnStyle" TargetType="s:FastColumnRenderableSeries">
        <Setter Property="Opacity" Value="0.3"/>
        <Setter Property="StrokeThickness" Value="2"/>
    </Style>

    <Style x:Key="BlueColumnStyle" BasedOn="{StaticResource BaseColumnStyle}" TargetType="s:FastColumnRenderableSeries">
        <Setter Property="Fill" Value="CornflowerBlue"/>
    </Style>
    <!--  Define styles for the SciChartSurface  -->
    <Style x:Key="SciChartSurfaceStyle" TargetType="s:SciChartSurface">
        <Setter Property="Background" Value="White"/>
        <Setter Property="Padding" Value="20"/>
        <Setter Property="Foreground" Value="Black"/>
        <Setter Property="FontSize" Value="20"/>
        <Setter Property="FontFamily" Value="Arial Black"/>
        <Setter Property="FontWeight" Value="Bold"/>
    </Style>

    <!--  Define styles for the GridLinesPanel  -->
    <Style x:Key="GridLinesPanelStyle" TargetType="s:GridLinesPanel">
        <Setter Property="Background" Value="White"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="BorderBrush" Value="Black"/>
    </Style>

    <!--  Using the LayoutTransform is much more apropriate in this point  -->
    <!--  the RenderTransform is used for demonstration purposes only,  -->
    <!--  for the compatibility with Silverlight reasons  -->
    <Style x:Key="AxisLabelStyle" TargetType="s:DefaultTickLabel">
        <!--<Setter Property="RenderTransform">
            <Setter.Value>
                <RotateTransform Angle="-15"/>
            </Setter.Value>
        </Setter>-->
        <Setter Property="Margin" Value="0"/>
    </Style>

    <!--  Define styles for the X and Y Axes  -->
    <Style x:Key="AxisStyle" TargetType="s:AxisBase">
        <Setter Property="FontSize" Value="18"/>
        <Setter Property="FontWeight" Value="Normal"/>
        <Setter Property="FontFamily" Value="Arial"/>
        <Setter Property="TitleFontSize" Value="12"/>
        <Setter Property="TitleFontWeight" Value="Bold"/>
        <Setter Property="TickTextBrush" Value="Black"/>
        <Setter Property="DrawMajorBands" Value="False"/>
        <Setter Property="DrawMinorGridLines" Value="False"/>
        <Setter Property="DrawMinorTicks" Value="False" />
        <Setter Property="DrawMajorTicks" Value="False"/>
        <Setter Property="TickLabelStyle" Value="{StaticResource AxisLabelStyle}"/>
        <Setter Property="MajorGridLineStyle">
            <Setter.Value>
                <Style TargetType="Line">
                    <Setter Property="Stroke" Value="LightGray"/>
                    <Setter Property="StrokeThickness" Value="1"/>
                </Style>
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>
<Grid>
    <s:SciChartSurface x:Name="histogram" ChartTitle="{Binding ChartTitle}" RenderableSeries="{s:SeriesBinding ChartData}"
                       Style="{StaticResource SciChartSurfaceStyle}" GridLinesPanelStyle="{StaticResource GridLinesPanelStyle}">
        <s:SciChartSurface.XAxis>
            <s:NumericAxis AxisTitle="{Binding XAxisTitle}" Style="{StaticResource AxisStyle}" AutoRange="Always"/>
        </s:SciChartSurface.XAxis>
        <s:SciChartSurface.YAxis>
            <s:NumericAxis AxisTitle="{Binding YAxisTitle}" AxisAlignment="Left" Style="{StaticResource AxisStyle}"/>
        </s:SciChartSurface.YAxis>
    </s:SciChartSurface>
</Grid>

How can I make the bin spacing the same independent of bin width? See my attachment of two different histograms with the DataPointWidth for each.

Hi,

There are some methods exposed in the API, ZoomBy and ZoomExtent which can programmatically be called from the code behind.
I am binding the series using IRenderableSeriesViewModel in MVVM pattern. Can we zoom the sciChart surface on a button click in ModelView?

Appreciating your help on this.

Thanks

I refactored from using custom RenderableSeries to a custom RenderableSeriesViewModel which has fixed a refresh bug in the chart:

  public class CustomExclusionRenderableSeriesViewModel : BaseRenderableSeriesViewModel
  {
     public override Type RenderSeriesType => typeof(CustomExclusionRenderableSeries);
  }

However I am invoking MouseLeftButtonUp in the chart code behind and performing a hit test. The HitTest method is not exposed on the BaseRenderableSeriesViewModel:

 private void SciChartSurfaceMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
 {                          
    // Perform the hit test relative to the GridLinesPanel
    Point hitTestPoint = e.GetPosition(this.sciChart.GridLinesPanel as UIElement);

    // Get hit test the RenderableSeries using interpolation
    this.ViewModel.HitTestInfo = this.ViewModel.ExclusionSeries.HitTest(hitTestPoint, true);

Is there any way to get the series instance from the view model & hit test it?

My idea was to have two FastLineRenderableSeries that both share the same XyDataSeries. One series will display the data as-is as an absolute value, while the other will display the same data relative to some arbitrary value. Each series would get it’s own axis.

Is there a way to accomplish what I’m trying to do, or is there another approach that accomplishes the same thing?

I have a WPF app where a UserControl is created at startup. The control contains two SciChartSurface objects, both initially invisible. About every 10th time I start the application it hangs on the thread with this call stack:

mscorlib.dll!System.Collections.Generic.ObjectEqualityComparer<System.__Canon>.Equals(System.__Canon x, System.__Canon y)    
mscorlib.dll!System.Collections.Generic.List<System.IComparable>.Contains(System.IComparable item)   
SciChart.Charting.dll!SciChart.Charting.Numerics.TickProviders.TimeSpanTickProviderBase.c5b456a75ec2eca07ab2f0cf38c30f4f2(SciChart.Data.Model.IRange cb7f8a302c4d43c2cfce28a7f59c09882, SciChart.Charting.Model.IAxisDelta<System.TimeSpan> cf1435e1ac3c185934e905ec126bcd3fa)   
SciChart.Charting.dll!SciChart.Charting.Numerics.TickProviders.TimeSpanTickProviderBase.GetMajorTicks(SciChart.Charting.Visuals.Axes.IAxisParams axis)   
SciChart.Charting.dll!SciChart.Charting.Numerics.TickProviders.TickProvider<System.IComparable>.caf851e93289795305ee933ce4bbca448(SciChart.Charting.Visuals.Axes.IAxisParams c050e7b647895decc0313c2786c4fc396)  
SciChart.Charting.dll!SciChart.Charting.Visuals.Axes.AxisCore.CalculateTicks()   
SciChart.Charting.dll!SciChart.Charting.Visuals.Axes.AxisBase.OnDraw(SciChart.Drawing.Common.IRenderContext2D renderContext, SciChart.Charting.Visuals.RenderableSeries.IRenderPassData renderPassData)  
SciChart.Charting.dll!A.c68de5aaca24f8f81d98aed29fac3caff.c6a7d2b5be124728330bbf562594a9bb9(SciChart.Charting.Visuals.ISciChartSurface c17037e8328cd0abc02d2a6957dfa450c, SciChart.Charting.Services.RenderPassInfo c16b8d70d2b6ecad8f9fca7ac3f5177b8, SciChart.Drawing.Common.IRenderContext2D c41db0419b661c8ac05a2aa6a1ea66092)   
SciChart.Charting.dll!A.c68de5aaca24f8f81d98aed29fac3caff.RenderLoop(SciChart.Drawing.Common.IRenderContext2D renderContext)     
SciChart.Charting.dll!SciChart.Charting.Visuals.SciChartSurface.DoDrawingLoop()  
SciChart.Charting.dll!SciChart.Charting.Visuals.SciChartSurface.c86fb714e67e4ff799a0a0b43ef420019()  
SciChart.Charting.dll!SciChart.Charting.Visuals.SciChartSurface.OnRenderSurfaceDraw(object sender, SciChart.Drawing.Common.DrawEventArgs e)  
SciChart.Drawing.dll!SciChart.Drawing.Common.RenderSurfaceBase.OnDraw()  
SciChart.Drawing.dll!SciChart.Drawing.Common.RenderSurfaceBase.OnRenderTimeElapsed()     
SciChart.Drawing.dll!SciChart.Drawing.Common.RenderSurfaceBase.OnRenderSurfaceBaseLoaded(object sender, System.Windows.RoutedEventArgs e)    
PresentationCore.dll!System.Windows.RoutedEventHandlerInfo.InvokeHandler(object target, System.Windows.RoutedEventArgs routedEventArgs)  
PresentationCore.dll!System.Windows.EventRoute.InvokeHandlersImpl(object source, System.Windows.RoutedEventArgs args, bool reRaised)

The CPU spikes and the app never responds. Any thoughts as to why this might happen?

I’m adding an annotation to a chart with a DateTime x-axis. Without a label the annotation is successfully added. However, if I specify a label I get an InvalidOperationException when Add() is called. The exception message is “The Type this is a test is not a valid Comparable Type”}:

                var annotation = new VerticalLineAnnotation
                {
                    VerticalAlignment = VerticalAlignment.Stretch,
                    ShowLabel = true,
                    X1 = time.DateTime,
                    Stroke = System.Windows.Media.Brushes.Orange,
                    LabelPlacement = LabelPlacement.TopRight,
                    LabelValue = "this is a test",
                    LabelsOrientation = Orientation.Vertical
                };

                MyChart.Annotations.Add(annotation);

The LabelValue is obviously of type string and non-null and indeed of type IComparable. Any reason I can’t add it?

Hi,

Please see the 2 images attached. I would like to reproduce something similar to what’s on the images using scichart ie. being able to select/unselect certain parts of the series by placing a control on certain datapoints (being able to add a checkbox to the surface would be great). What options do I have?

One more question, Is it possible to add a label to LineAnnotations?

Thanks.

Hi,
I’m prototyping an application with two visible data series and an individual Y-axis for each data series. See the enclosed image.
The Stroke color of each data series, the TickTextBrush and the BorderBrush of the y-axis are updated by normal data Binding through the MVVM pattern.
The problem is that I am not able to data bind the Stroke property of the MajorTickLineStyle for the individual Y-axis.
Do You know if there is a workaround for this through data binding?
The project is enclosed.

I have a custom annotation class that I would like to bind the geometries.

<Path.Data>

</Path.Data>

    public GeometryGroup Elements
    {
        get { return _elements; }
        set
        {
            _elements = value;
            InvokePropertyChanged("Elements");
        }
    }

When I create the class in code it only works if Path was set in xaml, doesn’t work if set in code.

            Path p = new Path();
            p.Data = Geometry.Parse("m 0 0 10 0 10 10 0 10 z");             
            GeometryGroup g = new GeometryGroup();
            g.Children.Add(p.RenderedGeometry);
            CustomPathAnnotation cpa = new CustomPathAnnotation()
            {
                Elements = g,
                X1 = .55,
                Y1 = .5, 
                CoordinateMode = AnnotationCoordinateMode.Relative,
                XAxisId = "DefaultAxisId",
                YAxisId = "DefaultAxisId",
                Visibility = Visibility.Visible
            };
            ChartAnnotation.Add(cpa);

Hi!
I have the following xaml code for HorizontalLineAnnotations. I have a viewmodel with simple properties for WasteMaxValue etc.
I don’t get any binding errors. Sometimes everything works as expected when I start up. Sometimes the lines show up but they wont follow when I resize the view (and the graph). Sometimes the lines don’t show up at all.
If I do a very fast “pan” with the mouse so that the graph data moves outside the graph, the lines show up and they follow when I resize the view and the graph. Have you experienced this before? Is it an obvious error?

            <s:SciChartSurface.Annotations>
                <s:HorizontalLineAnnotation HorizontalAlignment="Stretch" 
                    Y1="{Binding WasteMaxValue}" Stroke="Red" StrokeThickness="2">
                </s:HorizontalLineAnnotation>
                <s:HorizontalLineAnnotation HorizontalAlignment="Stretch" 
                    Y1="{Binding WasteMinValue}" Stroke="Red" StrokeThickness="2">
                </s:HorizontalLineAnnotation>
                <s:HorizontalLineAnnotation HorizontalAlignment="Stretch" 
                    Y1="{Binding WarningMaxValue}" Stroke="Yellow" StrokeThickness="2">
                </s:HorizontalLineAnnotation>
                <s:HorizontalLineAnnotation HorizontalAlignment="Stretch" 
                    Y1="{Binding WarningMinValue}" Stroke="Yellow" StrokeThickness="2">
                </s:HorizontalLineAnnotation>
                <s:HorizontalLineAnnotation HorizontalAlignment="Stretch" 
                    Y1="{Binding SetValue}" Stroke="Green" StrokeThickness="2">
                </s:HorizontalLineAnnotation>
        </s:SciChartSurface.Annotations>

HI,
I’m new in scichart. I would like to ask you if it’s possible to build a graph with custom candles.
I want to build a footprint graph, something like this:

http://footprintchart.com/wp-content/uploads/2011/06/Shade_Dominant_Side.png

could you tell me if It’s possible to build this kind of graph and suggest me some links with documentation?

Thank you

Hello I am curenntly using three REAL Time Charts (FiFo) in my WPF application and I am running into performance issues, which result in UI stuttering. I tried to optimize my performance using your very informative article on performance (Rendering,Stroke,Buffer etc.), but it did not help much, so I wondered if you might be able to help me.

I currently use three graphs and each of them has two different sets of data applied. The size of my FiFo graphs is 100 samples, with a dt= 0.01 (100Hz). I assume the OnNewData event is triggered at that rate as well?

My current code looks like this:

private void OnNewData(object sender, EventArgs e)
    {

        if (TaskManager.tempObject. != null)
        {
            lock (TaskManager.tempObject)
            {
                y0 = Math.Abs(TaskManager.tempObject.LaserPosRel - TaskManager.tempObject.AxisPos);
                y1 = TaskManager.tempObject.AxisPos;
                y2 = TaskManager.tempObject.AxisSpeed;
                y3 = TaskManager.tempObject.AxisAcc;
                y4 = y1;
                y5 = TaskManager.tempObject.LaserPosRel;

            }
        }


        using (sciChartSurface1.SuspendUpdates())
        {
            _series0.Append(t, y0);


        }

        using (sciChartSurface2.SuspendUpdates())
        {

            _series1.Append(t, y1);
            _series2.Append(t, y2);
            _series3.Append(t, y3);


        }

        using (sciChartSurface3.SuspendUpdates())
        {

            _series4.Append(t, y4);
            _series5.Append(t, y5);

        }

        // Increment current time
        t += dt;
    }

I wondered if you have any proposals how to enhance my code, regarding performance?
Would it make a difference if I would Append the series in a new thread? I was not sure of this, since it is stated
in the FAQ that SciChart already uses it’s own threads for rendering.

Any help is appreciated, thanks in advance!

best regards

nils

Hi!

I have the following code for a vertical slice modifier

    <s:VerticalSliceModifier Name="sliceModifier"
                                             ReceiveHandledEvents="True"
                                             >
                        <s:VerticalSliceModifier.VerticalLines>
                            <s:VerticalLineAnnotation Style="{StaticResource sliceStyle}"
                                                      X1="{Binding ParentViewModel.SliceModifierPosition, Mode=TwoWay}" />
                        </s:VerticalSliceModifier.VerticalLines>

 </s:VerticalSliceModifier>

This results in a nullreference exception. When I remove the VerticalLines, there is no nullreference exception, also no vertical lines.
As far as I can see ParentViewModel.SliceModifierPosition, does not have a value at the time.

I tried setting the visibility of the slicemodifier to collapsed, but it did not help the exception. Is there any to remove the slicemodifier for the time when X1 is not valid (using MVVM and not binding the slicemodifier itself)?

nullreference exception location

Abt.Controls.SciChart.ChartModifiers.VerticalSliceModifier.TB()
: Abt.Controls.SciChart.ChartModifiers.VerticalSliceModifier.OnAttached()
: Abt.Controls.SciChart.ChartModifiers.ModifierGroup.TB(IChartModifier C)
: Abt.Controls.SciChart.Common.Extensions.EnumerableExtensions. <a href="IEnumerable1 , Action1″>
: Abt.Controls.SciChart.ChartModifiers.ModifierGroup.TB(IEnumerable`1 C)

Hi i am new to SCiChart and i was wondering if there is an option to double click on screen and make it full screen or maybe some sort of un-dock it or open it in new window full screen?
Thx