Chart across multiple Panorama items

[Dele]

I am having some difficulty showing a chart across multiple panoramas so that users can pan horizontally to see the rest of the chart.
What happens right now is when the Orientation of the panorama item is Vertical, data shows up on my chart, however, it gets cut off when it gets to the end of the panorama.

If I make the panorama orientation horizontal, my chart gets cut off altogether.

How can I accomplish expanding my chart horizontally across multiple panorama items.  Here is a code sample of what I have:

<controls:PanoramaItem Header="job trends" Margin="0,-25,0,0">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <StackPanel Orientation="Horizontal">
                        <Button x:Name="btnEmployment"
                                Content="Employed"
                                IsEnabled="False"
                                Click="btnEmployment_Click"/>
                        <Button x:Name="btnYearly"
                                Content="Salary"
                                Margin="5,0,0,0"
                                Click="btnYearly_Click"/>
                        <Button x:Name="btnHourly"
                                Content="Hourly"
                                Margin="5,0,0,0"
                                Click="btnHourly_Click"/>
                    </StackPanel>
                    <TextBlock Text="TOP EMPLOYED OCCUPATIONS IN 2010"
                               Grid.Row="1"
                               x:Name="txtChartHeading"
                               FontSize="16"
                               FontWeight="Bold"
                               Style="{StaticResource PhoneTextNormalStyle}" />
                    <telerikChart:RadCartesianChart x:Name="radChartEmployment"
                                                    Grid.Row="2"
                                                    d:LayoutOverrides="Height"
                                                    Margin="0,0,0,20">

                        <telerikChart:RadCartesianChart.Behaviors>
                            <telerikChart:ChartTooltipBehavior TriggerMode="Tap"
                                                               SnapToClosestPoint="True" />
                        </telerikChart:RadCartesianChart.Behaviors>

                        <telerikChart:RadCartesianChart.Grid>
                            <telerikChart:CartesianChartGrid Style="{StaticResource gridStyleDashed}" MajorLinesVisibility="Y"/>
                        </telerikChart:RadCartesianChart.Grid>

                        <telerikChart:RadCartesianChart.VerticalAxis>
                            <telerikChart:LinearAxis LineStroke="{StaticResource PhoneDisabledBrush}"
                                                     LineThickness="2"
                                                     LabelFormat="#,#"
                                                     LabelInterval="2"/>
                        </telerikChart:RadCartesianChart.VerticalAxis>

                        <telerikChart:RadCartesianChart.HorizontalAxis>
                            <telerikChart:CategoricalAxis LabelFitMode="Rotate"
                                                          ShowLabels="False" />
                        </telerikChart:RadCartesianChart.HorizontalAxis>

                        <telerikChart:BarSeries CategoryBinding="Title"
                                                ValueBinding="TotalEmployment"
                                                ItemsSource="{Binding TopJobEmploymentStats, Mode=TwoWay}">
                            <telerikChart:BarSeries.PointTemplate>
                                <DataTemplate>
                                    <Border Background="{StaticResource Series2Brush}"
                                            BorderBrush="{StaticResource Series2BorderBrush}"
                                            BorderThickness="2"/>
                                </DataTemplate>
                            </telerikChart:BarSeries.PointTemplate>
                        </telerikChart:BarSeries>
                    </telerikChart:RadCartesianChart>
                </Grid>
            </controls:PanoramaItem>

[Georgi]

Hi Dele,

Thank you for contacting us.

Do you mean the orientation of the Page - Landscape vs. Portrait? I am asking because we recently found a bug in our PhoneApplicationFrame related to changes in orientation. The frame has a property OrientationChangedAnimation which by default is set to a RadFadeAnimation instance. The animation will override the RenderTransform property of the frame while the base framework relies on some transformations to handle the orientation change (this is new in Mango). You can easily workaround this bug by simply setting the OrientationChangedAnimation property to null.

Let me know whether this fixes the issue. If the problem still exists I would kindly ask you to prepare a simple project that demonstrates the wrong behavior so that I may debug it locally and isolate the cause.

Best wishes,
Georgi
the Telerik team

[Dele]

Hello Georgi,

Actually, i'm referring to the orientation of the panorama item itself, not the whole page.  The panorama item has an Orientation property you can set to Horizontal or Vertical.  When I set it to horizontal and increase the width of the panorama item, I would expect it the chart to take up as much space as needed.

I'm trying to get the kind of experience where the user can pan my panorama control and view more of the chart as they pan horizontally.

[Victor]

Hello Dele,

 Thank you for the question.
In order to create a chart like this, you have to create as many panorama items you need in order accommodate the desired size of the chart. When you have those, all of them must be empty except the first one, which will contain the chart. Now you have to make the chart in the first panorama item to extend over the other empty items. This can easily be done by setting a negative right margin. For example if you need the chart to occupy three panorama items you set the right margin to be -(3 * 480) and then update that margin accordingly as your orientation changes.

Please write again if you have other questions.

Regards,
Victor
the Telerik team