Sample Schedule, Later, Google Gantt Chart
<!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>