Hi,
I’m trying to display violin plot for incoming live data but I’m running into performance issue. I’m using a client_side callback and the extendData property to update my violin plot but it seems that after a few seconds the plot start to completely hang and be unresponsive.
Ideally I would like to update 6 Violin plot containing each 2000 data point at a refresh rate of 10Hz minimum. Is this possible or I’ll never be able to achieve this kind of performance ? For the moment when looking at the performance insight given in google chrome, it seems that the bottleneck come from a “Run Task” and more precisely from :
(plotly.min.js:7)
getTotalLength
I’ve attached a screenshot at the bottom for more details.
Here is my client_side callback, don’t worry too much about where is coming my data in window.SENSORS_DATA (I’ve a client side script that handle an MQTT server for the data reception)
window.dash_clientside = Object.assign({}, window.dash_clientside, {
clientside: {
graph_updater: function(n_interval, store_state) {
//Load the new data, it's a bit convoluted but it allow me to specify the path to my data from within python
new_data = []
trace_index = []
store_state["sensors_path"].forEach((sensor_path, i) => {
if(!(sensor_path in window.LATEST_INDEX_GRAPHED))
window.LATEST_INDEX_GRAPHED[sensor_path] = {};
data_key = store_state["data_keys"][i];
if(sensor_path in window.SENSORS_DATA && data_key in window.SENSORS_DATA[sensor_path]){
if(!(data_key in window.LATEST_INDEX_GRAPHED[sensor_path]))
window.LATEST_INDEX_GRAPHED[sensor_path][data_key] = 0;
last_plotted_index = window.LATEST_INDEX_GRAPHED[sensor_path][data_key];
if(last_plotted_index < window.SENSORS_DATA[sensor_path][data_key].length){
ny = window.SENSORS_DATA[sensor_path][data_key].slice(window.LATEST_INDEX_GRAPHED[sensor_path]);
window.LATEST_INDEX_GRAPHED[sensor_path][data_key] = last_plotted_index + ny.length;
new_data.push(ny);
trace_index.push(i);
}
}
});
//There isn't new data to display
if(new_data.length < 1){
return window.dash_clientside.no_update;
}
//Need to return a tuple (dict(graph data to extend), [trace_index], number of data point to keep)
return [{x: new_data}, trace_index, 2000];
}
}
});
