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

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 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 Code is as follow

		font: 10px sans-serif;
		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;
<div id="canvas"></div>
	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);
	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])