This is a migrated thread and some comments may be shown as answers.

animate dynamic series - seriesprovider

1 Answer 140 Views
ChartView
This is a migrated thread and some comments may be shown as answers.
Ryan
Top achievements
Rank 1
Ryan asked on 31 Jul 2020, 09:04 PM

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>

1 Answer, 1 is accepted

Sort by
0
Dinko | Tech Support Engineer
Telerik team
answered on 05 Aug 2020, 09:55 AM

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

Tags
ChartView
Asked by
Ryan
Top achievements
Rank 1
Answers by
Dinko | Tech Support Engineer
Telerik team
Share this question
or