Sample Schedule, Later, Google Gantt Chart

5/10/2017 - 6:30 PM
Sample Schedule, Later, Google Gantt Chart

sample-shedule-later-google-gantt-chart.html
<!DOCTYPE html>
<html lang="en-US">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Schedule JS, Later, and Google Gantt Chart</title>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/themes/prism.min.css">

		<script src="https://cdnjs.cloudflare.com/ajax/libs/later/1.2.0/later.min.js"></script>
		<script>
			later.date.localTime();
		</script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/schedulejs/0.6.3/schedule.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
		<script src="https://www.gstatic.com/charts/loader.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script>
	</head>
	<body>
		<main class="container">
			<h1><a href="https://github.com/bunkat/schedule">Schedule</a>, <a href="https://bunkat.github.io/later/">Later</a>, and <a href="https://developers.google.com/chart/interactive/docs/gallery/ganttchart">Google Gantt Chart</a></h1>
			<hr>

			<h2>Basic Example</h2>
			<h3>Tasks</h3>
			<pre><code class="language-js">var tasks = [
	{id: 'SFNT page dev', duration: 600, resources: ['Jack']},
	{id: 'SFNT Mobile', duration: 30, dependsOn: ['SFNT page dev'], resources: ['Jack']},
	{id: 'CTGY page dev', duration: 30, dependsOn: ['SFNT page dev'], resources: ['Jill']}
];</code></pre>
			<h3>Resources</h3>
			<pre><code class="language-js">var work_availability = later.parse.text('after 9:00am and before 5:00pm every weekday');
var resources = [
	{id: 'Jack', available: work_availability},
	{id: 'Jill', available: work_availability}
];</code></pre>
			<script>
				// Prepare Work Day & Hour Availability
				// TODO: Set more elegant start date. Round to nearest 15 min

				// Define a set of tasks
				var tasks = [
					{id: 'SFNT page dev', duration: 600, resources: ['Jack']},
					{id: 'SFNT Mobile', duration: 30, dependsOn: ['SFNT page dev'], resources: ['Jack']},
					{id: 'CTGY page dev', duration: 30, dependsOn: ['SFNT page dev'], resources: ['Jill']}
				];

				// Define a set of resources
				var work_availability = later.parse.text('after 9:00am and before 5:00pm every weekday');
				var resources = [
					{id: 'Jack', available: work_availability},
					{id: 'Jill', available: work_availability}
				];

				// Create the schedule for all of the tasks
				var basic_schedule = schedule.create(tasks, resources);

				var minutesToMilliseconds = function(minutes){
					return minutes * 60 * 1000;
				}

				// Parse schedule for Display
				var parse_schedule = function(schedule){
					schedule.html = '';
					schedule.start_end_different = schedule.end - schedule.start;
					schedule.all_task_schedules = [];
					_.forEach(schedule.scheduledTasks, function(task, task_id){
						task.id = task_id;
						task.schedule.forEach(function(task_schedule){
							task_schedule.task = task;
							schedule.all_task_schedules.push(task_schedule);
						});
					});
					return schedule;
				};
				var parsed_schedule = parse_schedule(basic_schedule);

				// Display Parsed Schedule
				// Load the Visualization API and the core chart package.
				google.charts.load('current', {'packages':['gantt']});
				google.charts.setOnLoadCallback(drawChart);

				function daysToMilliseconds(days) {
					return days * 24 * 60 * 60 * 1000;
				}

				function drawChart() {

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

					var schedule_rows = parsed_schedule.all_task_schedules.map(function(task_schedule, i){
						var id_name = task_schedule.task.id + ' #' + i;
						var row = {
							id: id_name,
							name: id_name,
							start_date: new Date( task_schedule.start ),
							end_date: new Date( task_schedule.end ),
							duration: minutesToMilliseconds(task_schedule.duration),
							percent_complete: 0,
							dependencies: '' // task_schedule.resources.join(',')
						};
						return [row.id, row.name, row.start_date, row.end_date, row.duration, row.percent_complete, row.dependencies];
					});
					data.addRows(schedule_rows);

					var options = {
						height: 500
					};

					var chart = new google.visualization.Gantt(document.getElementById('gantt-chart'));

					chart.draw(data, options);
				}
			</script>

			<h3>Gantt Chart</h3>
			<div id="gantt-chart"></div>


			<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
			<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> -->
		</main>
	</body>
</html>
Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

Sample Schedule, Later, Google Gantt Chart
