2
The Example chart below displays the Hours correctly:
HTML:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Javascript:
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('timeofday', 'Horario');
data.addColumn('number', 'Venda');
data.addColumn({type:'string', role:'annotation'});
data.addRows([
[{v: [8, 0, 0], f: '8 am'}, 5, '5'],
[{v: [9, 0, 0], f: '9 am'}, 2, '2'],
[{v: [10, 0, 0], f:'10 am'}, 3, '3'],
[{v: [11, 0, 0], f: '11 am'}, 4, '4']
]);
var options = {
title: 'Venda por Hora',
width: 700,
height: 350,
colors: ['#33ac71'],
backgroundColor: {
fill: 'silver',
fillOpacity: 0.2,
strokeWidth: 1
},
legend: {
position: "bottom",
textStyle: {
fontSize: 12
}
},
chartArea: {
left: 50,
top: 50,
width: "90%",
height: "70%"
},
Axis: {
title: 'Horario',
format: 'h:mm p',
viewWindow: {
min: [7, 30, 0],
max: [17, 30, 0]
},
}
};
var chart = new google.visualization.ColumnChart(
document.getElementById('chart_div'));
chart.draw(data, options);
}
The problem is that the string ":30" is added between the hours when I do the dynamic data matching that comes from the database:
$(response).each(function (i) {
data.addRows([
[{ v: [parseInt(response[i].HORA), 0, 0], f: response[i].HORA + ' horas' }, parseInt(response[i].VALOR), response[i].VALOR.toString()]
]);
});
When data returns from Database gets wrong:
Obs: The Time field returned from the database is a type Int
as the google example.