RGraph/examples/gantt.html

   1 <?php ob_start('ob_gzhandler') ?>
   2 <!DOCTYPE html>
   3 <html>
   4 <head>
   5     <meta http-equiv="X-UA-Compatible" content="chrome=1">
   6     <!--
   7         /**
   8         * o------------------------------------------------------------------------------o
   9         * | This file is part of the RGraph package - you can learn more at:             |
  10         * |                                                                              |
  11         * |                          http://www.rgraph.net                               |
  12         * |                                                                              |
  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:  |
  16         * |                                                                              |
  17         * |                      http://www.rgraph.net/LICENSE.txt                       |
  18         * o------------------------------------------------------------------------------o
  19         */
  20     -->
  21     <title>RGraph: HTML5 canvas graph library - gantt chart</title>
  22
  23     <meta name="keywords" content="rgraph html5 canvas example gantt chart" />
  24     <meta name="description" content="RGraph: Gantt chart examples" />
  25
  26     <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
  27     <link rel="icon" type="image/png" href="../images/favicon.png">
  28
  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]-->
  37
  38     <style>
  39         .RGraph_tooltip {
  40             color: #00a ! important;
  41         }
  42
  43         .RGraph_tooltip b {
  44             color: black ! important;
  45         }
  46     </style>
  47
  48     <script>
  49         window.onload = function ()
  50         {
  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);
  58
  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]]);
  77             }
  78
  79             gantt1.Set('chart.events', [
  80                                  [31, 28, 75, 'Richard'],
  81                                  [12, 28, 67, 'Fred'],
  82                                  [59, 14, 0, 'Barney'],
  83                                  [59, 21, 5, 'Gloria'],
  84                                  [46, 31, 92, 'Paul'],
  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'],
  90                                  [84, 31, 16, 'Paul'],
  91                                  [100, 22, 45, 'Kiffen'],
  92                                  [0, 365, 50, 'John']
  93                                 ]);
  94             var color = 'rgba(192,255,192,0.5)';
  95             gantt1.Set('chart.vbars', [
  96                                        [0, 10, color],
  97                                        [20, 10, color],
  98                                        [40, 10, color],
  99                                        [60, 10, color],
 100                                        [80, 10, color],
 101                                        [100, 10, color]
 102                                       ]);
 103             gantt1.Set('chart.borders', false);
 104             gantt1.Draw();
 105
 106
 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']
 121                                 ]);
 122
 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']);
 125             }
 126
 127             gantt3.Draw();
 128         }
 129     </script>
 130 </head>
 131 <body>
 132
 133     <!-- Social networking buttons -->
 134
 135     <script>
 136         function HideTwitterDIV ()
 137         {
 138             document.getElementById("twitter_div").style.opacity = 0;
 139             document.getElementById("twitter_div").style.display = 'none';
 140         }
 141
 142
 143         function ShowTwitterDIV (e)
 144         {
 145             var e   = RGraph.FixEventObject(document.all ? event : e);
 146             var div = document.getElementById("twitter_div");
 147             var img = document.getElementById("twitter_icon");
 148
 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';
 152
 153             /**
 154             * Fade it in
 155             */
 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);
 161
 162             e.stopPropagation();
 163
 164             return false;
 165         }
 166
 167         /**
 168         * This code installs the event handler that hides the Twitter DIV
 169         */
 170         if (RGraph.isIE8()) {
 171              window.attachEvent('onload', function () {document.body.attachEvent('onclick', HideTwitterDIV);});
 172         } else {
 173             window.addEventListener('click', HideTwitterDIV, false);
 174         }
 175     </script>
 176
 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&nbsp;about&nbsp;RGraph</a><br>
 180         <a href="http://twitter.com/_rgraph" style="text-decoration: none" rel="nofollow" target="_blank">Follow for HTML5 news</a>
 181     </div>
 182
 183     <div id="social_icons" class="warning" style="top: 0; left: 5px; position: absolute">
 184         <script>
 185             // Opera fix
 186             if (navigator.userAgent.indexOf('Opera') == -1) {
 187               document.getElementById("social_icons").style.position = 'fixed';
 188               document.getElementById("twitter_div").style.position = 'fixed';
 189
 190             }
 191         </script>
 192
 193         <b style="display: inline-block; position: relative; top: 1px">Bookmark and share:</b>
 194
 195
 196             <div id="social">
 197                 <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net&notes=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" />
 199                 </a>
 200
 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" />
 203                 </a>
 204
 205
 206 <!--
 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"/>
 209                 </a>
 210
 211
 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"/>
 214                 </a>
 215
 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" />
 218                 </a>
 219
 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" />
 222                 </a>
 223 -->
 224             </div>
 225     </div>
 226     <!-- /Social networking buttons -->
 227
 228
 229 <div id="breadcrumb">
 230     <a href="../index.html">RGraph: HTML5 canvas graph library</a>
 231     >
 232     <a href="./index.html">Examples</a>
 233     >
 234     Gantt chart
 235 </div>
 236
 237     <h1>RGraph: HTML5 canvas graph library - Gantt chart</h1>
 238
 239     <script>
 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>');
 242         }
 243     </script>
 244
 245     <div>
 246         <p>
 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.
 251         </p>
 252
 253         <p>
 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
 256             example charts.
 257         </p>
 258     </div>
 259
 260     <div>
 261         <ul>
 262             <li><a href="../docs/gantt.html">Gantt chart API documentation</a></li>
 263         </ul>
 264     </div>
 265
 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>
 269     </div>
 270
 271 </body>
 272 </html>