ChartPanAndZoomBehavior : Hide Vertical Scrollbar

[Nitin Nitin]

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

[Nitin Nitin]

Hello Telerik,
 
Please reply to my question.

[Nitin Nitin]

Hello Telerik,

Can you please reply to my question, if it is possible or not?

[Rosko]

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

[Shahid]

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

[Pavel R. Pavlov]

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