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

Question

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

mit · Accepted Answer · 2022-04-11 19:44:09Z

2

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.

answered Apr 11, 2022 at 19:44

mit

1,3409 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

creeser Over a year ago

Exactly what I needed. Interesting way to organize the code, but once you see it, it makes sense. Thanks..

CS. · Accepted Answer · 2022-04-13 08:13:47Z

Move the Plotly.newPlot out of the function passed to Plotly.d3.csv. Once Plotly.newPlot executes, it will insert the polyfills to allow listening to events using .on(...)

The below snippet plots a blank chart, it still doesn't have the cloudcover.csv file, but resolves your issue.

Updated the snippet to use Plotly.react() to refresh data in the chart once the CSV content is available. Generally speaking, it's better to not have the component creation/rendering code within the data update function.

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<!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>
  const chartEl = 'myDiv';
  const CSV = "cloudcover.csv";

  /*Create chart*/
  var layout = {
      title: 'Cloudcover',
      yaxis: {
        range: [0, 100]
      },
      xaxis: {
        tickformat: "%H:%M:%S"
      }
    },
    config = {
      responsive: true
    };

  Plotly.newPlot(chartEl, [], layout, config, {
    showSendToCloud: true
  });

  var myPlot = document.getElementById(chartEl)
  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 = '';
  });

  /*Update data in chart*/
  function updateChartData(rows) {
    let traces = [],
      x = [],
      y = [],
      row,
      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,
    }];

    Plotly.react(chartEl, traces);
  }

  Plotly.d3.csv(CSV, updateChartData);
</script>
</body>

</html>

The plot is empty, it appears that the globals of traces,layout,config are not being passed to: Plotly.newPlot('myDiv', traces, layout, config, {showSendToCloud: true }); The chrome debugger shows them as globals!! The vars are declared in global scope.

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related