simple-gantt-chart
v0.0.5
Published
Very simple vanilla JavaScript library for displaying projects as Gantt Charts.
Downloads
57
Maintainers
doberkoflerReadme
Simple Gantt Chart
Very simple vanilla JavaScript library for displaying projects as Gantt Charts.
Install
npm i simple-gantt-chart
Usage
You can use this library as a script tag or you can import it as a npm module.
CommonJS
const {GanttChart} = require('simple-gantt-chart');ES2015 modules
import {GanttChart} from 'simple-gantt-chart'Example
<!DOCTYPE html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Gantt Chart Example</title>
<link rel="stylesheet" href="./node_modules/simple-gantt-chart/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: 100px; left: 100px; width: 1000px; height: 500px;"></div>
<script src="./node_modules/simple-gantt-chart/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.render(document.getElementById('gantt_here'));
</script>
</body>Release History
See the changelog.