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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Plotting multiple real time charts in webpage

Thread ID:

Created:

Updated:

Platform:

Replies:

146852 Aug 22,2019 04:08 PM UTC Sep 6,2019 02:14 AM UTC jQuery 9
loading
Tags: ejChart
Muhammad Safwat
Asked On August 22, 2019 04:08 PM UTC

Hi,

I'm trying to create a web application which takes in data from a server and plots that data in 3 different charts in real time. To explain this in more detail, I'll explain the process in steps.
- The data coming from the server is in the form of arrays. We've four different arrays, namely, pressure, volume, flow and time. These arrays have fixed sizes for most of transmission, but sometimes can be different due to network latencies.
- Once the arrays are received, they have to be plotted in 3 different charts as pressure vs time, volume vs time and flow vs time. Right now, they are received in a JS script and a function call is made by passing these 4 arrays to that function. >> plotData(volume, pressure, flow, time)
- There are some requirements about the charting functions:
     1. The chart should plot all the data equivalent to 20 seconds in one run. the time array we get gives data in seconds, which precision up to the 5th decimal point.
     2.  Once it reaches 20 seconds, it should loop back to the start of the chart and start plotting again.
     3. A vertical black line acting like a cursor shows the user where the data is plotting in real time. So, at any given time, the part of graph on the left side of the vertical line displays the current real-time data and the part of graph on the right side displays the data from the previous run. 

The current charting tool I'm using does the job, but I feel it's pretty slow at times and the movement of the black vertical line seems discrete instead of a continuous smooth movement. A possible reason is because I'm fitting the entire array I receive (size 32) somewhere into an array that is being plotted (size 15000), moving the black cursor to the end of the array and repeating this process when I receive new data.

Any suggestions to improve this using Syncfusion's charting capabilities is appreciated. I've also attached an image of my current solution.

Thanks.

Attachment: 3_charts_5059ab6.7z

Kalaimathi Chellaiah [Syncfusion]
Replied On August 26, 2019 10:22 AM UTC

Hi Muhammad, 
 
Greetings from Syncfusion. 
 
We are working to create real time chart sample based on your requirements and we will update the status on or before 6.30 PM(August 26th , 2019) IST. We appreciate your patience until then. 
 
Regards, 
Kalai. 


Muhammad Safwat
Replied On August 26, 2019 06:22 PM UTC

Hi Kalaimathi,

Thank you for the response. I'm still waiting for an update.

Regards,
Muhammad


Kalaimathi Chellaiah [Syncfusion]
Replied On August 27, 2019 04:27 PM UTC

Hi Muhammad, 
 
Sorry for the inconvenience caused.  
 
We have analyzed your query. We have prepared a sample based on your scenario. Please find below, 
 
 
Kindly check the above sample and revert us with your datasource, if this sample does not satisfy your requirement. 
 
Regards, 
Kalai. 


Muhammad Safwat
Replied On August 27, 2019 07:16 PM UTC

Hi Kalai,

Thank you for the update. The chart looks great. It has most of the features that I wanted it to have. I just had a few queries:
- The speed of the chart is very slow when I set it to have more points. For example, when I set it to 15000 data points, I can hardly see the vertical line moving. I would like the speed of the data update and vertical line when I have 15000 data points to be as fast as when your code updates for 100 data points. 
- I want to know why you had turned enableCanvasRendering to False. I thought the Syncfusion documentation said to have it as True for high frequency updates.
- The vertical line is hard-coded to be between -5 to 150. In my application, the data sets can occur with varying amplitudes for every cycle. I would like to have the vertical line to be drawn dynamically from the minimum value of the current data cycle to the maximum of the current data cycle. 
- Lastly, like I already mentioned, the dataset can have varying range of amplitudes for each cycle. So, if the y-axis can get auto scaled to adjust the ranges according to the maximum and minimum of the current data cycle, that would be helpful.

Again, I thank you for the support and appreciate your help.

Regards,
Muhammad

Kalaimathi Chellaiah [Syncfusion]
Replied On August 28, 2019 03:19 PM UTC

Hi Muhammad, 
 
Thanks for the update. 
 
We are trying to increase the vertical line speed when we provide large amount of data. So we will update the status within two business days(August 30, 2019). We appreciate your patience until then. Meanwhile, kindly share your datasource file which will be more helpful for further analysis. 
 
Let me know if you have any queries. 
 
Regards, 
Kalai. 


Muhammad Safwat
Replied On August 29, 2019 01:30 PM UTC

Hi Kalai,

Thanks for the update. I'm currently using a local server to generate the real time data, so it's hard to provide you a real time data source. With that said, I can write that data to a file and provide you with that.

Thanks,
Muhammad 


Muhammad Safwat
Replied On August 29, 2019 04:00 PM UTC

Hi Kalai,

I've attached a file which contains the data we use to plot it. It is tab delimited with 11 columns in total, but you can ignore the tracheal pressure column.
1. Chart 1 has xaxis: Time, yaxis: TotalVolume, Chamber1 Volume, Chamber2 Volume
2. Chart 2 has xaxis: Time, yaxis: MusclePressure, AirwayPressure, Chamber1Pressure, Chamber2Pressure
3. Chart 3 has xaxis: Time, yaxis: Flow

I expect the charts to display 20 seconds of data at any time. The sliding vertical line should show where the real time data is currently being plotted. The data can be down-sampled in case there are too many points. 

Please let me know if you need any more information and thanks for your assistance,
Muhammad 


Attachment: dataOut_7f96548f.zip

Kalaimathi Chellaiah [Syncfusion]
Replied On September 1, 2019 07:13 AM UTC

Hi Muhammad, 
 
Thanks for the update. 
 
We are working to improve speed of vertical line with your dataSource and we will update the sample within two business days(September 3rd , 2019). We appreciate your patience until then. 
 
Let me know if you have any concerns. 
 
Regards, 
Kalai. 


Kalaimathi Chellaiah [Syncfusion]
Replied On September 6, 2019 02:14 AM UTC

Hi Muhammad, 
 
Thanks for being patience. 
 
We have tried to use your data, but we can’t access due to that is in text format and large volume. So we have tested with 15 thousand random data. Please check the below sample and revert us, still that is not satisfy your requirement. And we will proceed further based on your suggestion. Please find below, 
 
 
Let me know, if you have any concerns. 
 
Regards, 
Kalai. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon