Open url in new tab when chart is clicked on

plotly.js
1

Is there a way to open a url in a new tab when a point on a chart is clicked on?

2 Likes
2

Hi,
on the plotly page there is an explanation for ‘binding to click events’: https://plot.ly/javascript/click-events/#binding-to-click-events
You could use this to process a custom action if the user click on a point. (Currently it is the NEAREST point - but this can changed in code.
I created a JSFiddle for you: https://jsfiddle.net/cnnLjchx/1/

document.getElementById('myDiv').on('plotly_click', function(data){
    var pts = '';
    for(var i=0; i < data.points.length; i++){//find nearest point
        pts = 'x = '+data.points[i].x +'\ny = '+
            data.points[i].y.toPrecision(4) + '\n\n';
    }
    window.open("https://www.google.de/"+pts,'_blank');//open a url in a new tab
});
1 Like
3

Thanks very much for the reply. I will try this and let you know how it works.

4

Thanks! I was able to get this working.

1 Like
5

hello, thanks for posting this! I am trying to get this to work for a choropleth plot. I think it is possible because I found an example where an action occurs using plotly_click for a choropleth plot here (using Shiny) https://plot.ly/r/shinyapp-map-click/ . I also found this example where a popup box is displayed on click event: https://gist.github.com/etpinard/fecb663134dc6d7fc013

Using this sample code below for a choropleth plot, is it possible to get this code to work if a user clicks on each state?

    Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/2011_us_ag_exports.csv', function(err, rows){
      function unpack(rows, key) {
          return rows.map(function(row) { return row[key]; });
      }

      var data = [{
          type: 'choropleth',
          locationmode: 'USA-states',
          locations: unpack(rows, 'code'),
          z: unpack(rows, 'total exports'),
          text: unpack(rows, 'state'),
          zmin: 0,
          zmax: 17000,
          colorscale: [
              [0, 'rgb(242,240,247)'], [0.2, 'rgb(218,218,235)'],
              [0.4, 'rgb(188,189,220)'], [0.6, 'rgb(158,154,200)'],
              [0.8, 'rgb(117,107,177)'], [1, 'rgb(84,39,143)']
          ],
          colorbar: {
              title: 'Millions USD',
              thickness: 0.2
          },
          marker: {
              line:{
                  color: 'rgb(255,255,255)',
                  width: 2
              }
          }
      }];


      var layout = {
          title: '2011 US Agriculture Exports by State',
          geo:{
              scope: 'usa',
              showlakes: true,
              lakecolor: 'rgb(255,255,255)'
          }
      };

      Plotly.plot(myDiv, data, layout, {showLink: false});
});