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

0
0

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
}
Version
6.0.2.13028
Images
  • You must to post comments
0
0

Hi Istvan

The VisibleRange and DataRange of an axis is defined as this here:

enter image description here

So from your screenshot, the VisibleRange of the overview seems to be the same as the VisibleRange of the main chart, however the overview is a bit wider than the main chart due to the main chart axis. Is that correct?

There’s a workaround for this, we describe it here:
https://www.scichart.com/questions/wpf/scichartoverview-share-width-of-scichartsurface

Please let me know if this helps,

Best regards,
Andrew

  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.