Link to the website: http://tecnicosolarboat.tecnico.ulisboa.pt/boatdata/graficos.html
Then in the first selection box choose "Tensão Bateria" and in the second one choose "5 Horas".
As you can see there is no scale in the horizontal axis. If you chose "SOC" in the first selection box you can compare.
The comments in the code explains it better:
function VOLTAGE_chart() {
var tempo = document.getElementById("janela").value;
var mysqlData = $.ajax({
url: "php/voltage_chart.php",
dataType: "JSON",
async: false,
data:{},
success: function(x){
return x;
}
}).responseJSON;
if (mysqlData == null){
alert("Não há dados a apresentar!");
return;
}
var phpDate = mysqlData[0]["time"].split(/[^0-9]/);
var date = new Date (phpDate[0],phpDate[1]-1,phpDate[2],phpDate[3],phpDate[4],phpDate[5] );
var data = google.visualization.arrayToDataTable([
[{id: 'time', label: 'Time', type: 'date'},
{id: 'voltage', label: 'Voltage', type: 'number'}]
// using the above code cause the hAxes thicks to dissapear
/*['Time', 'Voltage']
[date, parseFloat(mysqlData[0]["Voltage"])]*/ // This works but I need to give the first row out of the for loop so that google chart understands the data type
]);
for (i = 0; i < Object.keys(mysqlData).length; i++) {
phpDate = mysqlData[i]["time"].split(/[^0-9]/);
date = new Date (phpDate[0],phpDate[1]-1,phpDate[2],phpDate[3],phpDate[4],phpDate[5] );
data.addRows([[date,parseFloat(mysqlData[i]["Voltage"])]]);
}
var startDate = new Date( date );
startDate.setMinutes(date.getMinutes() - tempo);
var options = {
title: 'Voltage',
legend: { position: 'none' },
vAxes:
{0: {title: 'Voltage (V)', viewWindow:{min:34, max:45}, gridlines: {count: 12}, ticks: [34,35,36,37,38,39,40,41,42,43,44,45] } },
hAxes: {0: {title: 'Time', format:'H:m:s', viewWindow: {min: startDate, max: date} } },
pointSize: 5
};
var chart = new google.visualization.LineChart(document.getElementById('VOLTAGE_chart'));
chart.draw(data, options);
}
Without object literal notation (this one is a different chart but the code is the same):
Sample of the data:
After 2 days of searching and testing I found out that changing "type: 'date'" to "type: 'datetime'" solved the problem.
Old code:
var data = google.visualization.arrayToDataTable([
[{id: 'time', label: 'Time', type: 'date'},
{id: 'voltage', label: 'Voltage', type: 'number'}]
Correct code:
var data = google.visualization.arrayToDataTable([
[{id: 'time', label: 'Time', type: 'datetime'},
{id: 'voltage', label: 'Voltage', type: 'number'}]