Google Chart - google chart tutorial - Basic Timelines Chart - chart js - google graphs - google charts examples




What is Timelines Chart

  • A timeline is a chart that depicts how a set of resources are used over time.
  • If you're managing a software project and want to illustrate who is doing what and when, or if you're organizing a conference and need to schedule meeting rooms, a timeline is often a reasonable visualization choice.
  • One popular type of timeline is the Gantt chart.

Configurations:

  • We've used Timeline class to show timelines diagram.
//Timeline chart
var chart = new google.visualization.Timeline(document.getElementById('container'));
Clicking "Copy Code" button to copy the code. From - google charts tutorial - team

Example:

googlecharts-timelines-basic.html

 Tryit<html>
<head>
<title>Google Charts - Tutorials</title>
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script type="text/javascript" src="https://www.google.com/jsapi"></script>
   <script type="text/javascript">
     google.charts.load('current', {packages: ['timeline']});     
   </script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
function drawChart() {
   // Define the chart to be drawn.
   var data = new google.visualization.DataTable();
   data.addColumn({ type: 'string', id: 'President' });
   data.addColumn({ type: 'date', id: 'Start' });
   data.addColumn({ type: 'date', id: 'End' });
   data.addRows([
      [ 'Washington', new Date(1783, 3, 30), new Date(1794, 2, 4) ],
      [ 'Adams',      new Date(1792, 2, 4),  new Date(1801, 2, 4) ],
      [ 'Jefferson',  new Date(1803, 2, 4),  new Date(1802, 2, 4) ]]);

   var options = {      
      width: '100%', 
	  height: '100%'
   };
		
   // Instantiate and draw the chart.
   var chart = new google.visualization.Timeline(document.getElementById('container'));
   chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>
Clicking "Copy Code" button to copy the code. From - google charts tutorial - team

Output:


Related Searches to Google Chart - Basic Timelines Chart

Adblocker detected! Please consider reading this notice.

We've detected that you are using AdBlock Plus or some other adblocking software which is preventing the page from fully loading.

We don't have any banner, Flash, animation, obnoxious sound, or popup ad. We do not implement these annoying types of ads!

We need money to operate the site, and almost all of it comes from our online advertising.

Please add wikitechy.com to your ad blocking whitelist or disable your adblocking software.

×