I want to implement Google Charts in my android app using webview. I've a HTML file which is working fine on Google Chrome with all Zoom and Scroll Controls, but when I implement it on webview then I can view the Line chart but zoom and scroll features are not working.
There's no proper method of implementing zoom and scroll feature on Android webview.
zoom.html
<!DOCTYPE html>
<html>
<body>
<div id="chart_div" style="width: 500px; height: 300px;"></div>
</body>
<head>
<title>gfifhg</title>
</head>
</html>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales'],
[new Date(2001,01,01), 30],
[new Date(2002,01,01), 70],
[new Date(2003,01,01), 45],
[new Date(2004,01,01), 99],
[new Date(2005,01,01), 22],
[new Date(2006,01,01), 0],
[new Date(2007,01,01), 89],
[new Date(2008,01,01), 30],
[new Date(2009,01,01), 32],
[new Date(2010,01,01), 77],
[new Date(2011,01,01), 67],
[new Date(2012,01,01), 22],
[new Date(2013,01,01), 23],
[new Date(2014,01,01), 25],
[new Date(2015,01,01), 9],
[new Date(2016,01,01), 10],
[new Date(2017,01,01), 77],
[new Date(2018,01,01), 47],
[new Date(2019,01,01), 22],
[new Date(2020,01,01), 23],
[new Date(2022,01,01), 12],
[new Date(2023,01,01), 9],
[new Date(2024,01,01), 10],
[new Date(2025,01,01), 10],
[new Date(2026,01,01), 77],
[new Date(2027,01,01), 67],
[new Date(2028,01,01), 22],
[new Date(2029,01,01), 23],
[new Date(2030,01,01), 34],
[new Date(2031,01,01), 9],
[new Date(2032,01,01), 10],
[new Date(2033,01,01), 22],
[new Date(2034,01,01), 23],
[new Date(2035,01,01), 19],
[new Date(2036,01,01), 12],
[new Date(2037,01,01), 10],
[new Date(2038,01,01), 17],
[new Date(2039,01,01), 6],
[new Date(2040,01,01), 6],
[new Date(2041,01,01), 22],
[new Date(2042,01,01), 23],
[new Date(2043,01,01), 71],
[new Date(2044,01,01), 9],
[new Date(2045,01,01), 10],
[new Date(2046,01,01), 78],
[new Date(2047,01,01), 67],
[new Date(2048,01,01), 22],
[new Date(2049,01,01), 23],
[new Date(2050,01,01), 12],
[new Date(2051,01,01), 13],
[new Date(2052,01,01), 10],
[new Date(2053,01,01), 77],
[new Date(2054,01,01), 47],
[new Date(2055,01,01), 22],
[new Date(2056,01,01), 23],
[new Date(2057,01,01), 12],
[new Date(2058,01,01), 9],
[new Date(2059,01,01), 10],
[new Date(2060,01,01), 10],
[new Date(2061,01,01), 76],
[new Date(2062,01,01), 67],
[new Date(2063,01,01), 22],
[new Date(2064,01,01), 23]
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: '#333'},
slantedText:true, slantedTextAngle:80},
vAxis: {minValue: 0},
explorer: {
//actions: ['dragToZoom', 'rightClickToReset'],
//maxZoomIn: 2.0,
//maxZoomOut:2,
axis: 'horizontal',
keepInBounds: true},
colors: ['#D44E41'],
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
GraphActivity.java
public class GraphActivity extends AppCompatActivity {
WebView webview;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_graph);
webview = findViewById(R.id.web_graph);
webview.getSettings().setJavaScriptEnabled(true);
webview.loadUrl("file:///android_asset/zoom.html");
}
}
Images on Google Chrome Zoom In Zoom Out
Image on Android,Webview Line Chart on Webview
