simple-gantt-chart
Version:
Very simple vanilla JavaScript library for displaying projects as Gantt Charts.
30 lines (29 loc) • 1.26 kB
HTML
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Gantt Chart Example</title>
<link rel="stylesheet" href="../../dist/index.css">
<style>
html {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
}
</style>
</head>
<body>
<div id="gantt_here" style="position: absolute; top: 10px; left: 10px; width: 1000px; height: 500px;"></div>
<script src="../../dist/index.js"></script>
<script>
const gantt = new ganttchart.GanttChart();
gantt.setData([
{id: 1, text: 'Planning', startDate: new Date('2020-01-01'), days: 1},
{id: 2, text: 'Analysis', startDate: new Date('2020-01-02'), days: 1, dependencies: [1]},
{id: 3, text: 'Design', startDate: new Date('2020-01-04'), days: 2, dependencies: [2]},
{id: 4, text: 'Implementation', startDate: new Date('2020-01-07'), days: 2, dependencies: [3]},
{id: 5, text: 'Testing', startDate: new Date('2020-01-07'), days: 2, dependencies: [3]},
{id: 6, text: 'Deployment', startDate: new Date('2020-01-10'), days: 2, dependencies: [4, 5]},
]);
gantt.attachTaskClickEvent('click', task => alert(`clicked on task ${task.id}`));
gantt.render(document.getElementById('gantt_here'));
</script>
</body>