I've implemented google charts api in my VF page. The script in VF goes as below.
<script type="text/javascript">
             
            google.setOnLoadCallback(drawChart);
           
            function drawChart() {
              var container = document.getElementById('example1');
           
              var chart = new google.visualization.Timeline(container);
           
              var dataTable = new google.visualization.DataTable();
           
              dataTable.addColumn({ type: 'string', id: 'Status' });
              dataTable.addColumn({ type: 'date', id: 'Start' });
              dataTable.addColumn({ type: 'date', id: 'End' });
           
              dataTable.addRows([
                [ 'Washington', new Date(1789, 3, 29), new Date(1797, 2, 3) ],
                [ 'Adams',      new Date(1797, 2, 3),  new Date(1801, 2, 3) ],
                [ 'Jefferson',  new Date(1801, 2, 3), new Date(1900, 2, 1)]]);
               
           
              chart.draw(dataTable);
            }
        </script>

The above is code from google and it renders a chart. But i need to have date from my controller. I tried using a date variable after declaring as get set. The variable was then used like this {!dateVariable}. Even then i couldn't make it work.

Is there any specific date format for timeline chart data?

Thanks in advance.