animate dynamic series - seriesprovider

2 posts, 0 answers
  1. Ryan
    Ryan avatar
    2 posts
    Member since:
    Nov 2015

    Posted 31 Jul Link to this post

    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>

  2. Dinko
    Admin
    Dinko avatar
    1144 posts

    Posted 05 Aug Link to this post

    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

Back to Top