Chart Render while Collapsed

[AP]

I have a business intelligence application, with a page that has to flip between two data bound rad charts.

The user can change the data the charts show, via combo boxes on the page.

Both rad charts are defined in XAML, and bound to observable collections. Individually, both charts work fine, and re-animate when a combo box selection is changed.

My issue is that I can't find a smooth transition between the two charts.
 
The solution I have tried, is to put both charts in one stack panel, set one charts visibility to collapsed, and then on a button, initate a story board to rotate the panel, whilst alternating the two charts visibility settings..

The story boards:-

<Storyboard x:Name="spFlip">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="chartStack">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.85"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="chartStack">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.85"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="chartStack">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="-90"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Name="spFlipBack">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="chartStack">
                <EasingDoubleKeyFrame KeyTime="0" Value="0.85"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="chartStack">
                <EasingDoubleKeyFrame KeyTime="0" Value="0.85"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="chartStack">
                <EasingDoubleKeyFrame KeyTime="0" Value="90"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>

The code:-

void spFlip_Completed(object sender, EventArgs e)
       {
           if (Chart1.Visibility == Visibility.Collapsed)
           {
               Chart2.Visibility = Visibility.Collapsed;
               Chart1.Visibility = Visibility.Visible;
           }
           else
           {
               Chart2.Visibility = Visibility.Visible;
               Chart1.Visibility = Visibility.Collapsed;
           }
           spFlipBack.Begin();
       }

This works, however, the first time the code executes (when the second chart is set to visible for the first time), there is a noticable pause while the chart is rendered for the first time. This causes a stutterin the visual effect.  Flipping the charts a second time results in a smooth animation, as the charts have both been rendered.

Once a new combo box selection has been made, the problem returns.

Is there a way to force the RadChart to render, even though it's visibility is set to collapsed, to ensure a smooth transition? Or possibly an alternative way of achieving a nice visual transition between charts. I did consider the RadTransition control, but don't really want to have to create the charts in code, as defining them in XAML and data binding works well, apart from this issue.

Any ideas would be appreciated.

Thanks

[Sia]

Hello AP,

I can suggest you to try two things in your scenario:

1. Not to collapse the "hidden" chart, but to hide it out with a big margin and when you want to play with the visibility of the two chart to change their margin / but put them in a grid, not in a stack panel/
2. What are your concerns about using Transition with RadChart defined in xaml? We have implemented it in the RadChart template in order to have smooth transitions when zooming. You can review the visual appearance in this example.

Please try one of these and let me know how it goes.

Greetings,
Sia
the Telerik team

[AP]

Thanks for the reply.

Moving it out with a margin might work - it just seems a hack but I'll give it a go.

I don't have an issue with the chart transition animation. (I didn't know about this property) , I was talking about the RadTransition control - there doesn't seem to be a way to define the contenst of this is XAML, and then move between items. It all has to be done in code. Can this be defined in XAML (along with the contents)?

Although the controls are great, I have to say the documentation is a bit lacking, at the very least, it would be very helpful to link from the controls help to the correct API reference - and then to have some examples there.

AP

[AP]

I've now got it working. I've moved the charts into a grid, stacking one on top of the other. I set the Z order of the 1st chart at 10, and the other at 0.

Then when I call the animation, I just switch Z orders, instead of visibility.

void GridFlip_Completed(object sender, EventArgs e)
        {
            if (actChartShowing)
            {
                ActVPlanChart.SetValue(Canvas.ZIndexProperty, 0);
                IncomeVPlanChart.SetValue(Canvas.ZIndexProperty, 10);
                actChartShowing = false;
                Flipbtn.Content = "Show Income";
            }
            else
            {
                ActVPlanChart.SetValue(Canvas.ZIndexProperty, 10);
                IncomeVPlanChart.SetValue(Canvas.ZIndexProperty, 0);
                actChartShowing = true;
                Flipbtn.Content = "Show Activity";
            }

            GridFlipBack.Begin();
        }

I just set a bool to keep track of which chart is showing, and then the flip animation works fine.

[Sia]

Hello AP,

I confess that setting ZIndex sounds better as solution :) Please excuse me for missing this.

Saying Transition I meant "RadTransition control".

There are two possible solutions:

1. The first one is described in this blog post. But instead of putting two images you can put two RadCharts defined declaratively. Please review the attached code.
2. Another possible solution is to have two user controls with two RadCharts (again defined in XAML) and in code behind to change the TransitionControl's content on Button click. In that way you won't need to have custom ControlTemplate for the TabControl.

I hope this helps.

All the best,
Sia
the Telerik team