Zoom interaction problems

6 posts, 0 answers
  1. Michele
    Michele avatar
    13 posts
    Member since:
    Aug 2011

    Posted 23 Oct 2012 Link to this post

    Dear Telerik,

    I need to use the zoom facility in the radchart but I need to disable the functionality to zoom by selecting an area on the chart as I need to perform other actions when clicking on the chart.

    Looking on the forum I found that this code should do the trick.

    private void ChartArea_Loaded(object sender, RoutedEventArgs e)
    {
        dragZoomLayer = this.Chart.ChildrenOfType<DragZoomLayerControl>().Single();
        dragZoomLayer.IsInteractive = false;
    }

    This actually works but as soon as I zoom using the bar next to axis, the interactivity is restored and as soon as I click on the chart area I get the selection for zoom. Is this a known bug? Can you suggest a work around?

    The other problem I have is that when a point in a line series is outside the selected range, the line connecting it to the next point is not drawn. Is there a way to change this behaviour as I need to see the line between two points after a zoom-in action?

    Thanks for the help,

    Michele
  2. Petar Marchev
    Admin
    Petar Marchev avatar
    968 posts

    Posted 24 Oct 2012 Link to this post

    Hello Michele,

    The code that you have found is some work-around that works in some cases. Apparently it is not a feasible solution in your scenario. If disabling the drag-zoom is of that great importance to your project then I would suggest you set the ScrollMode to None, retemplate the axis and remove the Visibility binding in the RadSlider (it hides the zoom-slider when the ScrollMode is None). This way the slider will always be visible.

    I have prepared a very simple app to demonstrate this. Let us know how it goes. Note that I have not included some of the resources as this was not the goal. 

    Kind regards,
    Petar Marchev
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. DevCraft banner
  4. Michele
    Michele avatar
    13 posts
    Member since:
    Aug 2011

    Posted 25 Oct 2012 Link to this post

    Dear Petar,

    thanks for the project, it is working fine with a single series but there is some problem when I tried to add another one (a LineSeries in my case). A soon as I move the slider the points are removed even if they are in the selected range. I am attaching two images to show the problem.

    Can you suggest a way of keeping the points and draw the line between them even if one of the point is out of range (in my example I would like to see the line drawn even if the range is 0-0.1)?

    Here are the modified classes to reproduce my problem.

    MainPage.xaml (added a line series).
    <UserControl x:Class="sl_Chart_621119.MainPage"
        xmlns:local="clr-namespace:sl_Chart_621119"
        mc:Ignorable="d"
        d:DesignHeight="300" d:DesignWidth="400">
        <UserControl.Resources>
            <local:MainViewModel x:Key="MainViewModel" />
            <Style TargetType="telerik:AxisX2D">
                <Setter Property="Foreground" Value="Black"/>           
                <Setter Property="Template" >
                    <Setter.Value>
                        <ControlTemplate TargetType="telerik:AxisX2D">
                            <Grid Margin="{TemplateBinding Margin}">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="auto" />
                                    <RowDefinition Height="auto" />
                                    <RowDefinition Height="auto" />
                                    <RowDefinition Height="auto" />
                                    <RowDefinition Height="auto" />
                                </Grid.RowDefinitions>
                                <telerik:RadSlider x:Name="PART_AxisSlider"
                                                   IsDeferredDraggingEnabled="true"
                                                   Background="White"
                                                   Minimum="0"
                                                   Maximum="1" 
                                                   Grid.Row="{TemplateBinding SliderPosition}"
                                                   MinimumRangeSpan="{Binding MinZoomRange}"
                                                   IsSelectionRangeEnabled="True" />
                                <Line x:Name="PART_AxisLine"
                                      Grid.Row="{TemplateBinding InnerPosition}"
                                      Style="{TemplateBinding AxisLineStyle}"
                                      VerticalAlignment="{TemplateBinding AxisLineAlignment}" />
                                <ItemsPresenter Grid.Row="{TemplateBinding InnerPosition}" Visibility="{TemplateBinding AxisTicksVisibility}" />
                                <telerik:VerticalMinorTicks2D x:Name="PART_MinorTickPoints"
                                                            Grid.Row="{TemplateBinding InnerPosition}"
                                                            Visibility="{TemplateBinding AxisMinorTicksVisibility}"
                                                            VerticalAlignment="{TemplateBinding AxisLineAlignment}" />
     
                                <telerik:HorizontalAxisLabels2D Grid.Row="2" x:Name="PART_AxisLabels"
                                                                Visibility="{TemplateBinding AxisLabelsVisibility}" />
                                <telerik:LayoutTransformControl Grid.Row="{TemplateBinding OuterPosition}"
                                                                VerticalAlignment="Stretch"
                                                                HorizontalAlignment="Stretch">
                                    <telerik:LayoutTransformControl.Content>
                                        <telerik:AxisTitle x:Name="PART_AxisTitle"
                                                           Visibility="{TemplateBinding AxisTitleVisibility}"
                                                           Style="{TemplateBinding AxisTitleStyle}">
                                        </telerik:AxisTitle>
                                    </telerik:LayoutTransformControl.Content>
                                </telerik:LayoutTransformControl>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Setter Property="ItemsPanel" >
                    <Setter.Value>
                        <ItemsPanelTemplate >
                            <telerik:AxisXPanel />
                        </ItemsPanelTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </UserControl.Resources>
     
        <Grid DataContext="{StaticResource MainViewModel}" >
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <telerik:RadChart x:Name="radChart1"  Grid.Row="0" >
                <telerik:RadChart.SeriesMappings>
                    <telerik:SeriesMapping ItemsSource="{Binding Points}">
                        <telerik:SeriesMapping.SeriesDefinition>
                            <telerik:SplineSeriesDefinition ShowItemLabels="False" ShowPointMarks="False" />
                        </telerik:SeriesMapping.SeriesDefinition>
                        <telerik:ItemMapping DataPointMember="XValue" FieldName="X" />
                        <telerik:ItemMapping DataPointMember="YValue" FieldName="Y" />
                    </telerik:SeriesMapping>
                    <telerik:SeriesMapping ItemsSource="{Binding Line}">
                        <telerik:SeriesMapping.SeriesDefinition>
                            <telerik:LineSeriesDefinition ShowItemLabels="False" ShowPointMarks="True" />
                        </telerik:SeriesMapping.SeriesDefinition>
                        <telerik:ItemMapping DataPointMember="XValue" FieldName="X" />
                        <telerik:ItemMapping DataPointMember="YValue" FieldName="Y" />
                    </telerik:SeriesMapping>
                </telerik:RadChart.SeriesMappings>
                <telerik:RadChart.DefaultView>
                    <telerik:ChartDefaultView>
                        <telerik:ChartDefaultView.ChartArea>
                            <telerik:ChartArea>
                                <telerik:ChartArea.ZoomScrollSettingsX>
                                    <telerik:ZoomScrollSettings x:Name="ZoomScrollSettings1" ScrollMode="None"
                                                                RangeStart="{Binding SelectionStart, Source={StaticResource MainViewModel}}"
                                                                RangeEnd="{Binding SelectionEnd, Source={StaticResource MainViewModel}}"/>
                                </telerik:ChartArea.ZoomScrollSettingsX>
                            </telerik:ChartArea>
                        </telerik:ChartDefaultView.ChartArea>
                    </telerik:ChartDefaultView>
                </telerik:RadChart.DefaultView>
            </telerik:RadChart>
        </Grid>
    </UserControl>

    MainViewModel.cs (added the new List called Line which contains two points).
    using System;
    using System.Net;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Documents;
    using System.Windows.Ink;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Animation;
    using System.Windows.Shapes;
    using Telerik.Windows.Controls;
    using System.Collections.Generic;
     
    namespace sl_Chart_621119
    {
        public class MainViewModel : ViewModelBase
        {
            public MainViewModel()
            {
                var points = new List<Point>() { };
                Random random = new Random();
                for (int i = -400; i < 400; i++)
                {
                    Point p = new Point(i / 1000d, random.Next(i - 20, i + 20));
                    points.Add(p);
                }
     
                this.Points = points;
     
                this.Line = new List<Point>();
                this.Line.Add(new Point(-0.1, 100d));
                this.Line.Add(new Point(0.2, 100d));
            }
     
            public List<Point> Points { get; private set; }
            public List<Point> Line { get; private set; }
     
            private double selectionStart = 0;
            public double SelectionStart
            {
                get { return this.selectionStart; }
     
                set
                {
                    if (this.selectionStart != value)
                    {
                        this.selectionStart = value;
                        this.OnPropertyChanged("SelectionStart");
                    }
                }
            }
     
            private double selectionEnd = 1;
            public double SelectionEnd
            {
                get { return this.selectionEnd; }
     
                set
                {
                    if (this.selectionEnd != value)
                    {
                        this.selectionEnd = value;
                        this.OnPropertyChanged("SelectionEnd");
                    }
                }
            }
        }
    }
  5. Petar Marchev
    Admin
    Petar Marchev avatar
    968 posts

    Posted 26 Oct 2012 Link to this post

    Hi Michele,

    Unfortunately this is a RadChart limitation (not related to the slider work-around) - RadChart cannot handle Zoom&Scroll in scenarios where the different series have different x-ranges and the AutoRange is true. In this case the line series has a Min = -0.1 and Max 0.2 and the spline series has Min = -0.4 and Max = 0.4. What needs to be done here is to put the x-axis into manual mode:
    this.radChart1.DefaultView.ChartArea.AxisX.AutoRange = false;
    this.radChart1.DefaultView.ChartArea.AxisX.MinValue = -0.4;
    this.radChart1.DefaultView.ChartArea.AxisX.MaxValue = 0.4;
    this.radChart1.DefaultView.ChartArea.AxisX.Step = 0.2;

    Try this code and see how it goes. If you have not started integrating the RadChart into your actual app I would suggest you consider using the RadChartView instead. It is a newer control with a higher performance rate and is generally more flexible than the RadChart. It also does not have the limitation in mind.

    However the RadChartView faces the same problem as the original issue - when the Zoom behavior is on and the user click+drags - a border is shown and it is being zoomed. So you would need to apply a similar work-around - do not turn the Zoom behavior on and implement zooming with a slider positioned under the chart. I have attached a simple project to demonstrate this.

    Note that the RadChart and RadCartesianChart are two different controls and they do not have an equivalent to each feature.

    Greetings,
    Petar Marchev
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  6. Michele
    Michele avatar
    13 posts
    Member since:
    Aug 2011

    Posted 29 Oct 2012 Link to this post

    Dear Petar,

    Thanks again for clarification and the project showing how to implement the slider in a RadChartView. However I have already tried to use the RadCartesianChart and found several problems in implementing all the features I need; in particular I could not find a way to have two series share the same SECONDARY y axis which is possible using the RadChart. Any light on this topic would be welcome.

    I have the RadChart almost completely working so I prefer completing it; the only problem left is caused by zooming with the slider. Attached you will find some images to show my problem.
    If I have a line series with two points and one of them is out of the range defined in the xaml (MinValue and MaxValue), the line connecting two points is drawn. However if the same range is defined using the slider the line is not drawn. Is there a way to have the line drawn zooming with the slider?

    Thanks for the help,

    Michele
  7. Petar Marchev
    Admin
    Petar Marchev avatar
    968 posts

    Posted 31 Oct 2012 Link to this post

    Hi,

    1. It is possible to have a shared secondary axis. How to do it is explained and demonstrated in this help topic - Multiple Axes in the Shared Horizontal Axis section.

    2. This is a RadChart limitation - when zoom&scroll is on - the points that are not in the zoomed range are not drawn. In your case - the first point (-0.1) is not in the zoomed range (0, 0.4) and it is not drawn at all. (this is not the case in the RadChartView)

    Greetings,
    Petar Marchev
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top
DevCraft banner