Search code examples
javascriptchartsgoogle-apigoogle-visualizationobject-literal

Horizontal axis labels not appearing in Google charts when using object literal notation


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);
}

With object literal notation: with object literal

Without object literal notation (this one is a different chart but the code is the same): Without object literal notation:

Sample of the data:

enter image description here


Solution

  • 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'}]