Событие google charts, когда пользователь увеличивает масштаб или щелкает правой кнопкой мыши для сброса

У меня есть диаграмма Google. Я разрешил пользователю перетаскивать и масштабировать, используя опцию ниже.

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

У меня также есть прослушивание ниже, которое скрывает / показывает серию при нажатии на ее легенду.

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

Все работает нормально. Я пытаюсь выяснить, когда пользователь либо увеличил масштаб, либо щелкнул правой кнопкой мыши для сброса. Есть ли событие или способ узнать об этом?

Причина, по которой я хочу знать, заключается в том, что я хочу получить минимальные и максимальные значения оси x и выполнить расчет. Я могу получить эти значения с помощью функции ниже, которая была размещена в этом Почта

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

Вот пример j скрипки мой пример

Обновлять

Прошу прощения. Думаю, я упустил важную часть информации. Итак, моя функция ajax получает данные с сервера, а затем вызывает функцию для рисования диаграммы.

$(document).ready(function () {

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

Я добавил дополнительный код в свою функцию, которая рисует диаграмму. Однако диаграмма больше не загружается. Я получаю это сообщение об ошибке,

Uncaught error: container is not defined.

Это происходит во второй строке кода ниже.

var chartDiv = document.getElementById('chartScore')

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

Если я возьму код ниже, диаграмма отобразит.

 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.info('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)
        }
    };
}

Теперь он работает

Я удалил

var chartDiv = document.getElementById('chartScore')

и изменил

observer.observe(chartDiv, {

к

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