We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Real Time Data Animation

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

1 Reply

DS Durgadevi Selvaraj Syncfusion Team September 19, 2017 01:58 PM UTC

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, 
Regards, 
Durgadevi S 
 
 
 


Loader.
Up arrow icon