Real Time Data Animation

[Piechnick]

Hey,

I'm currently evaluating the syncfusion chart controls for a project. I want to display real time data with. I was able to get a sample running. However, whenever a new data item is added, the point is drawn directly to the chart. This looks "laggy". Is there any build in mechanism to update the chart more smoothly with an animation (i.e., scroll the chart with an animation). 

Example:

https://camo.githubusercontent.com/5ae941e038e1f6dd4b31a1e2d4ad6999edabb796/68747470733a2f2f6c766368617274732e6e65742f436f6e74656e742f496d616765732f42616e6e65722f726573706f6e736976652e676966

Best regards

Christian Piechnick

[Durgadevi Selvaraj]

Hi Piechnick, 

Thanks for contacting Syncfusion Support. 

Currently, we don’t have an in-built animation support for real time data update. However, we can achieve different type of default animation using CustomTemplate of the chart series as shown in the below code, 

MainWindow.xaml: 

<chart:LineSeries ItemsSource="{Binding Collection}" EnableAnimation="True" 

                                XBindingPath="XValue" YBindingPath="YValue"> 

 

                <chart:LineSeries.CustomTemplate> 

                    <DataTemplate> 

                        <Canvas> 

                            <Line X1="{Binding X1}" StrokeThickness="3" Y1="{Binding Y1}" X2="{Binding X2}"   Y2="{Binding Y2}"   Stroke="{Binding Interior}" Name="Line"> 

                                <Line.Triggers> 

                                    <EventTrigger RoutedEvent="Loaded"> 

                                        <BeginStoryboard> 

                                            <Storyboard> 

                                                <DoubleAnimation Storyboard.TargetProperty="Y1" Storyboard.TargetName="Line"  From="0"  To="{Binding Y1}"  /> 

                                                <DoubleAnimation Storyboard.TargetProperty="Y2" Storyboard.TargetName="Line" From="0" To="{Binding Y2}" /> 

                                            </Storyboard> 

                                        </BeginStoryboard> 

                                    </EventTrigger> 

                                </Line.Triggers> 

                            </Line> 

                        </Canvas> 

                    </DataTemplate> 

                </chart:LineSeries.CustomTemplate> 

            </chart:LineSeries> 

 

We have prepared a sample for your reference and it can be downloaded from the below link, 

Sample:SfChart_Animation
 

Regards, 

Durgadevi S