ChartPanAndZoomBehavior : Hide Vertical Scrollbar

6 posts, 0 answers
  1. Nitin Nitin
    Nitin Nitin avatar
    41 posts
    Member since:
    Apr 2010

    Posted 25 Jul 2013 Link to this post

    Hello there,

    I am facing problem for hiding the vertical scroll for cartesianchart.
    I have added telerik:ChartPanAndZoomBehavior to allow user to zoom using mouse scroll (both horizontally & vertically)
     and drag to pan (both horizontally & vertically) as bellow:


    <telerik:RadCartesianChart x:Name="xRadCartesianChart" MouseMove="xRadCartesianChart_MouseMove">
            <telerik:RadCartesianChart.Grid>
                <telerik:CartesianChartGrid MajorLinesVisibility="Y"  MajorYLineStyle="{StaticResource YGridLineStyle}"/>
            </telerik:RadCartesianChart.Grid>
            <telerik:RadCartesianChart.Behaviors>
                    <telerik:ChartTrackBallBehavior ShowIntersectionPoints="True"  ShowTrackInfo="True"></telerik:ChartTrackBallBehavior>
                    <telerik:ChartPanAndZoomBehavior x:Name="chartPanZoomBehavior" DragMode="Pan" ZoomMode="Both" PanMode="Both"></telerik:ChartPanAndZoomBehavior>
            </telerik:RadCartesianChart.Behaviors>
            <telerik:RadCartesianChart.VerticalAxis>
                    <telerik:LinearAxis MajorTickStyle="{StaticResource tickStyle}" PanZoomBarStyle="{StaticResource PanZoomBarStyle}" LineThickness="0" Margin="0,0,0,0" Foreground="{StaticResource actualCUF}" HorizontalLocation="Right" >
                    <telerik:LinearAxis.LabelTemplate>
                        <DataTemplate>
                            <Border  BorderThickness="0">
                                <TextBlock  Margin="2,0,0,0" Text="{Binding}" Style="{StaticResource AxisLabelTemplate}"/>
                            </Border>
                        </DataTemplate>
                    </telerik:LinearAxis.LabelTemplate>
                </telerik:LinearAxis>
            </telerik:RadCartesianChart.VerticalAxis>
            <telerik:RadCartesianChart.TrackBallInfoStyle>
                <Style TargetType="telerik:TrackBallInfoControl">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="telerik:TrackBallInfoControl">
                                <Border BorderThickness="1" BorderBrush="{StaticResource smallText}" Margin="0,0,0,0">
                                    <StackPanel x:Name="panel"  Orientation="Vertical" Background="{StaticResource tooltip}" >
                                    </StackPanel>
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </telerik:RadCartesianChart.TrackBallInfoStyle>
             
            <telerik:RadCartesianChart.HorizontalAxis>
                    <telerik:DateTimeCategoricalAxis PanZoomBarStyle="{StaticResource PanZoomBarStyle}"
                    LineThickness="0"
                    Margin="0,0,0,0"
                    DateTimeComponent="Ticks"
                    PlotMode="OnTicks"
                    MajorTickInterval="180"
                    ShowLabels="True"
                    MajorTickStyle="{StaticResource tickStyle}">
                   <telerik:DateTimeCategoricalAxis.LabelTemplate >
                        <DataTemplate>
                            <Border  BorderThickness="0">
                                <TextBlock Margin="32,0,5,0" Text="{Binding}" Style="{StaticResource AxisLabelTemplate}"/>
                            </Border>
                        </DataTemplate>
                    </telerik:DateTimeCategoricalAxis.LabelTemplate>
                </telerik:DateTimeCategoricalAxis>
            </telerik:RadCartesianChart.HorizontalAxis>
            </telerik:RadCartesianChart>


    As per my requirement, to hide the horizontal and vertical scroll bar, I have added  PanZoomBarStyle="{StaticResource PanZoomBarStyle}"
    to both Horizontal and Vertical Axis: 

    <Style x:Key="PanZoomBarStyle" TargetType="telerikChartView:PanZoomBar">
            <Setter Property="HandlesVisibility" Value="Visible" />
            <Setter Property="IsMouseWheelEnabled" Value="False" />
            <Setter Property="IsSelectionRangeEnabled" Value="True" />
            <Setter Property="StepAction" Value="MoveRange" />
            <Setter Property="BorderBrush" Value="Transparent" />
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="ThumbStyle" Value="{StaticResource ThumbStyle}" />
            <Setter Property="AlternateThumbStyle" Value="{StaticResource AlternateThumbStyle}" />
            <Setter Property="SelectionMiddleThumbStyle" Value="{StaticResource SelectionMiddleThumbStyle}" />
            <Setter Property="TrackStyle" Value="{StaticResource TrackStyle}" />
            <Setter Property="IncreaseHandleStyle" Value="{StaticResource IncreaseHandleStyle}" />
            <Setter Property="DecreaseHandleStyle" Value="{StaticResource DecreaseHandleStyle}" />
            <Setter Property="IsTabStop" Value="False" />
            <Setter Property="SmallChange" Value="0.01" />
            <Setter Property="LargeChange" Value="0.1" />
            <Setter Property="Minimum" Value="0" />
            <Setter Property="Maximum" Value="1" />
            <Setter Property="MinimumRangeSpan" Value="0.01" />
            <Setter Property="Padding" Value="0 3" />
            <Setter Property="Height" Value="10" />
            <Setter Property="Width" Value="15" />
            <Setter Property="ScrollViewer.Visibility" Value="Collapsed" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="telerikChartView:PanZoomBar">
                        <telerikPrimitives:LayoutTransformControl x:Name="layoutControl" RenderTransformOrigin=".5 0">
                            <telerikPrimitives:LayoutTransformControl.LayoutTransform>
                                <TransformGroup>
                                    <ScaleTransform />
                                    <SkewTransform />
                                    <RotateTransform />
                                    <TranslateTransform />
                                </TransformGroup>
                            </telerikPrimitives:LayoutTransformControl.LayoutTransform>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="OrientationStates">
                                    <VisualState x:Name="Horizontal">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="layoutControl" Storyboard.TargetProperty="LayoutTransform">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <RotateTransform Angle="0" />
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Vertical">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="layoutControl" Storyboard.TargetProperty="LayoutTransform">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <RotateTransform Angle="-90" />
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Grid>
                                <Border BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Background="Transparent" />
                                <Grid UseLayoutRounding="True">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>
                                    <ContentControl x:Name="Track" Grid.Column="1" Grid.ColumnSpan="3" Style="{TemplateBinding TrackStyle}" />
                                    <RepeatButton x:Name="DecreaseButton" Delay="{TemplateBinding Delay}" Interval="{TemplateBinding RepeatInterval}" Visibility="{TemplateBinding HandlesVisibility}" Style="{TemplateBinding DecreaseHandleStyle}" />
                                    <RepeatButton x:Name="LargeDecreaseButton" Grid.Column="1" Style="{StaticResource LargeHandleStyle}" Delay="{TemplateBinding Delay}" Interval="{TemplateBinding RepeatInterval}" />
                                    <Grid Grid.Column="2" Margin="{TemplateBinding Padding}">
                                        <Thumb x:Name="SingleThumbHost" Style="{TemplateBinding ThumbStyle}" Visibility="Collapsed" />
                                        <StackPanel x:Name="RangeThumbsPanel" Orientation="Horizontal">
                                            <Thumb x:Name="RangeStartThumb" Style="{TemplateBinding ThumbStyle}" Cursor="SizeWE" Visibility="{TemplateBinding ThumbVisibility}" />
                                            <Thumb x:Name="RangeMiddleThumb" Style="{TemplateBinding SelectionMiddleThumbStyle}" />
                                            <Thumb x:Name="RangeEndThumb" Style="{TemplateBinding AlternateThumbStyle}" Cursor="SizeWE" Visibility="{TemplateBinding ThumbVisibility}" />
                                        </StackPanel>
                                    </Grid>
                                    <RepeatButton x:Name="LargeIncreaseButton" Grid.Column="3" Style="{StaticResource LargeHandleStyle}" Delay="{TemplateBinding Delay}" Interval="{TemplateBinding RepeatInterval}"/>
                                    <RepeatButton x:Name="IncreaseButton" Grid.Row="1" Grid.Column="4" Delay="{TemplateBinding Delay}" Interval="{TemplateBinding RepeatInterval}" RenderTransformOrigin="0.5,0.5" Style="{TemplateBinding IncreaseHandleStyle}" />
                                </Grid>
                            </Grid>
                        </telerikPrimitives:LayoutTransformControl>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    In the above style, I have added <Setter Property="ScrollViewer.Visibility" Value="Collapsed" /> 
    which made horizontal scrollbar hidden, but the vertical scroll is still visible


    I have tried setting the ScrollViewer.VerticalScrollBarVisibility="Hidden" in the style as well as in the radcartesianchart code.


    Please tell me what I'm missing to hide the vertical scrollbar when using telerik:ChartPanAndZoomBehavior.

    Very urgent. Please reply asap.

    Thanks,
    Nitin
  2. Nitin Nitin
    Nitin Nitin avatar
    41 posts
    Member since:
    Apr 2010

    Posted 26 Jul 2013 Link to this post

    Hello Telerik,
     
    Please reply to my question.

  3. DevCraft banner
  4. Nitin Nitin
    Nitin Nitin avatar
    41 posts
    Member since:
    Apr 2010

    Posted 29 Jul 2013 Link to this post

    Hello Telerik,

    Can you please reply to my question, if it is possible or not?
  5. Rosko
    Admin
    Rosko avatar
    137 posts

    Posted 30 Jul 2013 Link to this post

    Hi Nitin Nitin,

    The easiest way to achieve this is apply an implicit style to the PanZoomBar. You can see it demonstrated in the code below:
    <telerik:RadCartesianChart>
        <telerik:RadCartesianChart.Resources>
            <Style TargetType="telerik:PanZoomBar">
                <Setter Property="Visibility" Value="Collapsed"/>
            </Style>
        </telerik:RadCartesianChart.Resources>
     
        <telerik:RadCartesianChart.HorizontalAxis>
            <telerik:CategoricalAxis/>
        </telerik:RadCartesianChart.HorizontalAxis>
         
        <telerik:RadCartesianChart.VerticalAxis>
            <telerik:LinearAxis/>
        </telerik:RadCartesianChart.VerticalAxis>
         
        <telerik:RadCartesianChart.Series>
            <telerik:BarSeries>
                <telerik:BarSeries.DataPoints>
                    <telerik:CategoricalDataPoint Category="1" Value="1"/>
                    <telerik:CategoricalDataPoint Category="2" Value="2"/>
                    <telerik:CategoricalDataPoint Category="3" Value="3"/>
                    <telerik:CategoricalDataPoint Category="4" Value="4"/>
                    <telerik:CategoricalDataPoint Category="5" Value="5"/>
                    <telerik:CategoricalDataPoint Category="6" Value="6"/>
                    <telerik:CategoricalDataPoint Category="7" Value="7"/>
                    <telerik:CategoricalDataPoint Category="8" Value="8"/>
                    <telerik:CategoricalDataPoint Category="9" Value="9"/>
                </telerik:BarSeries.DataPoints>
            </telerik:BarSeries>
        </telerik:RadCartesianChart.Series>
         
        <telerik:RadCartesianChart.Behaviors>
            <telerik:ChartPanAndZoomBehavior ZoomMode="Both"/>
        </telerik:RadCartesianChart.Behaviors>
    </telerik:RadCartesianChart>



    Regards,
    Rosko
    Telerik
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for SILVERLIGHT.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  6. Shahid
    Shahid avatar
    2 posts
    Member since:
    Jun 2013

    Posted 27 May 2014 Link to this post

    Hello Team,

    I am using RadChartView for displaying thousand of data in one view. But X-axis label is not in view-able, Here CategoricalAxis  of HorizontalAxis class is getting used for some reason. I want to show  maximum 10  x-axis labels at x-axis while scrolling and zooming. Here I want to manage these with the help of MajorTickInterval property of  CategoricalAxis. 

    Now my requirement is that, calculating MajorTickInterval value dynamically. And these need number of visible data point in current view.

    Thanks,
    S Ansari















  7. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 29 May 2014 Link to this post

    Hi,

    Unfortunately, there is no built-in functionality for getting the number of the visualized points. However, you can count those UIElements manually. 

    In order to do this you can use the GetDataPointVisual() method of the series. You can traverse all data points of the series and call that method for everyone.

    Regards,
    Pavel R. Pavlov
    Telerik
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
Back to Top
DevCraft banner