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

0 votes
47 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
82 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
157 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
325 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
2k 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 2 years ago
  • last active 2 years ago
1 vote
7k 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 6 years ago
  • last active 6 years ago
2 votes
7k 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 6 years ago
  • last active 5 years ago
Showing 7 results
This template supports the sidebar's widgets. Add one or use Full Width layout.