Is it possible to link all/some of the points of a scatter plotly plot so whenever you click on them a new tab is opened and the hyperlink linked on that point is fired?

I am using plotly within a Django webserver implementation, this means that plotly is rendered with javascript.

Is it possible to link all/some of the points of a scatter plotly plot so whenever you click on them a new tab is opened and the hyperlink linked on that point is fired?

I am using plotly within a Django webserver implementation, this means that plotly is rendered with javascript.

• javascript
• django
• plot
• django-templates
• plotly

Share Improve this question Follow asked Feb 4, 2016 at 10:25 IgnasiIgnasi 63122 gold badges1010 silver badges2424 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

You can use the click handler to implement this. But it may be hard to open in new tab, given most browsers try to prevent popups at all times.

var trace1 = {
  x: [1, 2, 3],
  y: [1, 6, 3],
  mode: 'markers',
  type: 'scatter',
  text: ['Plotly', 'StackOverflow', 'Google'],
  hoverinfo: 'text',
  marker: { size: 12 }
};

var links = ['https://plot.ly/', 'http://stackoverflow./', 'https://google./'];

var data = [ trace1 ];

var layout = { 
  title:'Hyperlinked points'
};

var myPlot = document.getElementById('myDiv');
Plotly.newPlot(myPlot, data, layout);

myPlot.on('plotly_click', function(data){
  if (data.points.length === 1) {
    var link = links[data.points[0].pointNumber];
    
    // Note: window navigation here.
    window.location = link;
  }
});

<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

<div id="myDiv" style="width: 480px; height: 300px;"></div>