title: google charts event for when user zooms or right clicks to reset
body: <p>I have a google chart. I have enabled the user to drag and zoom by using the option below.</p>
  <pre><code> var options = {
      explorer:
          {
              keepInBounds: true,
              actions: ['dragToZoom', 'rightClickToReset']
          }
  </code></pre>
  <p>I also have the listen below which hides / shows a series when its legend is clicked.</p>
  <pre><code>google.visualization.events.addListener(chart, 'select', showHideSeries);
  </code></pre>
  <p>This all works fine. What I am trying to figure out is to know when a user has either zoomed in or right click to reset. Is there an event or way of knowing this?</p>
  <p>The reason I want to know is because I want to get the min &amp; max x-axis values and perform a calculation. I can get these values using the function below, which was posted in this <a href="https://stackoverflow.com/questions/40745775/google-chart-looses-zoom-after-call-to-chart-draw">post</a></p>
  <pre><code>function getCoords() {
  var chartLayout = chart.getChartLayoutInterface();
  var chartBounds = chartLayout.getChartAreaBoundingBox();
  return {
      x: {
          min: chartLayout.getHAxisValue(chartBounds.left),
          max: chartLayout.getHAxisValue(chartBounds.width + chartBounds.left)
      },
      y: {
          min: chartLayout.getVAxisValue(chartBounds.top),
          max: chartLayout.getVAxisValue(chartBounds.height + chartBounds.top)
      }
  };
  }
  </code></pre>
  <p>Here is j fiddle example <a href="https://jsfiddle.net/vpxjym2c/8/" rel="nofollow noreferrer">my example</a></p>
  <p><strong>Update</strong></p>
  <p>Apologise I think I missed off a important part of information. So my ajax function gets the data from a server and then calls a function to draw the chart.</p>
  <pre><code>$(document).ready(function () {
  
  // $.ajax(...);});
  </code></pre>
  <p>I have added the additional code in my function that draws the chart. However the chart no longer loads. I get this error message,</p>
  <blockquote>
  <p>Uncaught error: container is not defined.</p>
  </blockquote>
  <p>It happens on the second line of code below.</p>
  <blockquote>
  <p>var chartDiv = document.getElementById('chartScore')</p>
  <p>var chart = new google.visualization.AreaChart(document.getElementById(chartDiv));</p>
  </blockquote>
  <p>If I take out the code below the chart does plot.</p>
  <pre><code> google.visualization.events.addListener(chart, 'ready', function () {
      var zoomLast = getCoords();
      var observer = new MutationObserver(function () {
          var zoomCurrent = getCoords();
          if (JSON.stringify(zoomLast) !== JSON.stringify(zoomCurrent)) {
              zoomLast = getCoords();
              console.log('zoom event');
          }
      });
      observer.observe(chartDiv, {
          childList: true,
          subtree: true
      });
  });
  
  function getCoords() {
      var chartLayout = chart.getChartLayoutInterface();
      var chartBounds = chartLayout.getChartAreaBoundingBox();
      return {
          x: {
              min: chartLayout.getHAxisValue(chartBounds.left),
              max: chartLayout.getHAxisValue(chartBounds.width + chartBounds.left)
          },
          y: {
              min: chartLayout.getVAxisValue(chartBounds.top),
              max: chartLayout.getVAxisValue(chartBounds.height + chartBounds.top)
          }
      };
  }
  </code></pre>
  <p><strong>Its now working</strong></p>
  <p>I removed</p>
  <blockquote>
  <p>var chartDiv = document.getElementById('chartScore')</p>
  </blockquote>
  <p>and changed</p>
  <blockquote>
  <p>observer.observe(chartDiv, {</p>
  </blockquote>
  <p>to</p>
  <blockquote>
  <p>observer.observe(document.getElementById('chartScore'), {</p>
  </blockquote>