Hello,
I am using plotly.js for my website to display some heatmaps. Normally, I am using Chrome (version 71.0.3578.98). However, I recently discovered if I am using Firefox (version 64.0 (64-bit)) that some parts of the heatmap are not shown.
If I use an older Firefox version (like 52.9.0 (32-bit)) it still works as I expect.
How it should look like
Chrome (71.0.3578.98) & Firefox (52.9.0 (32-bit)):
Problem
Firefox (64.0):
As you can see the heatmap is not completely loaded.
Moving the mouse over the heatmap:
This results that some parts are loaded. To be more precise the parts over which I moved the cursor (in this example I moved it over the three visible parts).
Code example
Example
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/1.33.1/plotly.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/numeric/1.2.6/numeric.min.js"></script>
<div id="test_heatmap"></div>
<script>
// Create a data set
var result_plane = {
"x":[],
"y":[],
"z":[]
};
var y_axis_max = 0;
var x_axis_max = 1;
var y_axis_min = 10;
var x_axis_min = 100;
/*
* Large array!!!
* If the array is small (for example steps = 3) it still works.
*/
var steps = 1000;
result_plane['x'] = (numeric.linspace(x_axis_min, x_axis_max, steps)); // the x-axis
result_plane['y'] = (numeric.linspace(y_axis_min, y_axis_max, steps)); // the y-axis
// The data for the z-axis
for(i in result_plane['x']){
var array = new Array();
for(k in result_plane['y']){
array[k] = Math.random();
}
result_plane['z'].push(array);
}
data = [
{
x: result_plane['x'],
y: result_plane['y'],
z: result_plane['z'],
type: 'heatmap',
name: 'Heatmap',
zmin: 0,
zmax: 1,
zhoverformat: ".5e", // Show the z-axis as an exponential value
colorscale: [ // To simulate a logarithmic z-axis
['0.0', '#0000FF'],
['0.000000001', '#0000FF'],
['0.00000001', '#55AAAA'],
['0.0000001', '#AAD455'],
['0.000001', '#FFFF00'],
['0.00001', '#FFD400'],
['0.0001', '#FFAA00'],
['0.001', '#FF8000'],
['0.01', '#FF5500'],
['0.1', '#FF2A00'],
['1', '#FF0000']
],
showscale: false,
hoverinfo: "all"
}
];
layout = {
title: '<b>Title</b>',
margin: {
b: 140
},
xaxis: {
title: 'x-Axis',
domain: [0, 0.9],
},
yaxis: {
title: 'y-Axis',
},
};
Plotly.newPlot(
'test_heatmap',
data,
layout
);
</script>
</html>
I tried to create a minimal example but without removing to many parts of the original plot generation.
Note:
If I use for
result_plane[‘x’]
result_plane[‘y’]
result_plane[‘z’]
small arrays with for example 3 entries it works for all browser versions.
Change of the input to small arrays
result_plane['x'] = [1, 2,3]; // the x-axis
result_plane['y'] = [1, 2,3]; // the y-axis
result_plane['z'] = [[10, 12,13],[0.1, 1.2,3],[0, 2,1]]; // the z-axis
Important
After some testing I discovered that if “steps > 58” only then the problem appears (for steps <= 58 not).
I hope the information is sufficient and reproducible.
If you have any questions on this issue don’t hesitate to ask.
Thanks in advance!
Mrax