Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why am I getting an Uncaught ReferenceError: Plotly is not defined

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.

like image 327
Retro Gamer Avatar asked Aug 24 '17 18:08

Retro Gamer


1 Answers

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.

like image 194
Or Assayag Avatar answered Oct 16 '22 18:10

Or Assayag