I am getting an Uncaught ReferenceError: Plotly is not defined
error when my page loads. The following code is beneath my div element where the plot is rendered, but on the line Plotly.newPlot('myDiv', dataPlot, layout);
within the socket.on
listener is where this error is being thrown.
var dataPlot = [{
x: ['a', 'b', 'c', 'd'],
y: [0, 0, 0, 0],
type: 'bar'
}];
var layout = {
autosize: false,
width: 500,
height: 500,
margin: {
l: 50,
r: 50,
b: 100,
t: 100,
pad: 4
}
};
// Listener, whenever the server emits 'updatechat', this updates the chat body
socket.on('updatechat', function (username, data) {
$('#conversation').append('<b>'+username + ':</b> ' + data + '<br>');
if (data ==='a'){
dataPlot[0]['y'][0]++;
} else if (data === 'b'){
dataPlot[0]['y'][1]++;
} else if (data === 'c'){
dataPlot[0]['y'][2]++;
} else if (data === 'd'){
dataPlot[0]['y'][3]++;
}
Plotly.newPlot('myDiv', dataPlot, layout);
});
$("#clearplot").click(function() {
var dataPlot = [{
x: ['a', 'b', 'c', 'd'],
y: [0, 0, 0, 0],
type: 'bar'
}]
Plotly.newPlot('myDiv', dataPlot, layout);
});
I have included <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
in the head of my HTML5 document, and the Plotly.newPlot('myDiv', dataPlot, layout);
within my clearplot
function is working just fine. Why is there an error only in the updatechat
listener?
EDIT
I figured out the issue. The issue was that this code is embedded in an Angular app, so I just had to include the <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
within the head of the template HTML file, not the local HTML file.
Looks like you forgot to include Plotly
script reference to your code.
Try to add:<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
In the <head>
section of your HTML page.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With