Google chart DateFormatter - Javascript Google Chart

Javascript examples for Google Chart:Chart Configuration

  1. HOME
  2. Javascript
  3. Google Chart
  4. Chart Configuration

Description

Google chart DateFormatter

Demo Code

ResultView the demo in separate window 

<html lang="en">
   <head> 
      <title>  Thein</title> 
   </head> 
   <body translate="no"> 
      <script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script> 
      <div id="chart_div"> 
         <script>
      google.charts.load('current', {
  'packages': ['timeline']
});//  w  w w .  j  a  va2 s . com
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Activity', 'Start Time', 'End Time'],
    ['Sleep',
      new Date(2014, 10, 15, 0, 30),
      new Date(2014, 10, 15, 6, 30)
    ],
    ['Eat Breakfast',
      new Date(2014, 10, 15, 6, 45),
      new Date(2014, 10, 15, 7)
    ],
    ['Get Ready',
      new Date(2014, 10, 15, 7, 4),
      new Date(2014, 10, 15, 7, 30)
    ],
    ['Commute To Work',
      new Date(2014, 10, 15, 7, 30),
      new Date(2014, 10, 15, 8, 30)
    ],
    ['Work',
      new Date(2014, 10, 15, 8, 30),
      new Date(2014, 10, 15, 17)
    ],
    ['Commute Home',
      new Date(2014, 10, 15, 17),
      new Date(2014, 10, 15, 18)
    ],
    ['Gym',
      new Date(2014, 10, 15, 18),
      new Date(2014, 10, 15, 18, 45)
    ],
    ['Eat Dinner',
      new Date(2014, 10, 15, 19),
      new Date(2014, 10, 15, 20)
    ],
    ['Get Ready For Bed',
      new Date(2014, 10, 15, 21),
      new Date(2014, 10, 15, 22)
    ]
  ]);
  var options = {
    height: 450,
  };
  var chart = new google.visualization.Timeline(document.getElementById('chart_div'));
  chart.draw(data, options);
}
         </script>  
      </div>
   </body>
</html>

Related Tutorials