animate dynamic series - seriesprovider

[Ryan]

How do I go about animating multiple series using utils:ChartAnimationUtilities.CartesianAnimation="Rise"? Below is my code, I have tried multiple ways and none work. Thanks.

 

 

<telerik:ChartSeriesProvider  Source="{Binding Data, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:ParameterTraceControl}}}">             
                    <telerik:ChartSeriesProvider.SeriesDescriptors>
                        
                        <telerik:CategoricalSeriesDescriptor CategoryPath="ReadTime" 
                                                        ValuePath="Value" 
                                                        ItemsSourcePath="Items">
                            
                            <telerik:CategoricalSeriesDescriptor.Style>
                                <Style TargetType="telerik:LineSeries" BasedOn="{StaticResource LineSeriesStyle}">
                                    <Setter Property="StrokeThickness" Value="{Binding SelectedStrokeThickness, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type View:MainWindow}}}" />
                                    <Setter Property="LegendSettings">
                                        <Setter.Value>
                                            <telerik:SeriesLegendSettings Title="{Binding SeriesName}" />
                                        </Setter.Value>
                                    </Setter>
                                  
                                </Style>
                            </telerik:CategoricalSeriesDescriptor.Style>
                            
                        </telerik:CategoricalSeriesDescriptor>
                        
                    </telerik:ChartSeriesProvider.SeriesDescriptors>
                    
                </telerik:ChartSeriesProvider>

[Dinko | Tech Support Engineer]

Hello Ryan,

Thank you for the provided code snippet.

Have you tried setting the custom attached property in the Style? The following code snippet demonstrates what I have in mind.

<telerik:ChartSeriesProvider  Source="{Binding Data, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:ParameterTraceControl}}}">
    <telerik:ChartSeriesProvider.SeriesDescriptors>

        <telerik:CategoricalSeriesDescriptor CategoryPath="ReadTime" 
                                        ValuePath="Value" 
                                        ItemsSourcePath="Items">

            <telerik:CategoricalSeriesDescriptor.Style>
                <Style TargetType="telerik:LineSeries" BasedOn="{StaticResource LineSeriesStyle}">
                    <Setter Property="StrokeThickness" Value="{Binding SelectedStrokeThickness, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type View:MainWindow}}}" />
                    <Setter Property="utils:ChartAnimationUtilities.CartesianAnimation" Value="Rise"/>
                    <Setter Property="LegendSettings">
                        <Setter.Value>
                            <telerik:SeriesLegendSettings Title="{Binding SeriesName}" />
                        </Setter.Value>
                    </Setter>
                </Style>
            </telerik:CategoricalSeriesDescriptor.Style>
        </telerik:CategoricalSeriesDescriptor>
    </telerik:ChartSeriesProvider.SeriesDescriptors>
</telerik:ChartSeriesProvider>

As a side note, the RadChartView provides animations for its series out of the box. You can check the Animations help article so you can get familiar with them. To enable the default animation, you can use the same approach mentioned above.

. . . . . .
<Style TargetType="telerik:LineSeries" BasedOn="{StaticResource LineSeriesStyle}">
    <Setter Property="StrokeThickness" Value="{Binding SelectedStrokeThickness, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type View:MainWindow}}}" />
    <Setter Property="SeriesAnimation">
        <Setter.Value>
            <telerik:ChartRevealAnimation AnimationDirection="In" Orientation="Horizontal" >
                <telerik:ChartRevealAnimation.Easing>
                    <QuarticEase EasingMode="EaseOut"/>
                </telerik:ChartRevealAnimation.Easing>
            </telerik:ChartRevealAnimation>
        </Setter.Value>
    </Setter>
    <Setter Property="LegendSettings">
        <Setter.Value>
            <telerik:SeriesLegendSettings Title="{Binding SeriesName}" />
        </Setter.Value>
    </Setter>
</Style>
 . . . . 

Regards,
Dinko
Progress Telerik