Pre loader

Tag: SciChartOverview

Welcome to the SciChart Forums!

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

WPF Forums | JavaScript Forums | Android Forums | iOS Forums

1 vote
2k views

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

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

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

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

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

1 vote
9k views

Hi SciChart!

I’m building a real-time data chart, and I wanted to add a SciChartOverview like the “Realtime Ticking Stock Chart” has.
But for some reason, when the user drags the overview to one of the edges, the XVisibleRange stops the updates.

The XAML, the relevant ViewModel, the update method and a short video that demonsrate the problem are attached.

0 votes
2k views

Hi I am using UniformXyDataSeries<double> .
And I can’t work with SciChartOverview.
Before that I was working with XyDataSeries<double, double> and everything worked very well.
And now the entire SciChartOverview is simply black.. (still functions as a scrollbar)
And I get this –

SciChartSurface didn’t render, because an exception was thrown:
Message: Object reference not set to an instance of an object.

Stack Trace: at
SciChart.Charting.Visuals.RenderableSeries.DrawingProviders.MountainSeriesDrawingProvider.trj(yhn
ayc, IPointSeries ayd) at
SciChart.Charting.Visuals.RenderableSeries.DrawingProviders.MountainSeriesDrawingProvider.OnDraw(IRenderContext2D
renderContext, IRenderPassData renderPassData) at
SciChart.Core.Extensions.EnumerableExtensions.ForEachDo[T](IEnumerable1
enumerable, Action
1 operation) at
SciChart.Charting.Visuals.RenderableSeries.BaseRenderableSeries.InternalDraw(IRenderContext2D
renderContext, IRenderPassData renderPassData) at
SciChart.Charting.Visuals.RenderableSeries.BaseRenderableSeries.SciChart.Charting.Visuals.IDrawable.OnDraw(IRenderContext2D
renderContext, IRenderPassData renderPassData) at
qxc.cyh(RenderPassInfo cff, IRenderContext2D cfg, Int32 cfh) at
qxc.cyg(ISciChartSurface cfc, RenderPassInfo cfd, IRenderContext2D
cfe) at qxc.RenderLoop(IRenderContext2D renderContext) at
SciChart.Charting.Visuals.SciChartSurface.DoDrawingLoop()

This is the code:

<s:SciChartSurface 
           x:Name="sciChart0" ... >  <s:SciChartSurface.RenderableSeries >
                        <s:FastLineRenderableSeries x:Name="RenderableSeries0"  DataSeries="{Binding samples[0]._Series, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                                            Stroke="{Binding samples[0].Color, Mode=TwoWay}" 
                                            StrokeThickness="2" s:LegendModifier.IncludeSeries ="{Binding samples[0].Show, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
                      </s:SciChartSurface.RenderableSeries > <!-- .....  -- >
    </s:SciChartSurface>




    <!-- Declare the SciChartOverview and bind to the main chart -->
                <s:SciChartOverview  x:Name="sciChart0Overview" MouseWheel="sciChart0Overview_MouseWheel" Margin="10,0,10,0"
                                    DataSeries="{Binding ElementName=sciChart0, Path=RenderableSeries[0].DataSeries}"
                                    ParentSurface="{Binding ElementName=sciChart0}" Height="50" VerticalAlignment="Bottom"
                                    SelectedRange="{Binding ElementName=sciChart0, Path=XAxis.VisibleRange, Mode=TwoWay}"
                                     ToolTip="Use the mouse wheel to change the sample shown here."
                                     />

Again – everything worked fine for me until I changed the data structure…
[samples[0]._Series is type of UniformXyDataSeries<double>()]
Thanks!

1 vote
3k views

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

1 vote
4k views

I have been working with the new Overview Chart feature available in the new 2.0.0-beta.2084 release, and ran into an issue where I can remove lines from the overview surface no problem, but then I always receive an error whenever I try to add one.

I was just wondering if there is a recommended flow for when a parent chart’s renderable series array has traces added or removed. One thing I did try to circumvent this issue was to delete the old overview and add a new one, but I receive either a separate error or the overview would draw without any traces.

I have attached a file with example code that should display the error I receive when you add a line to an overview component. I have also attached an image of the error that appears in the console.

0 votes
5k views

Hi! I have an overview control, which uses 2-way binding for the x-axis visible range. I actually followed the WPF Realtime Ticking Stock Charts example, the only difference is that I have a line chart with DateRange x-axis. Everything works, except that the overview’s x-axis maximum visible range is not the same as the actual chart’s visible range. Normally the chart is rolling and the maximum x visible range is always ahead of the latest data, just as it’s in the stock chart example. However, the overview’s x visible range always matches the latest x-axis value of the data. So when the overview’s grip is used to scale the x-axis to go back in time, the chart’s x-axis maximum visible range always jumps to match the latest x-axis value of the data and the chart stops rolling. I just don’t get what am I doing wrong or am I missing something? Please see the attached screenshot and the source code. I’m evaluating SciChart to see if it fits our needs before we’d make a purchase and this is something that should work.

Chart Xaml:

<s:SciChartSurface Grid.Row="0" x:Name="Chart" RenderableSeries="{s:SeriesBinding SeriesViewModels}">
            <!--  Create an X Axis  -->
            <s:SciChartSurface.XAxis>
                <s:DateTimeAxis AxisTitle="Time" VisibleRange="{Binding XVisibleRange, Mode=TwoWay}" GrowBy="0, 0.1" DrawMinorGridLines="False" DrawMajorBands="True"/>
            </s:SciChartSurface.XAxis>
            <!--  Create a Y Axis  -->
            <s:SciChartSurface.YAxis>
                <s:NumericAxis AxisTitle="Count" AutoRange="Always" GrowBy="0.1"/>
            </s:SciChartSurface.YAxis>
            <!--  Specify interactivity modifiers  -->
            <!-- Add Zooming, Panning behaviours to the chart -->
            <s:SciChartSurface.ChartModifier>
                <s:ModifierGroup>
                    <!-- Allow drag to zoom on Left mouse -->
                    <s:RubberBandXyZoomModifier ExecuteOn="MouseLeftButton"
                                                         RubberBandFill="#33FFFFFF" RubberBandStroke="#AAFFFFFF"
                                                         RubberBandStrokeDashArray="2 2"/>
                    <!-- Allow pan on Right mouse drag -->
                    <s:ZoomPanModifier ExecuteOn="MouseRightButton" ClipModeX="None" />
                    <!-- Allow Dragging YAxis to Scale -->
                    <s:YAxisDragModifier DragMode="Scale"/>
                    <!-- Allow Dragging XAxis to Pan -->
                    <s:XAxisDragModifier DragMode="Pan"/>
                    <!-- Allow Mousewheel Zoom -->
                    <s:MouseWheelZoomModifier/>
                    <!-- Allow Zoom to Extents on double click -->
                    <s:ZoomExtentsModifier ExecuteOn="MouseDoubleClick"/>
                    <!-- Add a RolloverModifier to the chart (shows vertical line tooltips) -->
                    <s:RolloverModifier ExecuteOn="MouseMove" ShowTooltipOn="MouseHover"/>
                </s:ModifierGroup>
            </s:SciChartSurface.ChartModifier>
        </s:SciChartSurface>
        <!-- Add a Scrollbar, and bind to SciChartSurface.XAxis -->
        <Grid Grid.Row="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <!--<ColumnDefinition Width="75"/>-->
            </Grid.ColumnDefinitions>
            <!--<s:SciChartScrollbar Grid.Column="0" Axis="{Binding ElementName=Chart, Path=XAxis}"/>-->
            <s:SciChartOverview Grid.Column="0"
                                DataSeries="{Binding SeriesViewModels[0].DataSeries, Mode=OneWay}"
                                ParentSurface="{Binding Source={x:Reference Name=Chart}, Mode=OneWay}"
                                SelectedRange="{Binding XVisibleRange, Mode=TwoWay}"/>
        </Grid>

View model:

private DateRange _xVisibleRange;
public DateRange XVisibleRange
{
        get => _xVisibleRange;
        set => SetProperty(ref _xVisibleRange, value);
}

// after appending new data
var LatestXValue = DataSeries.XValues.Last();
var MaxXVisRange = XVisibleRange.Max;

if (MaxXVisRange > LatestXValue)
{
        var existingRange = _xVisibleRange;
        var newRange = new DateRange(existingRange.Min.AddSeconds(rollBySeconds), existingRange.Max.AddSeconds(rollBySeconds));
        XVisibleRange = newRange; 
        // the overview doesn't have this range, despite of two-way binding
        // it has the latest x-axis value as max visible range
}
0 votes
14k views

Hello! I have a real time line chart and a SciChartOverview control and the problem is, as soon as I want to extend the visible range with the overview’s slider, the chart’s x visible range is zoomed to extent. I’d like to have the same functionality as in the ScrollChartUsingOverviewControl example and the real time ticking stock chart. In those examples, if the visible range is extended by the overview scroll bar’s left-hand slider, the max visible range keeps rolling with new data, while the min visible range is extended. I followed those examples, by binding the XVisibleRange to the view model in 2 way mode, but for me the max visible range jumps to the latest data as soon as I move the overview’s slider to the left (stops rolling with new data).

Chart xaml:

<s:SciChartSurface Grid.Row="0" x:Name="Chart" RenderableSeries="{s:SeriesBinding SeriesViewModels}">
            <!--  Create an X Axis  -->
            <s:SciChartSurface.XAxis>
                <s:DateTimeAxis AxisTitle="Time" VisibleRange="{Binding XVisibleRange, Mode=TwoWay}" GrowBy="0, 0.1" DrawMinorGridLines="False" DrawMajorBands="True"/>
            </s:SciChartSurface.XAxis>
            <!--  Create a Y Axis  -->
            <s:SciChartSurface.YAxis>
                <s:NumericAxis AxisTitle="Count" AutoRange="Always" GrowBy="0.1"/>
            </s:SciChartSurface.YAxis>
            <!--  Specify interactivity modifiers  -->
            <!-- Add Zooming, Panning behaviours to the chart -->
            <s:SciChartSurface.ChartModifier>
                <s:ModifierGroup>
                    <!-- Allow drag to zoom on Left mouse -->
                    <s:RubberBandXyZoomModifier ExecuteOn="MouseLeftButton"
                                                         RubberBandFill="#33FFFFFF" RubberBandStroke="#AAFFFFFF"
                                                         RubberBandStrokeDashArray="2 2"/>
                    <!-- Allow pan on Right mouse drag -->
                    <s:ZoomPanModifier ExecuteOn="MouseRightButton" ClipModeX="None" />
                    <!-- Allow Dragging YAxis to Scale -->
                    <s:YAxisDragModifier DragMode="Scale"/>
                    <!-- Allow Dragging XAxis to Pan -->
                    <s:XAxisDragModifier DragMode="Pan"/>
                    <!-- Allow Mousewheel Zoom -->
                    <s:MouseWheelZoomModifier/>
                    <!-- Allow Zoom to Extents on double click -->
                    <s:ZoomExtentsModifier ExecuteOn="MouseDoubleClick"/>
                    <!-- Add a Legend to the chart -->
                    <s:LegendModifier ShowLegend="True" Orientation="Horizontal"
                                               VerticalAlignment="Bottom"                                     
                                               HorizontalAlignment="Center"
                                               LegendPlacement="Inside" />
                    <!-- Add a RolloverModifier to the chart (shows vertical line tooltips) -->
                    <s:RolloverModifier ExecuteOn="MouseMove" ShowTooltipOn="MouseHover"/>
                </s:ModifierGroup>
            </s:SciChartSurface.ChartModifier>
        </s:SciChartSurface>
        <!-- Add a Scrollbar, and bind to SciChartSurface.XAxis -->
        <Grid Grid.Row="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <!--<ColumnDefinition Width="75"/>-->
            </Grid.ColumnDefinitions>
            <!--<s:SciChartScrollbar Grid.Column="0" Axis="{Binding ElementName=PhotonChart, Path=XAxis}"/>-->
            <s:SciChartOverview Grid.Column="0"
                                DataSeries="{Binding SeriesViewModels[0].DataSeries, Mode=OneWay}"
                                ParentSurface="{Binding Source={x:Reference Name=Chart}, Mode=OneWay}"
                                SelectedRange="{Binding XVisibleRange, Mode=TwoWay}"/>
        </Grid>

Am I missing something, or what am I doing wrong?

1 vote
5k views

I’m able to turn the SciChartOverview control so that it appears vertical and am able to get the grips to flow vertically as well but whenever the data is flowing, it still flows horizontally. How do I get it to flow vertically? See attached image for what it currently does.

0 votes
11k views

I am trying disable AutoRange=”Always” property for SciChartOverview. As for now I see only one way, change SciChartOverview template. But VS generate wrong template for SciChartOverview, chart line gone, after template replacement (I am using “Edit Template” -> “Edit Copy” feature from VS designer mouse context menu )

Here is template:

<s:SciChartOverview.Resources>
    <Style TargetType="{x:Type s:SciChartOverview}">
        <Setter Property="FontSize" Value="20"/>
        <Setter Property="FontWeight" Value="Normal"/>
        <Setter Property="Background" Value="{Binding (s:ThemeManager.Theme), Mode=OneWay, RelativeSource={RelativeSource Self}}"/>
        <Setter Property="Foreground" Value="{Binding (s:ThemeManager.Theme), Mode=OneWay, RelativeSource={RelativeSource Self}}"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="Fill" Value="{Binding (s:ThemeManager.Theme), Mode=OneWay, RelativeSource={RelativeSource Self}}"/>
        <Setter Property="Stroke" Value="{Binding (s:ThemeManager.Theme), Mode=OneWay, RelativeSource={RelativeSource Self}}"/>
        <Setter Property="SelectedRange" Value="{Binding Axis.VisibleRange, Mode=TwoWay, RelativeSource={RelativeSource Self}}"/>
        <Setter Property="RenderableSeriesStyle">
            <Setter.Value>
                <Style TargetType="{x:Type s:FastMountainRenderableSeries}">
                    <Setter Property="Fill" Value="{Binding Fill}"/>
                    <Setter Property="DataSeries" Value="{Binding DataSeries}"/>
                    <Setter Property="Stroke" Value="{Binding Stroke}"/>
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="RenderableSeriesType" Value="{x:Type s:FastMountainRenderableSeries}"/>
        <Setter Property="ScrollbarStyle">
            <Setter.Value>
                <Style TargetType="{x:Type s:SciChartScrollbar}">
                    <Setter Property="Orientation" Value="Horizontal"/>
                    <Setter Property="GripsLength" Value="25"/>
                    <Setter Property="Background" Value="Transparent"/>
                    <Setter Property="ViewportStyle">
                        <Setter.Value>
                            <Style TargetType="{x:Type Control}">
                                <Setter Property="Opacity" Value="0"/>
                            </Style>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="NonSelectedAreaStyle">
                        <Setter.Value>
                            <Style TargetType="{x:Type Path}">
                                <Setter Property="Fill" Value="{Binding (s:ThemeManager.Theme), Mode=OneWay, RelativeSource={RelativeSource Self}}"/>
                            </Style>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type s:SciChartOverview}">
                    <Grid x:Name="PART_Container">
                        <s:SciChartSurface x:Name="PART_BackgroundSurface" AnimateZoomExtentsCommand="" BorderThickness="0" Background="{TemplateBinding Background}" DebugWhyDoesntSciChartRender="False" Foreground="{TemplateBinding Foreground}" FontWeight="{TemplateBinding FontWeight}" FontSize="{TemplateBinding FontSize}" Padding="{TemplateBinding Padding}" RenderPriority="Normal" UseLayoutRounding="True" ZoomExtentsCommand="">
                            <s:SciChartSurface.ViewportManager>
                                <s:DefaultViewportManager>
                                    <s:DefaultViewportManager.Services>
                                        <Utility:ServiceContainer/>
                                    </s:DefaultViewportManager.Services>
                                </s:DefaultViewportManager>
                            </s:SciChartSurface.ViewportManager>
                            <s:SciChartSurface.YAxis>
                                <s:NumericAxis AutoRange="Always" DrawMajorGridLines="False" DrawMajorBands="False" DrawMinorGridLines="False" IsPrimaryAxis="True" TextFormatting="###E+0" UseLayoutRounding="True" Visibility="Collapsed">
                                    <s:NumericAxis.Services>
                                        <Utility:ServiceContainer/>
                                    </s:NumericAxis.Services>
                                    <s:NumericAxis.TickProvider>
                                        <s:NumericTickProvider/>
                                    </s:NumericAxis.TickProvider>
                                    <s:NumericAxis.TickCoordinatesProvider>
                                        <s:DefaultTickCoordinatesProvider/>
                                    </s:NumericAxis.TickCoordinatesProvider>
                                </s:NumericAxis>
                            </s:SciChartSurface.YAxis>
                            <s:SciChartSurface.YAxes>
                                <s:NumericAxis AutoRange="Always" DrawMajorGridLines="False" DrawMajorBands="False" DrawMinorGridLines="False" IsPrimaryAxis="True" TextFormatting="###E+0" UseLayoutRounding="True" Visibility="Collapsed">
                                    <s:NumericAxis.Services>
                                        <Utility:ServiceContainer/>
                                    </s:NumericAxis.Services>
                                    <s:NumericAxis.TickProvider>
                                        <s:NumericTickProvider/>
                                    </s:NumericAxis.TickProvider>
                                    <s:NumericAxis.TickCoordinatesProvider>
                                        <s:DefaultTickCoordinatesProvider/>
                                    </s:NumericAxis.TickCoordinatesProvider>
                                </s:NumericAxis>
                            </s:SciChartSurface.YAxes>
                        </s:SciChartSurface>
                        <s:SciChartScrollbar x:Name="PART_Scrollbar" Axis="{TemplateBinding Axis}" Height="{Binding ActualHeight, ElementName=PART_BackgroundSurface}" Style="{TemplateBinding ScrollbarStyle}"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</s:SciChartOverview.Resources>

The main task for me, set fixed VisibleRange for YAxis.

0 votes
9k views

We are trying to display a very large line data set and it seems SciChartOverview would be a good way of visualizing full range of data. Let’s say we have 10 lines of millions data points each to be displayed. The idea is to display down-sampled version of these 10 lines in SciChartOverview, and display full-sampled version in the parent surface with x range matched with scroll bar range in SciChartOverview. When user moves the scroll bar or changes its range in SciChartOverview, it will reload data into the parent surface.

Is there a way to achieve above? Thanks.

  • Caleb asked 6 years ago
  • last active 6 years ago
1 vote
14k views

I’m having two synced charts, one SciChartSurface and a SciChartOverview.

The SciChartSurface is bound via the SeriesSource to two ChartSeriesViewModels each consisting of a XyDataSeries<DateTime,double> and a FastLineRenderableSeries.
The important thing here is that the FastLineRenderableSeries has the IsDigitalLine property enable – to well – get a nice digital / stepped line instead of straight connections.

The SciChartOverview is bound to the SciChartSurface via the ParentSurface property. All works fine, except that the data series on the SciChartOverview is drawn with straight connecting lines instead of the digital / stepped line. Unfortunately I found no way to explicitly specify an IRenderableSeries or to reuse the ChartSeriesViewModel on the SciChartOverview.

I also tried to use the DataSeries property directly, but of course, this just defines the IDataSeries and not the IRenderableSeries on which I could set the IsDigitalLine property.

Is there any way to get the SciChartOverview to draw a digital line or at least just use the ChartSeriesViewModel bound to the associated ParentSurface?

Thanks!

  • Manuel R. asked 10 years ago
  • last active 10 years ago
2 votes
23k views

Hi Guys

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

Thanks in advance
Regards
Ian Carson

  • Ian Carson asked 10 years ago
  • last active 10 years ago
Showing 12 results