Following this example https://community.plot.ly/t/hyperlink-to-markers-on-map/17858/6, I am trying to make points my scatter plot clickable (specifically, open a webpage when clicked). How do I get the click event to trigger when a data point is clicked?
This is a python turbogears app, with the plotly_click event happening in js. I'm using plotly.js v1.44.1.. Like in the example, I first create the fig:
plotlyHtml = webhelpers2.html.literal(plotly.offline.plot(fig, include_plotlyjs=True, output_type='div'))
Then I find a div in the figure:
res = re.search('<div id="([^"]*)"', plotlyHtml)
div_id = res.groups()[0]
Then I build a js callback to be inserted into a script tag in the template, as in the example. Here's the script tag injected into the html:
<script type="text/javascript">
var plot_element = document.getElementById('3f56277f-e84b-4b68-ae85-91d3cd62d01c');
console.log('callback js has been added to page. did we get plot_element?');
console.log(plot_element);
plot_element.on('plotly_click', function(data){
console.log('Im inside the plotly_click!!');
console.log(data);
var point = data.points[0];
if (point) {
console.log(point.customdata);
window.open(point.customdata);
}
})
</script>
The first two console.log statements before the event listener print when the page is rendered, meaning the js is successfully injected into the html. Particularly, plot_element is a div with class="plotly-graph-div js-plotly-plot". However clicking points on my scatterplot never results in anything, no errors, events, or console log statements. I at least expect the console log statements in the if to occur. Am I selecting the wrong div id?
