Can't get plotly.js hover event example to work

plotly.js
1

I basically copied the hover event setup from the online example, but am getting an error that the hoverinfo element (which seems like it is supposed to be generated by plotly) is not present. I have added a function to display this element, and indeed it does not exist in the DOM.

What am I doing wrong?

https://jsfiddle.net/abalter/1qasvnth/

HTML:

<div id='myDiv'>
  Hello
</div>

Javascript:

var dates = ["11/5/2013", "1/12/2014", "3/9/2014", "5/4/2014", "6/22/2014", "7/20/2014", "7/27/2014", "8/4/2014", "8/17/2014", "8/24/2014", "8/31/2014", "9/14/2014", "9/21/2014", "9/28/2014", "10/12/2014", "10/19/2014", "10/26/2014", "11/9/2014", "11/16/2014", "3/29/2015"];

var ca199 = [12395, 7367, 211, 400, 5706, 1131, 529, 283, 180, 280, 270, 266, 537, 758, 623, 1346, 1252, 1629, 5890, 6680];

makeScatterPlot(dates, ca199);

function toDate(d) {
  var parts = d.split('/');

  return new Date(parts[2], parts[0], parts[1]).getTime();
}

function makeScatterPlot(x, y) {

  console.log(x);
  console.log(y);

  var timeline = {
    x: x.map(toDate),
    y: y,
    mode: 'lines+markers',
    type: 'scatter'
  };

  data = [timeline];

  var layout = {
    title: "Title",
    displayModeBar: true,
    height: 300,
    width: 600,
    hovermode: 'closest',
    xaxis: {
      type: 'date',
      tickvals: x.map(toDate),
      ticktext: x,
      tickfont: {
        color: "rgb(107, 107, 107)",
        size: 11
      },
      ticks: "outside",
      tickwidth: 1,
      tickangle: 40,
      ticklen: 5,
      showticklabels: true,
      showline: false,
      showgrid: true,
      autorange: true,
    },
    yaxis: {
      showgrid: true,
    }
  };

  Plotly.newPlot(
    "myDiv",
    data,
    layout
  );

}

var myPlot = document.getElementById('myDiv');
var hoverInfo = document.getElementById('hoverinfo');
console.log("hoverInfo: " + hoverInfo);

document.addEventListener("DOMContentLoaded", function(event) {
  //your code to run since DOM is loaded and ready
  var allElements = document.getElementsByTagName("*");
  var allIds = [];
  for (var i = 0, n = allElements.length; i < n; ++i) {
    var el = allElements[i];
    if (el.id) {
      allIds.push(el.id);
    } else if (el.name) {
      allIds.push(el.name);
    }
  }
});


myPlot.on('plotly_hover', function(data) {
  var allElements = document.getElementsByTagName("*");
  var allIds = [];
  for (var i = 0, n = allElements.length; i < n; ++i) {
    var el = allElements[i];
    if (el.id) {
      allIds.push(el.id);
    } else if (el.name) {
      allIds.push(el.name);
    }
  }

  console.log(allIds);

  var local_hoverInfo = document.getElementById('hoverinfo');
  console.log("local_hoverInfo: " + local_hoverInfo);
  
  var pts = '';
  for (var i = 0; i < data.points.length; i++) {
    pts = 'x = ' + data.points[i].x + '\ny = ' +
      data.points[i].y.toPrecision(4) + '\n\n';
  }
  alert('point hovered:\n\n'+pts);
  //hoverInfo.innerHTML = pts;
});
2

You need to add the hoverinfo <div> to your HTML.

In other works, your HTML does not match the HTML of the https://plot.ly/javascript/hover-events/ example.

Pasted image717×248 17.5 KB

1 Like
3

…HA! So simple.

4

Hiya! Plotly now has improved and consolidated Plotly.js event documentation here:

Please feel free to suggest documentation improvements in a pull request:

https://github.com/plotly/documentation/tree/source-design-merge/_posts/plotly_js/events