Setting Hours and Minutes on Google Charts hAxis with jsondata - php

Question

I have a Google Line chart that produces a number of tweets by time. As you can see, it does not currently show the 30 minute intervals. How do I get it to say 6:30am, 7:30am, etc... Also, how do I default it to switch between 6am and say 6:30am but all the way across the chart. For example, if the most recent was at 6:30am, then all of them should read on the 30 (7:30am, 8:30am, etc.)
{"cols":[{"id":"datetime","label":"datetime","type":"datetime"},{"id":"Tweets","label":"Tweets","type":"number"},{"role":"annotation","type":"string"},{"type":"string","role":"style"}],"rows":[{"c":[{"v":"Date(2016, 8, 08, 13, 30, 0)"},{"v":"5010"},{"v":"5010"},{"v":"point {fill-color: #5e6771}"}]},{"c":[{"v":"Date(2016, 8, 08, 13, 0, 0)"},{"v":"4670"},{"v":"4670"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 14, 0, 0)"},{"v":"4543"},{"v":"4543"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 14, 30, 0)"},{"v":"3230"},{"v":"3230"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 16, 30, 0)"},{"v":"3167"},{"v":"3167"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 16, 0, 0)"},{"v":"3013"},{"v":"3013"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 15, 0, 0)"},{"v":"2924"},{"v":"2924"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 15, 30, 0)"},{"v":"2892"},{"v":"2892"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 12, 30, 0)"},{"v":"2205"},{"v":"2205"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 11, 0, 0)"},{"v":"1789"},{"v":"1789"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 11, 30, 0)"},{"v":"1753"},{"v":"1753"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 9, 30, 0)"},{"v":"1653"},{"v":"1653"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 9, 0, 0)"},{"v":"1611"},{"v":"1611"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 12, 0, 0)"},{"v":"1598"},{"v":"1598"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 8, 30, 0)"},{"v":"1531"},{"v":"1531"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 10, 30, 0)"},{"v":"1490"},{"v":"1490"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 10, 0, 0)"},{"v":"1424"},{"v":"1424"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 8, 0, 0)"},{"v":"1081"},{"v":"1081"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 7, 30, 0)"},{"v":"888"},{"v":"888"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 7, 0, 0)"},{"v":"679"},{"v":"679"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 6, 30, 0)"},{"v":"673"},{"v":"673"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 6, 0, 0)"},{"v":"666"},{"v":"666"},{"v":null}]}]}
Google Charts Code:
<table class="graph-table">
<tr><td class="headerspacing2" colspan="3"><span class="header">Tweet Volume</span></td></tr>
<tr align="center"><td colspan="2">
<div id="curve_chart" style="width: 1280px; height: 430px">
<script type="text/javascript">
google.charts.load('current', {
callback: function () {
drawChart();
setInterval(drawChart, (60000));
function drawChart() {
$.ajax({
url: 'grab_twitter_stats.php',
type: 'get',
success: function (txt) {
var data = new google.visualization.DataTable(txt);
data.sort([{column: 0, desc:true}]);
var options = {
curveType: 'function',
hAxis: {
format: 'H, m',
textStyle: {
color: '#7acdd0',
fontSize: 20
},
gridlines: {
count: -1,
color: 'transparent'
},
},
vAxis: {
gridlines: {
color: '#7acdd0',
count: 1
},
textPosition: 'none'
},
emphasis: {
'color':'#000000',
},
pointSize: 15,
chartArea: {'width': '92%', 'height': '85%'},
pointShape: 'circle',
lineWidth: 5,
colors: ['#7acdd0'],
annotations: {
stemColor : 'none'
},
'tooltip' : {
trigger: 'none'
},
legend: { position: 'none' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
});
}
},
packages: ['corechart']
});
</script>
</div>
</td></tr>
</table>

Answer 1

use the hAxis.ticks configuration option to set custom labels on the x-axis
each tick should be the same data type as the x-axis column
so you can pull the values of data
var tickMarks = [];
for (var i = 0; i < data.getNumberOfRows(); i++) {
tickMarks.push(data.getValue(i, 0));
}
depending on the format of the labels, you may need to adjust the chartArea
see following working snippet...
google.charts.load('current', {
callback: function () {
txt = {"cols":[{"id":"datetime","label":"datetime","type":"datetime"},{"id":"Tweets","label":"Tweets","type":"number"},{"role":"annotation","type":"string"},{"type":"string","role":"style"}],"rows":[{"c":[{"v":"Date(2016, 7, 08, 13, 30, 0)"},{"v":"5010"},{"v":"5010"},{"v":"point {fill-color: #5e6771}"}]},{"c":[{"v":"Date(2016, 7, 08, 13, 0, 0)"},{"v":"4670"},{"v":"4670"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 14, 0, 0)"},{"v":"4543"},{"v":"4543"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 14, 30, 0)"},{"v":"3230"},{"v":"3230"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 16, 30, 0)"},{"v":"3167"},{"v":"3167"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 16, 0, 0)"},{"v":"3013"},{"v":"3013"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 15, 0, 0)"},{"v":"2924"},{"v":"2924"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 15, 30, 0)"},{"v":"2892"},{"v":"2892"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 12, 30, 0)"},{"v":"2205"},{"v":"2205"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 11, 0, 0)"},{"v":"1789"},{"v":"1789"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 11, 30, 0)"},{"v":"1753"},{"v":"1753"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 9, 30, 0)"},{"v":"1653"},{"v":"1653"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 9, 0, 0)"},{"v":"1611"},{"v":"1611"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 12, 0, 0)"},{"v":"1598"},{"v":"1598"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 8, 30, 0)"},{"v":"1531"},{"v":"1531"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 10, 30, 0)"},{"v":"1490"},{"v":"1490"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 10, 0, 0)"},{"v":"1424"},{"v":"1424"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 8, 0, 0)"},{"v":"1081"},{"v":"1081"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 7, 30, 0)"},{"v":"888"},{"v":"888"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 7, 0, 0)"},{"v":"679"},{"v":"679"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 6, 30, 0)"},{"v":"673"},{"v":"673"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 6, 0, 0)"},{"v":"666"},{"v":"666"},{"v":null}]}]};
var data = new google.visualization.DataTable(txt);
data.sort([{column: 0, desc:true}]);
var tickMarks = [];
for (var i = 0; i < data.getNumberOfRows(); i++) {
tickMarks.push(data.getValue(i, 0));
}
var options = {
annotations: {
stemColor : 'none'
},
chartArea: {
width: '92%',
height: '70%'
},
colors: ['#7acdd0'],
curveType: 'function',
emphasis: {
color: '#000000'
},
hAxis: {
format: 'H:mm a',
gridlines: {
count: -1,
color: 'transparent'
},
textStyle: {
color: '#7acdd0',
fontSize: 14
},
ticks: tickMarks
},
height: 400,
legend: {
position: 'none'
},
lineWidth: 5,
pointShape: 'circle',
pointSize: 15,
tooltip : {
trigger: 'none'
},
width: 1280,
vAxis: {
gridlines: {
color: '#7acdd0',
count: 1
},
textPosition: 'none'
}
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="curve_chart"></div>