Plotting taking very long and browser not responding for a certain time

plotly.js
1

Dear Forum members,
I am currently using Plotly.js. I am making a dashboard for which I have hugely relied on Plotly.js capabilities. I am getting data from S3 Buckets from csv files. the files are ranging between 200 kb to 10 mbs. Now my question is that when I am trying to draw a file that is around 4.9 mb data (timestamp, value) pair it is taking a massive amount of time. I did some profiling and managed to find that It may be the function named processData (allRows) where it gets the data from the csv file and make x and y arrays out of it. Could somebody let me know why is this happening? At the moment 4.9 mb file with around 182841 (timestamps and values) are in the file. How can I make it scalable? Are tips would be highly appreciated? BTW I am using cdn direct link as well to Plotly.js.
Many thanks in advance.
Saad

2

I don’t think function is part of plotly.js. Can you share a sreenshot of the your profile tab?

3

I am using this very simple code… Could you please help me with it etienne… Many thanks… I couldn’t copy the whole due but I am sure you get the feel from it… just fix it by putting < in first few lines… Looking forward to your kind response.

script src=“http://code.jquery.com/jquery-1.11.3.min.js”>
script src=“https://sdk.amazonaws.com/js/aws-sdk-2.0.0-rc4.min.js”>
script type=“text/javascript” src=“https://cdn.plot.ly/plotly-1.5.0.min.js”>
div id=“myDiv” style=“width: 1000px; height: 500px; margin:auto; float: right; border:2px solid black;”>

/head>

script type=“text/javascript”>

var rows=[];
Plotly.d3.csv(‘https://phm-platform.s3-eu-west-1.amazonaws.com/depuy/ahu/ahu-stage1/D0040909.csv’, function(data){
rows=data;
processData(rows) } );

function processData(rows) {

var x = [], y = [];
var len= rows.length;
for (var i=0; i<len; i++) {
    
	var row = rows[i];
	
	x.push( row['Timestamp'] );
	
    y.push(row[" Value"]);

}

makePlotly( x, y);

}

function makePlotly( x, y ){
var plotDiv = document.getElementById(“plot”);
var traces = [{
x: x,
y: y
}];

<!-- DataPointid is the first column value being set when the row is clicked by the user and it contains the datapoint (e.g., D0010107) appended with Context -->
Plotly.newPlot('myDiv', traces);

};

4

That’s a lot of data to process at once.

I suggest splitting it into chunks and then calling processData in once every 1000ms using a setTimeout.

5

Do you mean to split the csv file? or the data that I get

7

Dear etienne,
Thanks for reply. I have managed to findout that the function Plotly.newPlot() is acting extremely slow where as the 182840 entries are calculated quite fast whereas when the function Plotly.newPlot is called with traces the browser hangs and comes back after many minutes… are there any other faster functions available in plotly… the performance at least in my browser is very poor…

1 Like