Hello, I’m very new to Plotly and fairly new to JavaScript in general. (I mostly code in C.) I only recently discovered Plotly but I really like it so far!
I downloaded the JS file onto my work computer and stated playing with it there. I haven’t had any problems. I did the same thing on my home computer and I’m having some issues.
I’m starting with SPC charts. When I hover over a chart, I don’t get the cross-hair icon and it doesn’t show me any data from the plotted points. Instead, the graph grays-out a bit, and the menu that’s usually at the top is broken up strangely. The camera icon is in the upper-left, and the remaining icons seem to be in these “clone divs” below the original graph.
Here’s how it looks when it’s not hovered over:
Here’s what I get when I move the mouse over it:
Here’s the HTML. (The JS code was copied directly from one of the “line charts” examples from the Plotly Basics, except I think that I changed the ‘id’ to “spc” instead of “myDiv”.)
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>First Plotly!</TITLE>
<META charset="UTF-8">
<STYLE>
DIV {
width: 640px;
height: 480px;
}
BODY{
background-color: rgb(100,100,100);
color: rgb(0,20,20);
}
</STYLE>
</HEAD>
<BODY>
<H2>Chart!</H2>
<DIV id="spc"></DIV>
<SCRIPT src="plotly-latest.min.js"></SCRIPT>
<SCRIPT>
var trace1 = {
x: [1, 2, 3, 4],
y: [10, 15, 13, 17],
mode: 'markers',
marker: {
color: 'rgb(219, 64, 82)',
size: 12
}
};
var trace2 = {
x: [2, 3, 4, 5],
y: [16, 5, 11, 9],
mode: 'lines',
line: {
color: 'rgb(55, 128, 191)',
width: 3
}
};
var trace3 = {
x: [1, 2, 3, 4],
y: [12, 9, 15, 12],
mode: 'lines+markers',
marker: {
color: 'rgb(128, 0, 128)',
size: 8
},
line: {
color: 'rgb(128, 0, 128)',
width: 1
}
};
var data = [trace1, trace2, trace3];
var layout = {
title: 'Line and Scatter Styling'
};
Plotly.newPlot('spc', data, layout);
</SCRIPT>
</BODY>
</HTML>
It’s especially odd because both my work computer and home computer are running Windows 10 and Firefox. And when I go to the codepen.io examples, it works. I get the cross-hair icon, and the menu is in the upper-right.
Any idea what’s going wrong? TIA!