/
gantt-dark.html
101 lines (90 loc) · 3.25 KB
/
gantt-dark.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html >
<html>
<head>
<link rel="stylesheet" href="demos.css" type="text/css" media="screen" />
<script src="../libraries/RGraph.common.core.js" ></script>
<script src="../libraries/RGraph.common.dynamic.js" ></script>
<script src="../libraries/RGraph.gantt.js" ></script>
<script src="demos.js" ></script>
<meta name="robots" content="noindex, nofollow" />
</head>
<body>
<h1>A timesheet-style Gantt chart</h1>
<div id="rgraph-demo-html">
<canvas id="cvs" width="1000" height="300" style="background-color: black">[No canvas support]</canvas>
</div>
<script>
// The "raw" original data (that could, for example,
// come from a server
worked = [
[0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0],
[0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
];
// Init this
data = [];
worked.forEach(function (v, k, arr)
{
// New row
var row = [];
// Go through each "row" of data and create the
// require array of objects for the Gantt chart
worked[k].forEach(function (v2,k2,arr2)
{
row.push({
start: k2,
duration: 1,
complete: v2 ? 100 : 0,
color: '#0c0',
background:'#333',
label: RGraph.DAYS_LONG[k]
});
});
data.push(row);
});
// Create the Gantt chart
gantt = new RGraph.Gantt({
id: 'cvs',
data: data,
options: {
marginTop: 45,
marginLeft: 150,
marginBottom: 35,
marginRight: 5,
textSize: 20,
textColor: 'white',
xaxisScaleMax: 24,
corners: 'round',
cornersRoundRadius: 100,
labelsComplete: false,
backgroundGrid: false,
xaxisLabelsSize: 16,
title: 'Completed work hours for X corp',
titleOffsety: 10,
xaxisLabels: [
'00','01','02','03','04','05','06','07','08','09','10','11',
'12','13','14','15','16','17','18','19','20','21','22','23'
]
}
}).on('draw', function (obj)
{
// Make all of the rects look rounded
for (var i=0; i<obj.coords.length; ++i) {
var x = obj.coords[i][0],
y = obj.coords[i][1],
w = obj.coords[i][2],
h = obj.coords[i][3];
obj.path(
'b lw 2 rr % % % % 5 s black',
x+1, y+1, w-2, h-2
);
}
}).draw();
</script>
<script>showSource()</script>
</body>
</html>