ChartPanAndZoomBehavior problems

4 posts, 0 answers
  1. Tinja
    Tinja avatar
    3 posts
    Member since:
    Apr 2013

    Posted 24 Oct 2013 Link to this post

    Hi!
    I have a nasty problem with the ChartPanAndZoomBehavior.
    At first I tried binding values to the PanMode and ZoomMode through a converter that returned ChartPanZoomMode, but it didn't work at all. (Also I need to change the behavior depending on the orientation of the phone.) I have ended up writing a whole ton of code-behind to handle the ChartPanAndZoomBehavior, but nothing seems to work.

    Here's some background of the "chart implementation":
    I have a user control that works as an item template for report items which are displayed on a pivot page. The user control can display all the basic charts and some others (e.g. gauge) according to the data bound to the control. The report model for the charts contains properties that define the properties of a chart. Some of these properties cannot be bound in the xaml even with converters, e.g. CharPanAndZoomBehavior, which is the most frustrating issue I've run into so far.

    To explain my problem here's an example: I have two charts, one normal bar chart wrapped in a grid and one "horizontal" bar chart wrapped in a scrollviewer. I set the ChartPanAndZoomBehavior in the code-behind as the chart is loaded/rendered according to the panzoom-property in the model. For some reason I cannot set the behavior of the normal chart, but it works just fine with the "horizontal" bar chart. I have tried so many different ways to get this working, but I can't find anything that works for both chart types.

    Thank you and let me know if you need something else to solve this.

    BR,
    Tinja

    And here are zome code examples:
    The charts:
    - Data series are set in the code behind according to the model
    <Grid x:Name="ContentGrid" >
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <Grid x:Name="Charts">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <ScrollViewer x:Name="HSBCScroll" Grid.Row="2">
                            <telerikChart:RadCartesianChart x:Name="HorizontalChart" Background="Transparent" Margin="0,0,24,6"
                                                        Height="{Binding CurrentReport.DataSet, Converter={StaticResource HeightConverter}, ConverterParameter=DatasetCount}"
                                                        Visibility="{Binding CurrentReport.ChartType, Converter={StaticResource ChartTypeVisibilityConverter}, ConverterParameter=HorizontalChart}"
                                                        Foreground="{StaticResource CustomForegroundBrush}"
                                                        HorizontalAlignment="Stretch" VerticalAlignment="Stretch" RenderTransformOrigin="0.5,0.5" >
                                <telerikChart:RadCartesianChart.HorizontalAxis>
                                    <telerikChart:LinearAxis Foreground="{StaticResource CustomForegroundBrush}" LineStroke="{StaticResource ChartLineBrush}"
                                                LabelFormat="{Binding CurrentReport.YLabelFormat}" />
                                </telerikChart:RadCartesianChart.HorizontalAxis>
                                <telerikChart:RadCartesianChart.VerticalAxis>
                                    <telerikChart:CategoricalAxis Foreground="{StaticResource CustomForegroundBrush}" LineStroke="{StaticResource ChartLineBrush}" MaxWidth="100"
                                                     LabelFormat="{Binding CurrentReport.XLabelFormat}" LabelFitMode="MultiLine" HorizontalAlignment="Left"/>
                                </telerikChart:RadCartesianChart.VerticalAxis>
                                <telerikChart:RadCartesianChart.Grid>
                                    <telerikChart:CartesianChartGrid MajorLinesVisibility="{Binding CurrentReport.GridLine, Converter={StaticResource LineVisibilityConverter}, ConverterParameter=GridLineVisibility}"
                                                             >
                                        <telerikChart:CartesianChartGrid.MajorYLineStyle>
                                            <Style TargetType="Line">
                                                <Setter Property="StrokeDashArray" Value="1,1"/>
                                                <Setter Property="Stroke" Value="{StaticResource ChartLineBrush}"/>
                                            </Style>
                                        </telerikChart:CartesianChartGrid.MajorYLineStyle>
                                    </telerikChart:CartesianChartGrid>
                                </telerikChart:RadCartesianChart.Grid>
                                <telerikChart:RadCartesianChart.Behaviors>
                                    <!--<telerikChart:ChartPanAndZoomBehavior ZoomMode="Both" PanMode="Both"/>-->
                                    <telerikChart:ChartTooltipBehavior  ContextNeeded="ChartTooltipBehaviorContextNeeded" TriggerMode="Hold" SnapToClosestPoint="True"/>
                                </telerikChart:RadCartesianChart.Behaviors>
                                <telerikChart:RadCartesianChart.TooltipTemplate>
                                    <DataTemplate>
                                        <Border Background="White" BorderThickness="1" BorderBrush="{StaticResource CustomForegroundBrush}"
                                            Padding="12,18">
                                            <Grid>
                                                <Grid.RowDefinitions>
                                                    <RowDefinition/>
                                                    <RowDefinition/>
                                                </Grid.RowDefinitions>
                                                <StackPanel Orientation="Horizontal">
                                                    <TextBlock Text="{Binding Title}"  Margin="0,0,6,0" FontFamily="Segoe WP Semibold"/>
                                                    <TextBlock Text="{Binding Category}" FontFamily="Segoe WP Semibold"/>
                                                </StackPanel>
                                                <ItemsControl Grid.Row="1" ItemsSource="{Binding TooltipDetails}">
                                                    <ItemsControl.ItemTemplate>
                                                        <DataTemplate>
                                                            <Grid>
                                                                <StackPanel Orientation="Horizontal">
                                                                    <Rectangle Height="20" Width="20" Fill="{Binding FillColor}"/>
                                                                    <TextBlock Text="{Binding SeriesName}" Margin="6,0,6,0" FontFamily="Segoe WP"/>
                                                                    <TextBlock Text="{Binding Value}" FontFamily="Segoe WP"/>
                                                                </StackPanel>
                                                            </Grid>
                                                        </DataTemplate>
                                                    </ItemsControl.ItemTemplate>
                                                </ItemsControl>
                                            </Grid>
                                        </Border>
                                    </DataTemplate>
                                </telerikChart:RadCartesianChart.TooltipTemplate>
                            </telerikChart:RadCartesianChart>
                        </ScrollViewer>
     
                        <telerikChart:RadCartesianChart x:Name="Chart" Background="Transparent"  Grid.Row="2"
                                                        Visibility="{Binding CurrentReport.ChartType, Converter={StaticResource ChartTypeVisibilityConverter}, ConverterParameter=NormalChart}"
                                                        Foreground="{StaticResource CustomForegroundBrush}"
                                                        HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="12" RenderTransformOrigin="0.5,0.5">
                            <telerikChart:RadCartesianChart.HorizontalAxis>
                                <telerikChart:CategoricalAxis Foreground="{StaticResource CustomForegroundBrush}"  LabelFitMode="Rotate" LineStroke="{StaticResource ChartLineBrush}"
                                                              LabelFormat="{Binding CurrentReport.XLabelFormat}" FontSize="12" LabelInterval="{Binding CurrentReport.LabelInterval}"/>
                            </telerikChart:RadCartesianChart.HorizontalAxis>
                            <telerikChart:RadCartesianChart.VerticalAxis>
                                <telerikChart:LinearAxis Foreground="{StaticResource CustomForegroundBrush}"  LineStroke="{StaticResource ChartLineBrush}"
                                                         LabelFormat="{Binding CurrentReport.YLabelFormat}" FontSize="12"/>
                            </telerikChart:RadCartesianChart.VerticalAxis>
                            <telerikChart:RadCartesianChart.Grid>
                                <telerikChart:CartesianChartGrid MajorLinesVisibility="{Binding CurrentReport.GridLine, Converter={StaticResource LineVisibilityConverter}, ConverterParameter=GridLineVisibility}"
                                                                 BorderBrush="{StaticResource CustomForegroundBrush}" >
                                    <telerikChart:CartesianChartGrid.MajorYLineStyle>
                                        <Style TargetType="Line">
                                            <Setter Property="StrokeDashArray" Value="1,1"/>
                                            <Setter Property="Stroke" Value="{StaticResource ChartLineBrush}"/>
                                        </Style>
                                    </telerikChart:CartesianChartGrid.MajorYLineStyle>
                                </telerikChart:CartesianChartGrid>
                            </telerikChart:RadCartesianChart.Grid>
                            <telerikChart:RadCartesianChart.Behaviors>
                                <!--<telerikChart:ChartPanAndZoomBehavior ZoomMode="Both" PanMode="Both"/>-->
                                <telerikChart:ChartTooltipBehavior ContextNeeded="ChartTooltipBehaviorContextNeeded" TriggerMode="Hold" SnapToClosestPoint="True" />
                            </telerikChart:RadCartesianChart.Behaviors>
                            <telerikChart:RadCartesianChart.TooltipTemplate>
                                <DataTemplate>
                                    <Border Background="White" BorderThickness="1" BorderBrush="{StaticResource CustomForegroundBrush}"
                                            Padding="12,18">
                                        <Grid>
                                            <Grid.RowDefinitions>
                                                <RowDefinition/>
                                                <RowDefinition/>
                                            </Grid.RowDefinitions>
                                            <StackPanel Orientation="Horizontal">
                                                <TextBlock Text="{Binding Title}"  Margin="0,0,6,0" FontFamily="Segoe WP Semibold"/>
                                                <TextBlock Text="{Binding Category}" FontFamily="Segoe WP Semibold"/>
                                            </StackPanel>
                                            <ItemsControl Grid.Row="1" ItemsSource="{Binding TooltipDetails}">
                                                <ItemsControl.ItemTemplate>
                                                    <DataTemplate>
                                                        <Grid>
                                                            <StackPanel Orientation="Horizontal">
                                                                <Rectangle Height="20" Width="20" Fill="{Binding FillColor}"/>
                                                                <TextBlock Text="{Binding SeriesName}" Margin="6,0,6,0" FontFamily="Segoe WP"/>
                                                                <TextBlock Text="{Binding Value}" FontFamily="Segoe WP"/>
                                                            </StackPanel>
                                                        </Grid>
                                                    </DataTemplate>
                                                </ItemsControl.ItemTemplate>
                                            </ItemsControl>
                                        </Grid>
                                    </Border>
                                </DataTemplate>
                            </telerikChart:RadCartesianChart.TooltipTemplate>
                        </telerikChart:RadCartesianChart>
                    </Grid>

    Code behind:
    - The Chart and HorizontalChart's behaviors after this have the ChartPanAndZoomBehavior and the values of the modes are Horizontal | Vertical, but it doesn't behave like that with the Chart.
    private void SetChartPanZoomBehavior(Report report)
            {
                ChartPanAndZoomBehavior panZoomModeBehavior = new ChartPanAndZoomBehavior();
     
                switch (report.PanMode.ToLower())
                {
                    case "vertical":
                        panZoomModeBehavior.PanMode = ChartPanZoomMode.Vertical;
                        break;
                    case "horizontal":
                        panZoomModeBehavior.PanMode = ChartPanZoomMode.Horizontal;
                        break;
                    case "none":
                        panZoomModeBehavior.PanMode = ChartPanZoomMode.None;
                        break;
                    default:
                        panZoomModeBehavior.PanMode = ChartPanZoomMode.Both;
                        break;
                }
     
                switch (report.ZoomMode.ToLower())
                {
                    case "vertical":
                        panZoomModeBehavior.ZoomMode = ChartPanZoomMode.Vertical;
                        break;
                    case "horizontal":
                        panZoomModeBehavior.ZoomMode = ChartPanZoomMode.Horizontal;
                        break;
                    case "none":
                        panZoomModeBehavior.ZoomMode = ChartPanZoomMode.None;
                        break;
                    default:
                        panZoomModeBehavior.ZoomMode = ChartPanZoomMode.Both;
                        break;
                }
                if (!HorizontalChart.Behaviors.Any(b => b is ChartPanAndZoomBehavior))
                {
                    Chart.Behaviors.Add(panZoomModeBehavior);
                    HorizontalChart.Behaviors.Add(panZoomModeBehavior);
                }
                else
                {
                    Chart.Behaviors[1] = panZoomModeBehavior;
                    HorizontalChart.Behaviors[1] = panZoomModeBehavior;
                }
            }
  2. Deyan
    Admin
    Deyan avatar
    2037 posts

    Posted 29 Oct 2013 Link to this post

    Hi Tinja,

    Thanks for writing and please excuse us for the delay with our answer.

    Based on the code snippets that you are sharing I cannot exactly say what's happening on your side.

    Is it possible for you to directly send me your project reproducing the behavior so that we can see what happens and be able to further assist you?

    You will have to open a new support ticket to be able to attach your project.

    Thanks for your time.

    Regards,
    Deyan
    Telerik
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
  3. DevCraft banner
  4. Tinja
    Tinja avatar
    3 posts
    Member since:
    Apr 2013

    Posted 30 Oct 2013 Link to this post

    Hi!
    I can't send you that project, but I quickly created another project where I try to work on the same thing.
    I'm trying to assing the ChartPanAndZoomBehavior in the code-behind of a user control that is used as a datatemplate for pivot items.
    The value for the behavior's modes come from the report model.
    Where would you like me to send this project?

    Tinja
  5. Deyan
    Admin
    Deyan avatar
    2037 posts

    Posted 01 Nov 2013 Link to this post

    Hi Tinja,

    You just need to open a new support ticket and attach your project there.
    Here on the forums that's not possible.

    Regards,
    Deyan
    Telerik
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
Back to Top
DevCraft banner