This is a migrated thread and some comments may be shown as answers.

ChartPanAndZoomBehavior : Hide Vertical Scrollbar

5 Answers 126 Views
ChartView
This is a migrated thread and some comments may be shown as answers.
Nitin Nitin
Top achievements
Rank 1
Nitin Nitin asked on 25 Jul 2013, 01:54 PM
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

5 Answers, 1 is accepted

Sort by
0
Nitin Nitin
Top achievements
Rank 1
answered on 26 Jul 2013, 06:07 AM
Hello Telerik,
 
Please reply to my question.

0
Nitin Nitin
Top achievements
Rank 1
answered on 29 Jul 2013, 06:27 AM
Hello Telerik,

Can you please reply to my question, if it is possible or not?
0
Rosko
Telerik team
answered on 30 Jul 2013, 06:54 AM
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 >>
0
Shahid
Top achievements
Rank 1
answered on 27 May 2014, 09:52 AM
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















0
Pavel R. Pavlov
Telerik team
answered on 29 May 2014, 11:20 AM
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.
 
Tags
ChartView
Asked by
Nitin Nitin
Top achievements
Rank 1
Answers by
Nitin Nitin
Top achievements
Rank 1
Rosko
Telerik team
Shahid
Top achievements
Rank 1
Pavel R. Pavlov
Telerik team
Share this question
or