# Plotly Violin performance for live update

**URL:** <https://community.plotly.com/t/plotly-violin-performance-for-live-update/89008>\
**Category:** 📊 Plotly Python\
**Created:** [November 27, 2024, 11:36am UTC](https://community.plotly.com/t/plotly-violin-performance-for-live-update/89008 "2024-11-27T11:36:05Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Eledwin](https://avatars.discourse-cdn.com/v4/letter/e/45deac/32.png) [@Eledwin](https://community.plotly.com/u/Eledwin)\
**Post date:** [November 27, 2024, 11:36am UTC](https://community.plotly.com/t/plotly-violin-performance-for-live-update/89008/1 "2024-11-27T11:36:05Z")

</div>

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)

```javascript
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];
        }
    }
});

```

 ![Capture d’écran 2024-11-27 123422](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/b/4/b4385e7d65581e38c33f4cd78f0503af563a4453.png)