Gantt Chart Example

An example of a Google Gantt Chart.

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
     <div id="chart_div"></div>

JavaScript

google.charts.load('current', {'packages':['gantt'], 'language': 'pt-br'});
			google.charts.setOnLoadCallback(drawChart);

			function drawChart() {

			var data = new google.visualization.DataTable();
			data.addColumn('string', 'Task ID');
			data.addColumn('string', 'Task Name');
			data.addColumn('string', 'Resource');
			data.addColumn('date', 'Start Date');
			data.addColumn('date', 'End Date');
			data.addColumn('number', 'Duration');
			data.addColumn('number', 'Percent done');
			data.addColumn('string', 'Dependencies');

			data.addRows([
			
			['C10', 'C10', 'Xa', new Date(2015, 3, 20), new Date(2016, 8, 30), null, 109, null],
			['C15', 'C15', 'Xa', new Date(2016, 5, 2), new Date(2016, 9, 31), null, 111, null],
			['C20', 'C20', 'Xa', new Date(2016, 8, 15), new Date(2016, 10, 25), null, 88, null],
			['C21', 'C21', 'Xa', new Date(2016, 8, 1), new Date(2016, 10, 25), null, 90, null]
			]);
		
			var options = {
				width: "100%",
				hAxis: {
					textStyle: {
						fontName: ["Roboto Condensed"]
					}
				},
				gantt: {
					labelStyle: {
					fontSize: 12,
					color: '#757575'
					}
				}
			};
			
			var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
			chart.draw(data, options);
			}