Pre loader

How to Continous charting in real time with the mode zoom

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

0
0

Hi All,
My chart receive data over time(Charting in real time), so the visual range is continuously updated.So when the user tries to zoom at a part of the chart, the chart Zoomed but instantaneous after this the chart goes back to “normal” when a new sample is received.For my application i want that the chart continuous to charting in real time in the mode zoom when i don’t click in the buuton Extends Zoom. How do you solve this problem? (I want to did the same Zoom like in the application “Oscilloscope SciChart”)
Thank You !

<UserControl.Resources>

    <Style TargetType="SciChart:SciChartScrollbar">
    <Setter Property="GripsThickness" Value="10"/>

    <!-- Define style for resizing grips -->
    <Setter Property="GripsStyle">
        <Setter.Value>
            <Style TargetType="Control">
                <Setter Property="VerticalAlignment" Value="Bottom"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Control">
                            <Border BorderThickness="2,2,2,2" CornerRadius="2" BorderBrush="Black" Background="#A90F0F" Height="15">
                                <Line Stroke="Black" X1="0" Y1="0" X2="0" Y2="1" Stretch="Fill" StrokeThickness="2"/>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Setter.Value>
    </Setter>

    <!-- Define style for viewport area -->
    <Setter Property="ViewportStyle">
        <Setter.Value>
            <Style TargetType="Control">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Control">
                            <Border BorderThickness="0,1,0,1" BorderBrush="Black" Background="#99000000"/>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Setter.Value>
    </Setter>

    <!-- Define style for non selected area -->
    <Setter Property="NonSelectedAreaStyle">
        <Setter.Value>
            <Style TargetType="Path">
                <Setter Property="Fill" Value="#33000000"/>
            </Style>
        </Setter.Value>
    </Setter>
</Style>

</UserControl.Resources>

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="51"/>



        <RowDefinition Height="249*"/>
    </Grid.RowDefinitions>
    <StackPanel Orientation="Horizontal" Height="52" Margin="0,0,0,6">
        <Label x:Name="measureLabel1"  Margin="5"  Foreground="Green" FontStyle="Normal" FontSize="10" FontStretch="UltraCondensed" Height="52" />
        <Label x:Name="measur"  Margin="5"  Foreground="Green" FontStyle="Normal" FontSize="15" FontStretch="UltraCondensed" Width="20" />
        <Label x:Name="graphPaneTitle" Margin="4" HorizontalAlignment="Center"  Foreground="Black" FontStyle="Italic" FontSize="15" FontStretch="UltraCondensed" Height="31" />
        <Label x:Name="measureL"  Margin="5"  Foreground="Green" FontStyle="Normal" FontSize="15" FontStretch="UltraCondensed"/>

        <ComboBox x:Name="cboTheme" MinWidth="50"  SelectionChanged="cboThemeChanged" 
                  Grid.RowSpan="2" ForceCursor="True" Height="52" Width="84" FontSize="18">
            <ComboBox.Foreground>
                <RadialGradientBrush>
                    <GradientStop Color="Black" Offset="0" />
                    <GradientStop Color="#FFC7A4A4" Offset="1" />
                </RadialGradientBrush>
            </ComboBox.Foreground>
            <ComboBox.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="Black" Offset="0" />
                    <GradientStop Color="#FF52D477" Offset="1" />
                </LinearGradientBrush>
            </ComboBox.Background>
        </ComboBox>
        <Button Click="PrintToXpsClick" Content="Print" Height="52" Width="62" FontSize="16">
            <Button.Foreground>
                <RadialGradientBrush>
                    <GradientStop Color="Black" Offset="0" />
                    <GradientStop Color="#FFF2E9E9" Offset="1" />
                </RadialGradientBrush>
            </Button.Foreground>
            <Button.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="Black" Offset="0" />
                    <GradientStop Color="#FF77D87E" Offset="1" />
                </LinearGradientBrush>
            </Button.Background>
        </Button>
        <Button Click="SaveAsPngClick" Content="Save to PNG" Height="52" Foreground="#FFE2C2C2">
            <Button.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="Black" Offset="0" />
                    <GradientStop Color="#FF4A905E" Offset="1" />
                </LinearGradientBrush>
            </Button.Background>
        </Button>
        <Button Click="CopyToClipboardClick" Content="Copy to Clipboard" Height="52" Foreground="#FFD8BCBC">
            <Button.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="Black" Offset="0" />
                    <GradientStop Color="#FFB8FFCD" Offset="1" />
                </LinearGradientBrush>
            </Button.Background>
        </Button>

        <Button Click="ZoomExtendsClick" Content="Extends Zoom" Height="52" Foreground="#FFD8BCBC">
            <Button.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="Black" Offset="0" />
                    <GradientStop Color="#FF71AD83" Offset="1" />
                </LinearGradientBrush>
            </Button.Background>
        </Button>
        <ToggleButton Click="ZoomClick" Command="{Binding SetRubberBandZoomModifierCommand}"  SciChart:ToggleButtonExtensions.GroupName="Modifiers" Foreground="#FFE2C2C2" Height="52" Width="55">
            <StackPanel Orientation="Horizontal">

                <TextBlock Margin="3" Text="Zoom"/>
            </StackPanel>
            <ToggleButton.Background>
                <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                    <GradientStop Color="Black" Offset="0" />
                    <GradientStop Color="#FFB8FFCD" Offset="1" />
                </LinearGradientBrush>
            </ToggleButton.Background>
        </ToggleButton>
        <CheckBox Margin="3" Checked="ZoomExtentsY_Checked" Content="ZoomY" Unchecked="ZoomExtentsY_Checked" Height="52" Width="49">
            <CheckBox.Foreground>
                <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                    <GradientStop Color="Black" Offset="0" />
                    <GradientStop Color="Black" Offset="1" />
                </LinearGradientBrush>
            </CheckBox.Foreground>
        </CheckBox>
        <CheckBox Margin="3" Checked="ZoomExtentsX_Checked" Content="ZoomX" Unchecked="ZoomExtentsX_Checked" Height="52" Width="49">
            <CheckBox.Foreground>
                <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                    <GradientStop Color="Black" Offset="0" />
                    <GradientStop Color="#FFB8FFCD" Offset="1" />
                </LinearGradientBrush>
            </CheckBox.Foreground>
        </CheckBox>
        <StackPanel.Background>
            <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                <GradientStop Color="Black" Offset="0" />
                <GradientStop Color="#FFDCEFD6" Offset="1" />
            </LinearGradientBrush>
        </StackPanel.Background>
    </StackPanel>
    <!-- Define the SciChartSurface -->
    <SciChart:SciChartSurface x:Name="sciChartSurface" Padding="10,10,10,10" SciChart:ThemeManager.Theme="Oscilloscope" RenderPriority="Low" Margin="0,45,0,0" Grid.RowSpan="2">



        <!-- Create three RenderableSeries, which map 1:1 to the DataSeries created in code-behind -->
        <SciChart:SciChartSurface.RenderableSeries>
            <SciChart:FastLineRenderableSeries x:Name="lineSeries" SeriesColor="#FFFFA500" StrokeThickness="2"/>
            <SciChart:FastLineRenderableSeries x:Name="redLine" SeriesColor="#FFFF1919"/>

        </SciChart:SciChartSurface.RenderableSeries>

        <!-- Create an X Axis -->
        <SciChart:SciChartSurface.XAxis>
            <SciChart:DateTimeAxis  Name="XAxis" AutoRange="Always" DrawMinorTicks="true" DrawMinorGridLines="True"   DrawLabels ="true" DrawMajorGridLines="true" MinHeight="50"  TextFormatting="HH:mm MMM dd"
                                  SubDayTextFormatting="HH:mm:ss MMM dd yyyy">
                <SciChart:DateTimeAxis.GrowBy>
                    <SciChart:DoubleRange Min="0" Max="0"/>
                </SciChart:DateTimeAxis.GrowBy>
                <SciChart:DateTimeAxis.Scrollbar>
                    <SciChart:SciChartScrollbar Height="16"/>
                </SciChart:DateTimeAxis.Scrollbar>

            </SciChart:DateTimeAxis  >
        </SciChart:SciChartSurface.XAxis>

        <!-- Create a Y Axis -->
        <SciChart:SciChartSurface.YAxis>
            <SciChart:NumericAxis Name="YAxis" AutoRange="Always" DrawMinorTicks="True" DrawMinorGridLines="true" DrawLabels ="true" DrawMajorGridLines="true" TextFormatting="0.0000" >
                <SciChart:NumericAxis.GrowBy>
                    <SciChart:DoubleRange Min="0.1" Max="0.1"/>
                </SciChart:NumericAxis.GrowBy>
                <SciChart:NumericAxis.Scrollbar>
                    <SciChart:SciChartScrollbar Width="16"/>
                </SciChart:NumericAxis.Scrollbar>

            </SciChart:NumericAxis>
        </SciChart:SciChartSurface.YAxis>
        <!--  Add some modifiers to zoom, zoom extents  -->
        <SciChart:SciChartSurface.ChartModifier>

            <SciChart:ModifierGroup>
                <SciChart:XAxisDragModifier></SciChart:XAxisDragModifier>
                <SciChart:YAxisDragModifier AxisId="SecondaryAxisId"></SciChart:YAxisDragModifier>
                <SciChart:YAxisDragModifier AxisId="PrimaryAxisId"></SciChart:YAxisDragModifier>
                <SciChart:LegendModifier ShowLegend="False" ShowVisibilityCheckboxes="False" Margin="3"/>

                <SciChart:ZoomExtentsModifier ExecuteOn="MouseDoubleClick"/>
                <SciChart:ZoomPanModifier ExecuteOn="MouseRightButton" ZoomExtentsY="True" />

                <SciChart:CursorModifier ReceiveHandledEvents="True" ShowAxisLabels="True" ShowTooltip="True" ShowTooltipOn="MouseRightButtonDown"/>
                <SciChart:RubberBandXyZoomModifier x:Name="rubberBandZoomModifier" IsEnabled="{Binding ChartModifier, Mode=TwoWay, ConverterParameter=RubberBandZoom}" IsXAxisOnly="False"/>
                <SciChart:MouseWheelZoomModifier/>
                <!-- For the point values -->

                <SciChart:SeriesSelectionModifier SelectionChanged="SeriesSelectionModifier_SelectionChanged">
                    <SciChart:SeriesSelectionModifier.SelectedSeriesStyle>
                        <Style TargetType="SciChart:BaseRenderableSeries">
                            <Setter Property="PointMarkerTemplate">
                                <Setter.Value>
                                    <ControlTemplate>
                                        <SciChart:EllipsePointMarker x:Name="PART_PointMarker" Stroke="White" Fill="#77777777" StrokeThickness="1" Width="5" Height="5"/>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </SciChart:SeriesSelectionModifier.SelectedSeriesStyle>
                </SciChart:SeriesSelectionModifier>

            </SciChart:ModifierGroup>

        </SciChart:SciChartSurface.ChartModifier>

        <!--    -->

    </SciChart:SciChartSurface>

    <!-- Define the Toolbar -->



    <StackPanel Grid.Row="0" Margin="2,4"  HorizontalAlignment="Left" Orientation="Horizontal">

    </StackPanel>
    <!-- Define the Toolbar verticale -->
    <!-- Update Theme -->



</Grid>

  • You must to post comments
0
0

Hi Yuriy,
Yes i make AutoRange set to “Always” but when i click in the button Zoom i make it Never and when i click in the button Extend Zoom i return it always, i think not this my problem ! also when i want run this application” Realtime Ticking stock charts” i have some problem like in the picture ! have you any idea ! thank you !

Images
  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.

Try SciChart Today

Start a trial and discover why we are the choice
of demanding developers worldwide

Start TrialCase Studies