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

ChartPanAndZoomBehavior : Hide Vertical Scrollbar

5 Answers 294 Views

ChartView

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

This question is locked. New answers and comments are not allowed.

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="*" />

<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>

</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

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 >>

answered on 27 May 2014, 09:52 AM

1.png

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

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.