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 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
}
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/
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/
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.