Date position for Google Gantt chart

Question

Google Graphic Timeline

I’m using Gantt’s chart, from the Google documentation, follow my graphic image below:

I want the chart dates to be at the top of the chart, not at the bottom.

I found nothing in the documentation, and all the other charts I looked at from google, presentation in footer, as a pattern.

Google documentation:

https://developers.google.com/chart/interactive/docs/drawing_charts#Chart.draw

https://developers.google.com/chart/interactive/docs/gallery/timeline

https://developers.google.com/chart/interactive/docs/gallery/timeline#an-Advanced-example

https://developers.google.com/chart/interactive/docs/lines

https://developers.google.com/chart/interactive/docs/datesandtimes

My code:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["timeline"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var container   = document.getElementById('timeline');
    var chart       = new google.visualization.Timeline(container);
    var dataTable   = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string',   id: 'Position' });
    dataTable.addColumn({ type: 'string',   id: 'President' });
    dataTable.addColumn({ type: 'date'  ,   id: 'Start' });
    dataTable.addColumn({ type: 'date'  ,   id: 'End' });
    dataTable.addRows([
        <?php
        while (!$rs->EOF){
            $html .= "
                      [
                          '{$dados['nome']}',                
                          '{$dados['etapa_nome']}',
                          new Date({$dados['data_inicial'][0]},
                          {$dados['data_inicial'][1]},
                          {$dados['data_inicial'][2]}),
                          new Date({$dados['data_final'][0]},
                          {$dados['data_final'][1]},
                          {$dados['data_final'][2]})
                      ]
                ,
            ";
            $rs->MoveNext();
        }
        $html = substr($html, 0, -1);
        echo $html;
        ?>
   ]); 
var options = {
    avoidOverlappingGridLines: false
  };
    chart.draw(dataTable, options);
}
    </script>

Someone knows which parameter, and if you have how to change the position ?

Answer 1

Opa define this in your options:

var options = {
   axes: {
      x: {
        0: {side: 'top'}
      }
    },
    avoidOverlappingGridLines: false
};

That will solve :)