Browser slows down

1

When I make a service call to backend I use to get the response within milliseconds, but while rendering the graph the browser gets slows down(hangs - currently making two service calls in page onload to load two bar charts). I’ve also noted that plotly.js file is too large when I try to open. I guess the problem is with the JS file because of content in that.

Also can any one please let me know the difference between basic-plotly.js and plotly.js

2

Could you be more specific?

You mean: when you display a graph like this one: Median Ages For Females With the 25 Most Common NamesAmong Americans Estimated to be alive as of Jan. 1, 2014 | scatter chart made by Etpinard | plotly

You mean: when you use plotly.js to render a graph? In this case, could you share a reproducible example?

Yes, the minified plotly.js file we serve up on our CDN is tricky to open to open in most text editor. I’d recommend looking up the un-minified version here if you need to.

I shouldn’t. https://plot.ly uses the same JS file to render graphs.

3

Thanks for your response,

Here is the situation ,

Step1: I made a service call from web application to backend services .
Step2: I’ve got the response from backend which is shown in log file of my back end services.
Step3: Even though I got response from backend, my plotly is still loading the request in order to render the graph.
Step4: If click on the browser the browser gets hanged.

4

I’m having problems understand your issue.

Can you share a code of how your feeding your response to plotly.js ?

5

Thanks Etienne,

Here is the screen shot

screen.png1600×860 60.8 KB

Here is the code

var myPlot = document.getElementById(‘pieChtParent’),
d3 = Plotly.d3,
N = 16,
x = d3.range(N),
y = d3.range(N).map( d3.random.normal() ),
data = response,
layout = {
title:“Cost Information”,
//showlegend:false,
width:600,
height:500,
xaxis: {
title: “Microtask”,
showgrid: true,
showline: true,
zeroline: true,
tickangle: -15
},
yaxis: {
title: “$ Cost”,
showline: true,
showgrid: true,
zeroline: true
},
barmode: ‘group’};

    	Plotly.newPlot('pieChtParent0', data, layout,{displayModeBar: false});

In the above code “data/response” is nothing but the response which I will get from backend.

6

Nothing looks suspicious in your code.

How are you inserting plotly.js into your page? Via our CDN link https://cdn.plot.ly/plotly-latest.min.js? Via a local copy? Something else?

7

I’ve inserted plotly.js through local