How to fix this following code which is making line chart(time series graph) on real-time from Socket.io server

plotly.js
1

Please help me, good people, to fix the bellow code, I am getting data which is JSON Object from time to time, in Real-time from Socket.io server. Then when I plot it takes time(VERY SLOW) to re-draw the graph.

This following Image shows how is my JSON Object.

my_data
my_data582×630 29.2 KB

My Code is as follow

<style>
        svg 
       {
		font: 10px sans-serif;
	}
	.area 
        {
		fill: steelblue;
		clip-path: url(#clip);
         }
	.axis path, .axis line 
        {
               fill: none;
	       stroke: #000;
	       shape-rendering: crispEdges;
	}
	.brush .extent 
        {
	        stroke: #fff;
	        fill-opacity: .125;
		shape-rendering: crispEdges;
	}
    </style>
<div id="canvas"></div>
<script>
	var socket = io(); //client object to connect to socketio
        var time = new Date();
	var dataGraph = 
        [{
		x: [time],
		y: [0],
		mode: 'lines',
		line: {color: '#80CAF6'}
	}]
        Plotly.newPlot('graph', dataGraph);
        //GETTING DATA TO UPDATE THE GRAPH
	socket.on('ecgData', function(data)
	{
                 for(var i = 0; i < data.length; i++)
		    {
				var update = 
				{
					  x:  [[data[i].timestamp]],
					  y: [[data[i].ecg]]
				}
				Plotly.extendTraces('graph', update, [0])	
			}
        });
</script>