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.
Kindly check the above sample and revert us with your datasource, if this sample does not satisfy your requirement.
MSMuhammad SafwatAugust 27, 2019 02:16 PM
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.
KCKalaimathi Chellaiah Syncfusion Team August 28, 2019 10:19 AM
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.
MSMuhammad SafwatAugust 29, 2019 08:30 AM
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.
MSMuhammad SafwatAugust 29, 2019 11:00 AM
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,
KCKalaimathi Chellaiah Syncfusion Team September 1, 2019 02:13 AM
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.
KCKalaimathi Chellaiah Syncfusion Team September 5, 2019 09:14 PM
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,