Unable to display hAxis gridlines!
198 views
Skip to first unread message
Cosmin T
Apr 12, 2017, 4:19:11 AM4/12/17
to Google Visualization API
I've spent 5+ hours trying to get those gridlines to appear. Used sample tables and tried to activate gridlines them with "gridlines" option, tried adding specific "continuous" axis compatible columns (column data types). Extremely frustrating and disappointing. Here is one example directly from Google in which I tried to get the gridlines to show for hAxis:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Day');
data.addColumn('number', 'Guardians of the Galaxy');
data.addColumn('number', 'The Avengers');
data.addColumn('number', 'Transformers: Age of Extinction');
data.addRows([
[1, 37.8, 80.8, 41.8],
[2, 30.9, 69.5, 32.4],
[3, 25.4, 57, 25.7],
[4, 11.7, 18.8, 10.5],
[5, 11.9, 17.6, 10.4],
[6, 8.8, 13.6, 7.7],
[7, 7.6, 12.3, 9.6],
[8, 12.3, 29.2, 10.6],
[9, 16.9, 42.9, 14.8],
[10, 12.8, 30.9, 11.6],
[11, 5.3, 7.9, 4.7],
[12, 6.6, 8.4, 5.2],
[13, 4.8, 6.3, 3.6],
[14, 4.2, 6.2, 3.4]
]);
var options = {
chart: {
title: 'Box Office Earnings in First Two Weeks of Opening',
subtitle: 'in millions of dollars (USD)'
},
width: 900,
height: 500,
hAxis: {gridlines: {count: '-1'}}
};
var chart = new google.charts.Line(document.getElementById('line_top_x'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="line_top_x"></div>
</body>
</html>
Also, zoom options seems to be SEVERELY limited or I haven't found the magical documentation for it (this DID NOT HELP: https://developers.google.com/chart/). I have a chart with data points (data rows) at every two minutes for a whole day. I was hoping that the "explorer" option would allow me to zoom in and while doing this, adjust the hAxis accordingly and go into more detail but this is only happening for vAxis (the number/quantity stepping is becoming more detailed) which is pretty much useless. Third party examples did not help, stackoverflow answers are a few years old, the js link changed in the meantime along with several functionalities.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Day');
data.addColumn('number', 'Guardians of the Galaxy');
data.addColumn('number', 'The Avengers');
data.addColumn('number', 'Transformers: Age of Extinction');
data.addRows([
[1, 37.8, 80.8, 41.8],
[2, 30.9, 69.5, 32.4],
[3, 25.4, 57, 25.7],
[4, 11.7, 18.8, 10.5],
[5, 11.9, 17.6, 10.4],
[6, 8.8, 13.6, 7.7],
[7, 7.6, 12.3, 9.6],
[8, 12.3, 29.2, 10.6],
[9, 16.9, 42.9, 14.8],
[10, 12.8, 30.9, 11.6],
[11, 5.3, 7.9, 4.7],
[12, 6.6, 8.4, 5.2],
[13, 4.8, 6.3, 3.6],
[14, 4.2, 6.2, 3.4]
]);
var options = {
chart: {
title: 'Box Office Earnings in First Two Weeks of Opening',
subtitle: 'in millions of dollars (USD)'
},
width: 900,
height: 500,
hAxis: {gridlines: {count: '-1'}}
};
var chart = new google.charts.Line(document.getElementById('line_top_x'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="line_top_x"></div>
</body>
</html>
Also, zoom options seems to be SEVERELY limited or I haven't found the magical documentation for it (this DID NOT HELP: https://developers.google.com/chart/). I have a chart with data points (data rows) at every two minutes for a whole day. I was hoping that the "explorer" option would allow me to zoom in and while doing this, adjust the hAxis accordingly and go into more detail but this is only happening for vAxis (the number/quantity stepping is becoming more detailed) which is pretty much useless. Third party examples did not help, stackoverflow answers are a few years old, the js link changed in the meantime along with several functionalities.
Reply all
Reply to author
Forward
0 new messages