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
