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

How to create a real-time chart using SplineAreaSeries and updating item source at runtime?

Hi There - I am creating an application which needs live data to be plotted on chart so that user can visualize the changes happening on our hardware device. I decided to use Syncfusion with SplineAreaSeries display type. I am able to show static data with no issues. But when I get new data from my websocket I don't find any way to update Item Source of SplineAreaSeries. I tried to work around by removing SplineAreaSeries and then adding it again with new Item source. This worked but after few attempts app crashes, I am not sure why but I am assuming that this is not the correct way.

I have googled regarding this and have not got any solution. Please share if there is any sample that I can refer to achieve a real time chart the most efficient way. Any help will be highly appreciated.

Thanks
-DS

7 Replies

SP Saravana Pandian Murugan Syncfusion Team May 4, 2016 07:17 AM UTC

Hi Deepinder,

We have prepared sample based on your requirement which can be downloaded from the following location.

Sample: http://www.syncfusion.com/downloads/support/forum/123967/ze/LiveSplineAreaSample1042151129  

Thanks,
Saravana Pandian M.
 



DS Deepinder Singh May 4, 2016 07:09 PM UTC

Thanks Saravana, sample helped me to resolve the issue.

Appreciate your help on this.

-DS


SP Saravana Pandian Murugan Syncfusion Team May 5, 2016 05:05 AM UTC

Hi Deepinder,

We are glad to know that the given solution works. Please contact us if you need any further assistance.

Regards,
Saravana Pandian M.



QI Qian replied to Saravana Pandian Murugan July 3, 2016 03:26 PM UTC

Hi Deepinder,

We are glad to know that the given solution works. Please contact us if you need any further assistance.

Regards,
Saravana Pandian M.


Hi Saravana,
I have the same question. Your solution is good. But If I want to have a pause of the live data, is it possible to see all the history of our Data by a scroll gesture?

Thanks.

Qian Y.




PS Parthiban Sundaram Syncfusion Team July 4, 2016 12:55 PM UTC

 Hi Deepinder,

We have prepared a sample based on your requirement using AutoScrollingDelta. Now, you can hold the live update by touching and by scrolling another finger to view the remaining data points. Please download the sample from the following location.

Sample: http://www.syncfusion.com/downloads/support/forum/123967/ze/Sample1661054155 

Thanks,
Parthiban S.  



QI Qian July 4, 2016 02:52 PM UTC

Hi Saravana,

Thanks for your solution. It works well. 
I have another question, if I want to display the live data always from Left to Right. It means that when the data fills the screen the first time,  the live data restarts from the left side of the screen, until it fills the screen the second time, then it repeat the same action: starts with left side of the screen, ends with the right side of  the screen ...
When I have a pause, I can see all history by a scroll gesture.

I changed the Max and Min value of the Axis X for this moment to resolve this problem, but I don't think it's a good solution.
Do you have any other ideas about it?

Thanks.

Qian Y.



YP Yuvaraj Palanisamy Syncfusion Team July 7, 2016 07:25 PM UTC

Hi Qian, 

We have prepared a sample for your requirement using actual range changed event. Please find the attached sample from the below location. 

  
Thanks, 
Yuvaraj 


Loader.
Live Chat Icon For mobile
Up arrow icon