Google timeline chart should be blank

Question

I'm creating a Google TimeLine chart, which works well except for the fact that when there's no data to return a broken text is shown inside the chart area, which should just remain blank.

I already checked if it was some wrong return from my DB (I commented all the DB access code to ensure the list that fills the chart would return empty) and the error persist.

So my best shot is that the error is with some misconfiguration of the Google timeline chart area itself.

This is the code that works perfectly when there is data return:

google.charts.load('current', {'packages':['timeline']});
google.charts.setOnLoadCallback(drawChartTimeLine);

function reloadChartTimeLine(){
    var inidate=document.getElementById("inidate").value;
    var enddate=document.getElementById("enddate").value;
    var idRack=document.getElementById("idRack").value;
    
    jQuery.ajax({
          type: "POST",
          url: '<c:url value="/tracking/searchRackTimeLineByDate" />',
          data: { idRack: idRack, inidate: inidate, enddate:enddate },
          success:  function(data) { drawChartTimeLine(data);}
    });

}  

function drawChartTimeLine(response) {
    var data = new google.visualization.DataTable();
    var container = document.getElementById('chart_div');
    var chart = new google.visualization.Timeline(container);
    
    data.addColumn( 'string','Local' );
    data.addColumn( 'string','Situação' );
    data.addColumn( 'date', 'Início' );
    data.addColumn( 'date', 'Fim' );
     
    if(response!=undefined){
        response.forEach(function (row) {
            data.addRow([
                row.local,
                row.movementStatus,
                new Date(row.startDate), 
                new Date(row.endDate)
            ]);
        });
    }
    data.insertColumn(2, {type: 'string', role: 'tooltip', p: {html: true}});
    var dateFormat = new google.visualization.DateFormat({
          pattern: 'd/M/yy HH:mm:ss'
    });
    
    

    var options = {
            tooltip: {isHtml: true},
            hAxis:{format:"dd/M" },
            timeline: { showBarLabels: false},
            colors: ['#0f434c','#a30404'],
            
    };
    var ticks = [];
    for (var i = 0; i < data.getNumberOfRows(); i++) {
          ticks.push(data.getValue(i, 0));
          var duration = (data.getValue(i, 4).getTime() - data.getValue(i, 3).getTime()) / 1000;
          var days = parseInt( duration  / 86400 ) 
          var hours = parseInt( duration / 3600 ) % 24;
          var minutes = parseInt( duration / 60 ) % 60;
          var seconds = duration % 60;

          var tooltip = '<div class="ggl-tooltip"><span>' +
            data.getValue(i, 1) + '</span></div><div class="ggl-tooltip"><span>' +
            data.getValue(i, 0) + '</span>: ' +
            dateFormat.formatValue(data.getValue(i, 3)) + ' - ' +
            dateFormat.formatValue(data.getValue(i, 4)) + '</div>' +
            '<div class="ggl-tooltip"><span>Duração : </span>' +
            days + 'd '+hours + 'h ' + minutes + 'm ' + seconds + 's ';

          data.setValue(i, 2, tooltip);
        }
    options["hAxis"]["ticks"] = [0]
    chart.draw(data, options);
}

Here's a screenshot to the issue (there's no data to be returned in the selected period);

https://imgur.com/yKN9j9j

I selected and pasted the broken text and it goes "31/12" although in the chart canvas only a broken "/12" is visible. This same text occurs for every empty period.

Answer 1

A little late but I managed to show the chart without the canvas area when there's nothing to return just adding a lenght condition to use the response from ajax and putting all the code inside this condition as shown below; thanks for all the tips:

google.charts.load('current', {'packages':['timeline']});
google.charts.setOnLoadCallback(drawChartTimeLine);

function reloadChartTimeLine(){
    var inidate=document.getElementById("inidate").value;
    var enddate=document.getElementById("enddate").value;
    var idRack=document.getElementById("idRack").value;

    jQuery.ajax({
          type: "POST",
          url: '<c:url value="/tracking/searchRackTimeLineByDate" />',
          data: { idRack: idRack, inidate: inidate, enddate:enddate },
          success:  function(data) { drawChartTimeLine(data);}
    });

}  

function drawChartTimeLine(response) {
    var data = new google.visualization.DataTable();
    var container = document.getElementById('chart_div');
    var chart = new google.visualization.Timeline(container);

    data.addColumn( 'string','Local' );
    data.addColumn( 'string','Situação' );
    data.addColumn( 'date', 'Início' );
    data.addColumn( 'date', 'Fim' );

    if(response!=undefined && response.length>0){
        response.forEach(function (row) {
            data.addRow([
                row.local,
                row.movementStatus,
                new Date(row.startDate), 
                new Date(row.endDate)
            ]);
        });

        data.insertColumn(2, {type: 'string', role: 'tooltip', p: {html: true}});
        var dateFormat = new google.visualization.DateFormat({
              pattern: 'd/M/yy HH:mm:ss'
        });

        var options = {
                tooltip: {isHtml: true},
                hAxis:{format:"dd/M" },
                timeline: { showBarLabels: false},
                colors: ['#0f434c','#a30404'],

        };
        var ticks = [];
        for (var i = 0; i < data.getNumberOfRows(); i++) {
              ticks.push(data.getValue(i, 0));
              var duration = (data.getValue(i, 4).getTime() - data.getValue(i, 3).getTime()) / 1000;
              var days = parseInt( duration  / 86400 ) 
              var hours = parseInt( duration / 3600 ) % 24;
              var minutes = parseInt( duration / 60 ) % 60;
              var seconds = duration % 60;

              var tooltip = '<div class="ggl-tooltip"><span>' +
                data.getValue(i, 1) + '</span></div><div class="ggl-tooltip"><span>' +
                data.getValue(i, 0) + '</span>: ' +
                dateFormat.formatValue(data.getValue(i, 3)) + ' - ' +
                dateFormat.formatValue(data.getValue(i, 4)) + '</div>' +
                '<div class="ggl-tooltip"><span>Duração : </span>' +
                days + 'd '+hours + 'h ' + minutes + 'm ' + seconds + 's ';

              data.setValue(i, 2, tooltip);
            }
        options["hAxis"]["ticks"] = [0]
        chart.draw(data, options);
    }
}