plotly js Uncaught TypeError: myPlot.on is not a function

I’m a newbie trying to learn. I have modified the plot code at plotly hover events The goal is to obtain hover events so that later I can show an image in a modal.

My CSV does read in, and the plot does show in the browser. I get an error message: “Uncaught TypeError: myPlot.on is not a function” (in Firefox and Chrome debuggers). Other posts on this issue indicate that I must be running the correct version of “https://cdn.plot.ly/plotly-latest.min.js”. I have tried everything I can think of even making it linear code without multiple function calls. Help! Thanks…

<!DOCTYPE html>
<html lang="en" >
<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<div id="myDiv"></div>
<div id="hoverinfo" style="margin-left:80px;"></div>
 
<script>
    var traces=[];
    var layout=[];
    var config={};
    var rows=[]
    const CSV="cloudcover.csv";

    Plotly.d3.csv(CSV, function(rows){
        let x=[];
        let y=[];
        let row;
        let i=0;
    while (i< rows.length){
        row=rows[i];
        x.push(row["Time"]);
        y.push(row["CloudCover"]);
        i+=1;
        };
    traces=[
        {x:x,
        y:y,
        line:{color:"#387fba"},
        width:2,
        }];

    layout={
        title:'Cloudcover',
        yaxis:{ range:[0,100]},
        xaxis:{tickformat: "%H:%M:%S"}
        };

    config={
        responsive:true
    };

Plotly.newPlot('myDiv',traces,layout,config,{showSendToCloud: true});
    });

    var myPlot = document.getElementById('myDiv')
    hoverInfo = document.getElementById('hoverinfo')

    myPlot.on('plotly_hover', function(data){
        var infotext = data.points.map(function(d){
          return (d.data.name+': x= '+d.x+', y= '+d.y.toPrecision(3));
        });
            hoverInfo.innerHTML = infotext.join('<br/>');
    })

     myPlot.on('plotly_unhover', function(data){
        hoverInfo.innerHTML = '';
    });
    
</script>
</body>
</html>

The csv is simple:

Time,CloudCover
2022-04-06 10:07:09,0
2022-04-06 11:07:18,100.0
2022-04-06 12:08:17,100.0
2022-04-06 13:09:16,96.0
2022-04-06 14:10:15,66.0
2022-04-06 15:11:14,7.0
2022-04-06 16:12:13,6.0

Answer

You have to put all of the plotly code inside the Plotly.d3.csv callback, including your event listener, like so:

Plotly.d3.csv(CSV, function (rows) {
        ...

        Plotly.newPlot('myDiv', traces, layout, config);

        const myPlot = document.getElementById('myDiv')

        myPlot.on('plotly_hover', function (data) {
            ...
        })

        myPlot.on('plotly_unhover', function (data) {
            ...
        });
});

This is because your data will only be available once the CSV file is loaded (i.e. you are inside the callback) and the on listener will only be available once the chart is created from the data.

Advertisement

Answer