1 <?php ob_start('ob_gzhandler') ?>
5 <meta http-equiv="X-UA-Compatible" content="chrome=1">
8 * o------------------------------------------------------------------------------o
9 * | This file is part of the RGraph package - you can learn more at: |
11 * | http://www.rgraph.net |
13 * | This package is licensed under the RGraph license. For all kinds of business |
14 * | purposes there is a small one-time licensing fee to pay and for non |
15 * | commercial purposes it is free to use. You can read the full license here: |
17 * | http://www.rgraph.net/LICENSE.txt |
18 * o------------------------------------------------------------------------------o
21 <title>RGraph: HTML5 canvas graph library - gantt chart</title>
23 <meta name="keywords" content="rgraph html5 canvas example gantt chart" />
24 <meta name="description" content="RGraph: Gantt chart examples" />
26 <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
27 <link rel="icon" type="image/png" href="../images/favicon.png">
29 <script src="../libraries/RGraph.common.core.js" ></script>
30 <script src="../libraries/RGraph.common.context.js" ></script>
31 <script src="../libraries/RGraph.common.annotate.js" ></script>
32 <script src="../libraries/RGraph.common.tooltips.js" ></script>
33 <script src="../libraries/RGraph.common.zoom.js" ></script>
34 <script src="../libraries/RGraph.common.resizing.js" ></script>
35 <script src="../libraries/RGraph.gantt.js" ></script>
36 <!--[if IE 8]><script src="../excanvas/excanvas.compressed.js"></script><![endif]-->
40 color: #00a ! important;
44 color: black ! important;
49 window.onload = function ()
51 var gantt1 = new RGraph.Gantt('gantt1');
52 gantt1.Set('chart.xmax', 122);
53 gantt1.Set('chart.gutter', 35);
54 gantt1.Set('chart.labels', ['January', 'February', 'March', 'April']);
55 gantt1.Set('chart.title', 'Work schedule for Xyz Ltd (tooltips, context, zoom)');
56 gantt1.Set('chart.defaultcolor', '#faa');
57 gantt1.Set('chart.background.grid', false);
59 if (!RGraph.isIE8()) {
60 gantt1.Set('chart.tooltips', ["<b>Richard Crenshaw</b><br />Working through adding something<br /> to the website.",
61 "<b>Fred Bloggs</b><br />Building a new drive",
62 "<b>Barney Rubble</b><br />Not started adding the new garden",
63 "<b>Gloria Honeyford</b><br />Just started dinner",
64 "<b>Paul O'Grady</b><br />Nearly finished the front garden",
65 "<b>Harry Secombe</b><br />Roughly half way through the bible reading",
66 "<b>Shane Ritchy</b><br />Funny man",
67 "<b>Barry McGuigan</b><br />Beating up the gardener",
68 "<b>Cynthia Frances</b><br />Not entirely sure what she's doing",
69 "<b>Mabel Mincy</b><br />Making more mince.",
70 "<b>Paul McKenna</b><br />Putting everyone off their work",
71 "<b>Kiffen Sausage Farmer</b><br />Farming sausages",
72 "<b>John Doe</b><br />A deer"]);
73 gantt1.Set('chart.tooltips.effect', 'expand');
74 gantt1.Set('chart.zoom.hdir', 'center');
75 gantt1.Set('chart.zoom.vdir', 'center');
76 gantt1.Set('chart.contextmenu', [['Zoom in', RGraph.Zoom]]);
79 gantt1.Set('chart.events', [
80 [31, 28, 75, 'Richard'],
82 [59, 14, 0, 'Barney'],
83 [59, 21, 5, 'Gloria'],
85 [80, 21, 46, 'Harry'],
86 [94, 17, 84, 'Shane'],
87 [34, 14, 32, 'Barry'],
88 [64, 14, 28, 'Cynthia'],
89 [13, 61, 74, 'Mabel'],
91 [100, 22, 45, 'Kiffen'],
94 var color = 'rgba(192,255,192,0.5)';
95 gantt1.Set('chart.vbars', [
103 gantt1.Set('chart.borders', false);
107 var gantt3 = new RGraph.Gantt('gantt3');
108 gantt3.Set('chart.xmax', 365);
109 gantt3.Set('chart.title', 'Training completion (tooltips)');
110 gantt3.Set('chart.gutter', 35);
111 gantt3.Set('chart.color', '#fdd');
112 gantt3.Set('chart.defaultcolor', '#fdd');
113 gantt3.Set('chart.labels', ['Q1', 'Q2', 'Q3', 'Q4']);
114 gantt3.Set('chart.background.grid.autofit', true);
115 gantt3.Set('chart.events', [
116 [0, 98, 78, 'Richard'],
117 [30, 130, 50, 'Pete'],
118 [65, 114, 5, 'Gary'],
119 [88, 210, 97, 'Sean'],
120 [183, 75, 36, 'Michael', 'red']
123 if (!RGraph.isIE8()) {
124 gantt3.Set('chart.tooltips', ['<b>Richard</b><br />Richard is a top geezer. Guvnor.', '<b>Pete</b><br />Pete likes going out clubbing', '<b>Gary</b><br />Gary is a top geezer too', '<b>Sean</b><br />Sean is very good at what he does.<br />Backgammon.', '<b>Michael</b><br />Michael is a secret ninja']);
133 <!-- Social networking buttons -->
136 function HideTwitterDIV ()
138 document.getElementById("twitter_div").style.opacity = 0;
139 document.getElementById("twitter_div").style.display = 'none';
143 function ShowTwitterDIV (e)
145 var e = RGraph.FixEventObject(document.all ? event : e);
146 var div = document.getElementById("twitter_div");
147 var img = document.getElementById("twitter_icon");
149 div.style.display = 'block';
150 div.style.left = (RGraph.getCanvasXY(img)[0] + img.offsetWidth - div.offsetWidth + 110) + 'px';
151 div.style.top = (RGraph.getCanvasXY(img)[1] - 1) + 'px';
156 setTimeout('document.getElementById("twitter_div").style.opacity = 0.2;', 25);
157 setTimeout('document.getElementById("twitter_div").style.opacity = 0.4;', 50);
158 setTimeout('document.getElementById("twitter_div").style.opacity = 0.6;', 100);
159 setTimeout('document.getElementById("twitter_div").style.opacity = 0.8;', 125);
160 setTimeout('document.getElementById("twitter_div").style.opacity = 1.0;', 150);
168 * This code installs the event handler that hides the Twitter DIV
170 if (RGraph.isIE8()) {
171 window.attachEvent('onload', function () {document.body.attachEvent('onclick', HideTwitterDIV);});
173 window.addEventListener('click', HideTwitterDIV, false);
177 <!-- The twitter DIV -->
178 <div id="twitter_div" style="position: absolute;top: 0;left: 0;background-color: #eee;border: 2px dashed black;box-shadow: 0 0 15px #aaa;-moz-box-shadow: 0 0 15px #aaa;-webkit-box-shadow: 0 0 15px #aaa;padding: 3px;display: none;opacity: 0;z-index: 99;">
179 <a href="http://twitter.com/home/?status=RGraph%3A+HTML5+canvas+graph+library+based+on+the+HTML5+canvas+tag+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas" target="_blank" title="Share on Twitter" rel="nofollow" style="text-decoration: none">Tweet about RGraph</a><br>
180 <a href="http://twitter.com/_rgraph" style="text-decoration: none" rel="nofollow" target="_blank">Follow for HTML5 news</a>
183 <div id="social_icons" class="warning" style="top: 0; left: 5px; position: absolute">
186 if (navigator.userAgent.indexOf('Opera') == -1) {
187 document.getElementById("social_icons").style.position = 'fixed';
188 document.getElementById("twitter_div").style.position = 'fixed';
193 <b style="display: inline-block; position: relative; top: 1px">Bookmark and share:</b>
197 <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20graph%20library%20supporting%20a%20wide%20range%20of%20different%20graph%20types:Bar,%20Bipolar,%20Donut,%20Funnel,%20Gantt,%20Horizontal%20Bar,%20LED,%20Line,%20Meter,%20Odometer,%20Pie,%20Progress%20Bar,%20Rose,%20RScatter,%20Scatter%20and%20Traditional%20Radar&title=RGraph:%20HTML5%20canvas%20graph%20library%20based%20on%20the%20HTML5%20canvas%20tag" target="_blank">
198 <img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" align="absmiddle" />
201 <a href="" target="_blank" onmouseover="if (document.getElementById('twitter_div').style.display == 'none') ShowTwitterDIV(event);" onclick="event.stopPropagation(); event.cancelBubble = true; return false">
202 <img src="../images/twitter.png" id="twitter_icon" alt="tweet this site" width="22" height="22" border="0" align="absmiddle" />
207 <a title="Post to Google Buzz!" href="" onclick="window.open('http://www.google.com/buzz/post?url=http://www.rgraph.net&imageurl=http://www.rgraph.net/images/logo.png', 'google_buzz_window', 'width=800,height=400,top=100,left=100'); return false">
208 <img src="../images/buzz.png" width="22" height="22" alt="Post to Google Buzz!" align="absmiddle" style="position: relative; top: -2px; border: 0" border="0"/>
212 <a title="Share RGraph on Facebook" href="" onclick="window.open('http://www.facebook.com/sharer.php?u=http://www.rgraph.net&t=RGraph:%20HTML5%20canvas%20graph%20library', 'facebook_window', 'width=500,height=300,top=100,left=100'); return false">
213 <img src="../images/facebook.png" width="22" height="22" alt="Post to Facebook" align="absmiddle" style="position: relative; top: -2px; border: 0" border="0"/>
216 <a href="mailto:share@friendfeed.com" title="Share on FriendFeed">
217 <img src="../images/friendfeed.png" width="22" height="22" alt="Share on FriendFeed" border="0" align="absmiddle" />
220 <a href="http://www.stumbleupon.com/submit?url=http://www.rgraph.net" target="_blank" title="Share on StumbleUpon" >
221 <img src="../images/stumble.png" alt="Stumble! this site" width="22" height="22" border="0" align="absmiddle" />
226 <!-- /Social networking buttons -->
229 <div id="breadcrumb">
230 <a href="../index.html">RGraph: HTML5 canvas graph library</a>
232 <a href="./index.html">Examples</a>
237 <h1>RGraph: HTML5 canvas graph library - Gantt chart</h1>
240 if (RGraph.isIE8()) {
241 document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the graphs, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag. Click <a href="http://groups.google.com/group/rgraph/browse_thread/thread/c5651ff8c56b8f3c#" target="_blank">here</a> to see some screenshots.</div>');
247 A Gantt chart is used to show scheduling information. It is commonly used in project management but can also be used,
248 for example, to show holiday schedule information. In this case it would be easy to see when someone is unavailable.
249 The Gantt chart can have clickable bars that can be used to provide more detail. It can also show vertical bars
250 that can be used to indicate events, or as in the cases below, can be decorative.
254 The chart is made of "units", in this case 365. This represents days in a year. The labels are separate, being equally
255 spaced across the chart. This means you can use more meaningful labels, which are easier to comprehend. As in the
262 <li><a href="../docs/gantt.html">Gantt chart API documentation</a></li>
266 <div style="text-align: center">
267 <canvas id="gantt1" width="700" height="300">[No canvas support]</canvas>
268 <canvas id="gantt3" width="700" height="200">[No canvas support]</canvas>