CODEWITHSUNDEEP
javascriptjquerychartsgoogle-apigoogle-visualization
mHelpMe
mHelpMe

Reputation: 6668

google charts event for when user zooms or right clicks to reset

I have a google chart. I have enabled the user to drag and zoom by using the option below.

 var options = {
    explorer:
        {
            keepInBounds: true,
            actions: ['dragToZoom', 'rightClickToReset']
        }

I also have the listen below which hides / shows a series when its legend is clicked.

google.visualization.events.addListener(chart, 'select', showHideSeries);

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?

The reason I want to know is because I want to get the min & max x-axis values and perform a calculation. I can get these values using the function below, which was posted in this post

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)
    }
};
}

Here is j fiddle example my example

Update

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.

$(document).ready(function () {

// $.ajax(...);});

I have added the additional code in my function that draws the chart. However the chart no longer loads. I get this error message,

Uncaught error: container is not defined.

It happens on the second line of code below.

var chartDiv = document.getElementById('chartScore')

var chart = new google.visualization.AreaChart(document.getElementById(chartDiv));

If I take out the code below the chart does plot.

 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)
        }
    };
}

Its now working

I removed

var chartDiv = document.getElementById('chartScore')

and changed

observer.observe(chartDiv, {

to

observer.observe(document.getElementById('chartScore'), {

Upvotes: 1

Views: 1636

Answers (1)

WhiteHat
WhiteHat

Reputation: 61232

you can use a mutation observer to know when the zoom event occurs

the mutation observer will actually let you know when anything on the chart has changed
which means it will fire when a point is hovered or selected, etc...

but you can keep track of the current zoom level and determine when it changes

see following working snippet... 

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    [0, 6],
    [1, 7],
    [2, 8],
    [3, 9],
    [4, 5]
  ], true);

  var options = {
    pointSize: 4,
    explorer: {
      keepInBounds: true,
      actions: ['dragToZoom', 'rightClickToReset']
    }
  };

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.LineChart(container);

  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(container, {
      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)
      }
    };
  }

  chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Upvotes: 1

Related Questions