I have a React application showing a real time updated chart which works well when receives data from event-based WebSocket. Now I need to modify the app with a new data source. I have an aysnc function to get a batch of data in an interval.
kinesisReadInterval.current = setInterval(async () => {
const recordsResponse = await kinesisRef.current.getRecords({ ShardIterator: shardIterator }).promise();
recordsResponse.Records.forEach(record => {
try {
const dataObj = JSON.parse(record.Data.toString('utf-8'));
spectrumAnalyzerRef.current.metaDataHandler(dataObj);
} catch (jsonError) {
spectrumAnalyzerRef.current.binaryDataHandler(record.Data.buffer);
}
});
shardIterator = recordsResponse.NextShardIterator;
if (!shardIterator || !kinesisConected.current) {
clearInterval(intervalId); // Stop interval if conditions are not met
}
}, 1000);
The recordsResponse.Records contains a batch of records and I want to update the chart based on these records one by one. From my logs, I can see that the binaryDataHandler() which will call appendRange() ran successfully for each record. However, the chart only redraws for the last record of the recordsResponse.Records. I have tried to store the recordsResponse.Records in a state variable and loop to update the chart later, but still got the same result. I am not sure whether it’s chart related issue or React rendering issue. Do you have any idea?
- Quyen Sy asked 2 months ago
- You must login to post comments
OK I’m not familiar with this code, or what it’s doing but I can offer some advice. We may need more information to understand the pronlem
This part feels wrong:
recordsResponse.Records.forEach(record => {
try {
const dataObj = JSON.parse(record.Data.toString('utf-8'));
spectrumAnalyzerRef.current.metaDataHandler(dataObj);
} catch (jsonError) {
spectrumAnalyzerRef.current.binaryDataHandler(record.Data.buffer);
}
});
It looks like you’re using try-catch for control flow which the consensus says is an anti-pattern. Exceptions are slow, have performance problems, and there are better ways to detect whcih path to take in your code.
From a SciChart perspective:
- So long as you are updating dataSeries, the chart will redraw
- Test if you are updating dataSeries using console logging near the places which append data-points
- If you append new data, you will also need to either (i) update visibleRange on xAxis or (ii) use autoRange on xAxis or (iii) call sciChartSurface.zoomExtents() to zoom to fit new data
It’s quite common that people update data but don’t realise that by default, scichart won’t zoom to fit the new data. See the points above for APIs to research to find out how to get the behaviour you expect
- Andrew Burnett-Thompson answered 2 months ago
Hi Andrew, thanks for pointing out the performance problems from my codes. I will enhance that part. I finally modified my codes to store the records in an array. And then update the chart by looping the array later with setTimtout and exponential time. As when I run the forEach to update the chart data, React will do batch updates so that only the last record showing in the chart.
Wonderful, were you able to isolate the reason why the chart was not updating? Do you need any further support or help from me?
- You must login to post comments
Please login first to submit.
