ttb plot

Plotly Click No Hoverinfo

by Ariel Balter

HTML

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id='myDiv'></div>
<div id='hoverinfo'></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];

var text_annotations = [];

for (index in dates)
{
	var annotation = "<h3>Data</h3>"
  							 + "<hr/>"
                 + "Date: " + dates[index]
                 + "<br/>"
                 + "CA19-9: " + ca199[index]
                 + "<hr>";
	text_annotations.push(annotation);
        
}

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',
    text: text_annotations
  };

  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');

myPlot.on('plotly_hover', function(data) {
  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 = ' +...