Google chart looses zoom after call to chart.draw(

Question

I have a problem with google line chart, my system delivers data interactively and I need to update google chart interactively upon change. In order to do so, I call chart.draw(...) during every data upload. Unfortunately making such call resets visual state of the component.

Consider the following jsfiddle http://jsfiddle.net/1besonf5/83/

If you zoom component it will get reset in a second. Due to

setInterval(() => chart.draw(data, chartOptions), 3000);

How do you deal with this problem?

Answer 1

following is a rough example of how to re-draw the chart at the same zoom level

1. it boils down to finding the current min / max values of each axis
using the various chart methods available, including...

getChartLayoutInterface -- Returns an object containing information about the onscreen placement of the chart and its elements.

getChartAreaBoundingBox -- Returns an object containing the left, top, width, and height of the chart content.

getHAxisValue - Returns the logical horizontal value at position, which is an offset from the chart container's left edge. Can be negative.

getVAxisValue - Returns the logical vertical value at position, which is an offset from the chart container's top edge. Can be negative.

(see getCoords below)

once you have the coordinates, you can set the min / max values on the axis options
(see setRange below)

2. see the following working snippet...

the "Redraw Chart" button demonstrates redrawing the chart with the same zoom level as found in the currently displayed chart

to test, "dragToZoom" the chart, then click "Redraw Chart"

the "Reset Chart" button is used to reset the chart to the original zoom level
-- which is normally right-click but is lost due to redraw and could be added back with an event listener

might also want to round the axis values or provide custom ticks, which isn't provided here

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable({
      "cols": [
        {"label": "X", "type": "number"},
        {"label": "Y", "type": "number"}
      ],
      "rows": [
        {"c": [{"v": 0}, {"v": 0}]},
        {"c": [{"v": 1}, {"v": 1}]},
        {"c": [{"v": 2}, {"v": 2}]},
        {"c": [{"v": 3}, {"v": 4}]},
        {"c": [{"v": 4}, {"v": 8}]},
        {"c": [{"v": 5}, {"v": 16}]},
        {"c": [{"v": 6}, {"v": 32}]},
        {"c": [{"v": 7}, {"v": 64}]},
        {"c": [{"v": 8}, {"v": 128}]},
        {"c": [{"v": 9}, {"v": 256}]}
      ]
    });

    var options = {
      explorer: {
        actions: ['dragToZoom', 'rightClickToReset'],
        axis: 'horizontal',
        keepInBounds: true
      },
      hAxis: {
        title: 'X'
      },
      pointSize: 3,
      vAxis: {
        title: 'Y'
      }
    };

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

    document.getElementById('reset-chart').addEventListener('click', function () {
      setRange();
    }, false);

    document.getElementById('update-chart').addEventListener('click', function () {
      setRange(getCoords());
    }, false);

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

    function setRange(coords) {
      options.hAxis.viewWindow = {};
      options.vAxis.viewWindow = {};
      if (coords) {
        options.hAxis.viewWindow.min = coords.x.min;
        options.hAxis.viewWindow.max = coords.x.max;
        options.vAxis.viewWindow.min = coords.y.min;
        options.vAxis.viewWindow.max = coords.y.max;
      }
      chart.draw(data, options);
    }
    chart.draw(data, options);
  },
  packages:['corechart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<input id="update-chart" type="button" value="Redraw Chart" />
<input id="reset-chart" type="button" value="Reset Chart" />
<div id="chart_div"></div>