Hello,
I started using plot.ly in javascript for a 3D surface graph and it works fine. But I have a problem exporting it to png using the button of the ploty.ly toolbar. A popup is displayed with the message “Sorry! There was a problem downloading your snapshot”. I tested it in Chrome and Edge but always this error. I tested for a 3D scatter and no problem. So I guess is something about my data or my code for this 3D surface, but I can’t figure out.
Here is the web page that reports this error. And the data I use (the Test3DData.js file) can be downloaded here
Any help will be welcome! Thanks.
<!DOCTYPE html>
<head>
<style>
div.content
{
font-size:11pt;
font-family:Calibri;
}
</style>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<script src="Test3DData.js"></script>
<!-- Plotly chart will be drawn inside this DIV -->
<div id="graphDiv" style="margin-top: 0; z-index:1" >
</div>
<script>
dataset = [];
selectedColorScale = getColorScaleLayer();
layer = surfacedata;
for (i = 0; i < layer.surfaceData.length; i++) {
if (layer.surfaceColor[i].length == 0) {
layer.surfaceData[i] = new Array(layer.size);
}
}
dataset.push({
showlegend: false,
showscale: false,
hoverinfo: "z",
z: layer.surfaceData,
type: 'surface',
surfacecolor: layer.surfaceColor,
cmin: layer.minColor, cmax: layer.maxColor,
colorscale: selectedColorScale
});
var layout = {
width: 1000,
height: 600,
paper_bgcolor: 'rgba(0,0,0,0)',
plot_bgcolor: 'rgba(0,0,0,0)',
margin: {
l: 10,
r: 10,
b: 10,
t: 0
},
scene: {
camera: {
eye: { z: 1.5, x: 2 }
},
xaxis:{showticklabels:false , title:"y"},
yaxis: { showticklabels: false, title: "x"},
},
displayModeBar: true
};
Plotly.newPlot("graphDiv", dataset, layout);
function getColorScaleLayer() {
return[ [0, 'rgb(20,10,245)'],
[0.1, 'rgb(45,107,230)'],
[0.2, 'rgb(45,231,216)'],
[0.3, 'rgb(45,231,216)'],
[0.4, 'rgb(0,255,0)'],
[0.7, 'rgb(255, 255 ,0)'],
[0.8, 'rgb(245, 187 ,15)'],
[1, 'rgb(255,0,0)']];
}
</script>
</body>
</html>