Question 1

Soy un newby tratando de aprender. He modificado el código plotly en: plotly hover events El objetivo es obtener eventos hover para luego poder mostrar una imagen en un modal.

Mi csv lee y la trama se muestra en el navegador. Recibo un mensaje de error: "TypeError no detectado: myPlot.on no es una función" (en los depuradores de Firefox y Chrome). Otras publicaciones sobre este problema indican que debo estar ejecutando la versión correcta de "https://cdn.plot.ly/plotly-latest.min.js". He intentado todo lo que se me ocurre, incluso convertirlo en código lineal sin múltiples llamadas a funciones. ¡Ayudar! Gracias...

<!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>

El csv es 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

Question 2

Mueve el Plotly.newPlotfuera de la función pasada a Plotly.d3.csv. Una vez Plotly.newPlotque se ejecuta, insertará los polyfills para permitir escuchar eventos usando.on(...)

El siguiente fragmento traza un gráfico en blanco, todavía no tiene el cloudcover.csvarchivo, pero resuelve su problema.

<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>
  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>

respuesta