Zoom Google Line chart

Asked 24/12, 2013 at 16:44 Answered 5/12, 2019 at 13:11

javascript charts google-visualization linechart

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?

Stephen answered 24/12, 2013 at 16:44 Comment(1)

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. – Formation 24/12, 2013 at 16:49

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/

Masefield answered 13/4, 2016 at 10:51 Comment(4)

Hello this is not working for me..Please help its urgent – Kristelkristen 5/4, 2017 at 6:13

@HarrySharma can you atleast explain how you have used it? – Masefield 6/4, 2017 at 13:7

@HarrySharma looks like zoom is not yet defined for gantt charts developers.google.com/chart/interactive/docs/gallery/… – Masefield 20/4, 2017 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.. – Belostok 24/1, 2019 at 7:12

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/

Chromatid answered 24/2, 2014 at 12:24 Comment(2)

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. – Tusche 13/1, 2015 at 22:2

Hello this is not working for me..Please help its urgen – Kristelkristen 5/4, 2017 at 6:13

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.

Codd answered 17/3, 2017 at 7:9 Comment(0)

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
}

Stability answered 5/12, 2019 at 13:11 Comment(1)

you spent weeks to figure this out, but the same answer is here since 2014. scroll up. – Sodomy 13/1 at 17:53

Recommended topics

Hot tags