Zoom Google Line chart

Question

I am trying to create a line chart with the Google Visualization API. I want to enable zooming. Documents say that the 'explorer' option is useful. But when I try to use the 'explorer' option, the chart is shown but zoom does not work.

This is my code:

function drawVisualization(dataValues) {
var data = new window.google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Count');

for (var i = 0; i < dataValues.length; i++) {
    data.addRow([new Date(dataValues[i].Year, dataValues[i].Month-1, dataValues[i].Day), dataValues[i].Count]);
}

var formatter_short = new google.visualization.DateFormat({ formatType: 'short' });
formatter_short.format(data, 0);
var options = {
    title: "Time statistics",
    explorer: { maxZoomOut: 8 }
};
var chart = new google.visualization.LineChart(document.getElementById('date'));
chart.draw(data, options);
}

How can I resolve this problem and make a line chart zoomable?

There is a known bug in the API when using the explorer option with a "date" type axis. The dev team is working on a solution. — asgallant, Dec 24 '13 at 16:49

score 39 · Answer 1 · answered Apr 13 '16 at 10:51

39

Here is How I got the zoom with the dragToZoom explorer function

explorer: { 
        actions: ['dragToZoom', 'rightClickToReset'],
        axis: 'horizontal',
        keepInBounds: true,
        maxZoomIn: 4.0
}

the fiddle is here https://jsfiddle.net/4w626v2s/2/

also by just allowing it to zoom by scrolling

explorer: {
        axis: 'horizontal',
        keepInBounds: true,
        maxZoomIn: 4.0
}

the fiddle for scroll to zoom is here https://jsfiddle.net/5h7jxqq8/2/

answered Apr 13 '16 at 10:51

Leonard Kakande

675
1
10
17

Hello this is not working for me..Please help its urgent – Harry Sharma Apr 05 '17 at 06:13
@HarrySharma can you atleast explain how you have used it? – Leonard Kakande Apr 06 '17 at 13:07
@HarrySharma looks like zoom is not yet defined for gantt charts https://developers.google.com/chart/interactive/docs/gallery/ganttchart#methods – Leonard Kakande Apr 20 '17 at 14:54
How to zoom and Scroll google Chart on Mobile device or Android Webview? I have tried above option working fine on my Computer browser but not working on Android Webview ormobile browser, please help me.. – Fra Red Jan 24 '19 at 07:12

score 16 · Answer 2 · answered Feb 24 '14 at 12:24

16

This seems to be working now with LineChart AND ColumnChart (even though this one is not documented).

var options = {
    explorer: {
        maxZoomOut:2,
        keepInBounds: true
    }
};

http://jsfiddle.net/duJA8/

answered Feb 24 '14 at 12:24

Sébastien

11,860
11
58
78

1

Also this works with scatterplots. Also as far as I know this features does NOT work if you have any of the log scaling on the axes. – ug_ Jan 13 '15 at 22:02
Hello this is not working for me..Please help its urgen – Harry Sharma Apr 05 '17 at 06:13

Sami Ahmed Siddiqui · Answer 3 · 2017-03-17T07:18:44.030

Try this:

<html>
 <head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
   google.charts.load('current', {
    callback: function () {
     drawChart();
     window.addEventListener('resize', drawChart, false);
    },
    packages:['corechart']
   });

   function drawChart() {
    var data = google.visualization.arrayToDataTable([
     ['Year', 'Sales', 'Expenses', 'Profit'],
     ['2014', 1000, 400, 200],
     ['2015', 1170, 460, 250],
     ['2016', 660, 1120, 300],
     ['2017', 1030, 540, 350]
    ]);

    var options = {
     animation:{
      duration: 1000,
      easing: 'linear',
      startup: true
     },
     height: 600,
     width: window.innerWidth,
     theme: 'material',
     title: 'Company Performance'
    };

    var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_material'));
    chart.draw(data, options);
   }
  </script>
 </head>
 <body>
  <div id="columnchart_material" style="height: 500px; "></div>
 </body>
</html>

If you want to set Width and Height according to the Screen. So, you can achieve this by using "innerWidth" and "innerHeight" as shown below:

<html>
 <head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
   google.charts.load('current', {
    callback: function () {
     drawChart();
     window.addEventListener('resize', drawChart, false);
    },
    packages:['corechart']
   });

   function drawChart() {
    var data = google.visualization.arrayToDataTable([
     ['Year', 'Sales', 'Expenses', 'Profit'],
     ['2014', 1000, 400, 200],
     ['2015', 1170, 460, 250],
     ['2016', 660, 1120, 300],
     ['2017', 1030, 540, 350]
    ]);

    var options = {
     animation:{
      duration: 1000,
      easing: 'linear',
      startup: true
     },
     height: window.innerHeight,
     width: window.innerWidth,
     theme: 'material',
     title: 'Company Performance'
    };

    var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_material'));
    chart.draw(data, options);
   }
  </script>
 </head>
 <body>
  <div id="columnchart_material"></div>
 </body>
</html>

I hope it helps you to solve the problem.

score 2 · Answer 4 · edited Aug 13 '20 at 08:15

2

The Below code will work but you should not use animation on your charts. Remove animation and use only explorer. This is a bug, if animation is applied then zoom will not work.

I spent weeks to figure this out.

explorer: {
  keepInBounds: true,
  maxZoomIn: 8.0
}

edited Aug 13 '20 at 08:15

thatguy

21,059
6
30
40

answered Dec 05 '19 at 13:11

Vivek Amirthakadeswaran

66
5

Zoom Google Line chart

4 Answers4

Linked