Get Reference to Figure created in Python

plotly.js
1

I have a single figure embedded in an html page that I created in a Python view. I is possible to detect when the user zooms the X- oir Y- axis in javascript on the html page? I have tried adding event listeners to the Figure, but nothing works. here is my html:

{% extends "base_generic.html" %}

{% block head_scripts %}
	<script src='https://cdn.plot.ly/plotly-2.32.0.min.js'></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
{% endblock head_scripts %}
{% block content %}
  <input type="hidden" id="chartData" name="chart" value="{{ chartData }}">
  <h4>Track detail for <br/>{{ usr.name }}, Track {{ trkItem.descriptor }}</h4>
  <p>Time Offs: {{ trkItem.timezn_offs_mins }}</p>
  <br />
  <div row id="wattchart">

    {{ wattchart|safe }}

  </div>
{% endblock content %}
{% block body_scripts %}
<script>
  $(document).ready( function () {
    var refplot = document.getElementById('wattchart');
    console.log('adding listenters: '+String(refplot))
    refplot.addEventListener('plotly_afterplot', function(){
        Plotly.d3.selectAll(".yaxislayer-above").selectAll('text')
              .on("click", function(d) {
                alert("Hello, I am " + d.x);
              });
    });    
  })
</script>
 
{% endblock body_scripts %}

The console.log statement only says: adding listenters: [object HTMLDivElement]
It appears that just grabbing the DOM does not reference the plotly Figure.
I got the event listener from an example on the web somewhere, but in this example, they created the Plot in the javascript and added the event listener to it. In my case, the plotly object should already be there.

2

change

refplot.addEventListener

for

refplot.on

3

Thanks for the tip, but it did not work. Got this error in the FireFox debugger:
jQuery.Deferred exception: refplot.on is not a function
It is as if I dont really have reference to the plotly object, just have the DOM element.

4

The “on” method is a Plotly method that is added to the HTML element that contains the graph after adding the graph, so if you try to use it before creating the graph it will throw an error

Use

Plotly.newPlot(layer, data, layout, config)
  .then(() => {
    layer.on(plotly event, ...)
  }
5

Thanks a lot! This seemed like a key bit of info, but on further digging, I found another solution here:

And my final code, which I needed to capture the x-axis range when user zoomed into my plot:

{% block body_scripts %}
<script>
  $(document).ready( function () {
    var refplot = document.getElementById('wattchart');
    $('.js-plotly-plot')[0].on('plotly_relayout', function(eventData) {
      console.log(eventData["xaxis.range[0]"] +'; '+eventData["xaxis.range[1]"])
    });
  })
</script>
 
{% endblock body_scripts %}