libraries/RGraph.gantt.js

   1 7    /**
   2     * o------------------------------------------------------------------------------o
   3     * | This file is part of the RGraph package - you can learn more at:             |
   4     * |                                                                              |
   5     * |                          http://www.rgraph.net                               |
   6     * |                                                                              |
   7     * | This package is licensed under the RGraph license. For all kinds of business |
   8     * | purposes there is a small one-time licensing fee to pay and for non          |
   9     * | commercial  purposes it is free to use. You can read the full license here:  |
  10     * |                                                                              |
  11     * |                      http://www.rgraph.net/LICENSE.txt                       |
  12     * o------------------------------------------------------------------------------o
  13     */
  14
  15     if (typeof(RGraph) == 'undefined') RGraph = {};
  16
  17     /**
  18     * The gantt chart constructor
  19     *
  20     * @param object canvas The cxanvas object
  21     * @param array  data   The chart data
  22     */
  23     RGraph.Gantt = function (id)
  24     {
  25         // Get the canvas and context objects
  26         this.id      = id;
  27         this.canvas  = document.getElementById(id);
  28         this.context = this.canvas.getContext("2d");
  29         this.canvas.__object__ = this;
  30         this.type              = 'gantt';
  31         this.isRGraph          = true;
  32
  33
  34         /**
  35         * Compatibility with older browsers
  36         */
  37         RGraph.OldBrowserCompat(this.context);
  38
  39
  40         // Set some defaults
  41         this.properties = {
  42             'chart.background.barcolor1':   'white',
  43             'chart.background.barcolor2':   'white',
  44             'chart.background.grid':        true,
  45             'chart.background.grid.width':  1,
  46             'chart.background.grid.color':  '#ddd',
  47             'chart.background.grid.hsize':  20,
  48             'chart.background.grid.vsize':  20,
  49             'chart.background.grid.hlines': true,
  50             'chart.background.grid.vlines': true,
  51             'chart.background.grid.border': true,
  52             'chart.background.grid.autofit':false,
  53             'chart.background.grid.autofit.numhlines': 7,
  54             'chart.background.grid.autofit.numvlines': 20,
  55             'chart.background.vbars':       [],
  56             'chart.text.size':              10,
  57             'chart.text.font':              'Verdana',
  58             'chart.text.color':             'black',
  59             'chart.gutter':                 25,
  60             'chart.labels':                 [],
  61             'chart.margin':                 2,
  62             'chart.title':                  '',
  63             'chart.title.background':       null,
  64             'chart.title.hpos':             null,
  65             'chart.title.vpos':             null,
  66             'chart.events':                 [],
  67             'chart.borders':                true,
  68             'chart.defaultcolor':           'white',
  69             'chart.coords':                 [],
  70             'chart.tooltips':               [],
  71             'chart.tooltips.effect':         'fade',
  72             'chart.tooltips.css.class':      'RGraph_tooltip',
  73             'chart.tooltips.highlight':     true,
  74             'chart.xmin':                   0,
  75             'chart.xmax':                   0,
  76             'chart.contextmenu':            null,
  77             'chart.annotatable':            false,
  78             'chart.annotate.color':         'black',
  79             'chart.zoom.factor':            1.5,
  80             'chart.zoom.fade.in':           true,
  81             'chart.zoom.fade.out':          true,
  82             'chart.zoom.hdir':              'right',
  83             'chart.zoom.vdir':              'down',
  84             'chart.zoom.frames':            10,
  85             'chart.zoom.delay':             50,
  86             'chart.zoom.shadow':            true,
  87             'chart.zoom.mode':              'canvas',
  88             'chart.zoom.thumbnail.width':   75,
  89             'chart.zoom.thumbnail.height':  75,
  90             'chart.zoom.background':        true,
  91             'chart.zoom.action':            'zoom',
  92             'chart.resizable':              false
  93         }
  94
  95         // Check the common library has been included
  96         if (typeof(RGraph) == 'undefined') {
  97             alert('[GANTT] Fatal error: The common library does not appear to have been included');
  98         }
  99     }
 100
 101
 102     /**
 103     * A peudo setter
 104     *
 105     * @param name  string The name of the property to set
 106     * @param value mixed  The value of the property
 107     */
 108     RGraph.Gantt.prototype.Set = function (name, value)
 109     {
 110         this.properties[name.toLowerCase()] = value;
 111     }
 112
 113
 114     /**
 115     * A peudo getter
 116     *
 117     * @param name  string The name of the property to get
 118     */
 119     RGraph.Gantt.prototype.Get = function (name)
 120     {
 121         return this.properties[name.toLowerCase()];
 122     }
 123
 124
 125     /**
 126     * Draws the chart
 127     */
 128     RGraph.Gantt.prototype.Draw = function ()
 129     {
 130         /**
 131         * Fire the onbeforedraw event
 132         */
 133         RGraph.FireCustomEvent(this, 'onbeforedraw');
 134
 135         /**
 136         * Clear all of this canvases event handlers (the ones installed by RGraph)
 137         */
 138         RGraph.ClearEventListeners(this.id);
 139
 140         var gutter = this.Get('chart.gutter');
 141
 142         /**
 143         * Work out the graphArea
 144         */
 145         this.graphArea     = this.canvas.width - (2 * gutter);
 146         this.graphHeight   = this.canvas.height - (2 * gutter);
 147         this.numEvents     = this.Get('chart.events').length
 148         this.barHeight     = this.graphHeight / this.numEvents;
 149         this.halfBarHeight = this.barHeight / 2;
 150
 151         /**
 152         * Draw the background
 153         */
 154         RGraph.background.Draw(this);
 155
 156         /**
 157         * Draw a space for the left hand labels
 158         */
 159         this.context.beginPath();
 160         this.context.lineWidth   = 1;
 161         this.context.strokeStyle = this.Get('chart.background.grid.color');
 162         this.context.fillStyle   = 'white';
 163         this.context.fillRect(0,gutter - 5,gutter * 3, this.canvas.height - (2 * gutter) + 10);
 164         this.context.moveTo(gutter * 3, gutter);
 165         this.context.lineTo(gutter * 3, this.canvas.height - gutter);
 166
 167         this.context.stroke();
 168         this.context.fill();
 169
 170         /**
 171         * Draw the labels at the top
 172         */
 173         this.DrawLabels();
 174
 175         /**
 176         * Draw the events
 177         */
 178         this.DrawEvents();
 179
 180
 181         /**
 182         * Setup the context menu if required
 183         */
 184         if (this.Get('chart.contextmenu')) {
 185             RGraph.ShowContext(this);
 186         }
 187
 188         /**
 189         * If the canvas is annotatable, do install the event handlers
 190         */
 191         if (this.Get('chart.annotatable')) {
 192             RGraph.Annotate(this);
 193         }
 194
 195         /**
 196         * This bit shows the mini zoom window if requested
 197         */
 198         if (this.Get('chart.zoom.mode') == 'thumbnail' || this.Get('chart.zoom.mode') == 'area') {
 199             RGraph.ShowZoomWindow(this);
 200         }
 201
 202
 203         /**
 204         * This function enables resizing
 205         */
 206         if (this.Get('chart.resizable')) {
 207             RGraph.AllowResizing(this);
 208         }
 209
 210         /**
 211         * Fire the RGraph ondraw event
 212         */
 213         RGraph.FireCustomEvent(this, 'ondraw');
 214     }
 215
 216
 217     /**
 218     * Draws the labels at the top and the left of the chart
 219     */
 220     RGraph.Gantt.prototype.DrawLabels = function ()
 221     {
 222         var gutter = this.Get('chart.gutter');
 223
 224         this.context.beginPath();
 225         this.context.fillStyle = this.Get('chart.text.color');
 226
 227         /**
 228         * Draw the X labels at the top of the chart.
 229         */
 230         var labelSpace = (this.graphArea - (2 * gutter)) / this.Get('chart.labels').length;
 231         var xPos       = (3 * gutter) + (labelSpace / 2);
 232         this.context.strokeStyle = 'black'
 233
 234         for (i=0; i<this.Get('chart.labels').length; ++i) {
 235             RGraph.Text(this.context, this.Get('chart.text.font'), this.Get('chart.text.size'), xPos + (i * labelSpace), gutter * (3/4), String(this.Get('chart.labels')[i]), 'center', 'center');
 236         }
 237
 238         // Draw the vertical labels
 239         for (i=0; i<this.Get('chart.events').length; ++i) {
 240             var ev = this.Get('chart.events')[i];
 241             var x  = (3 * gutter);
 242             var y  = gutter + this.halfBarHeight + (i * this.barHeight);
 243
 244             RGraph.Text(this.context, this.Get('chart.text.font'), this.Get('chart.text.size'), x - 5, y, String(ev[3]), 'center', 'right');
 245         }
 246     }
 247
 248     /**
 249     * Draws the events to the canvas
 250     */
 251     RGraph.Gantt.prototype.DrawEvents = function ()
 252     {
 253         var canvas  = this.canvas;
 254         var context = this.context;
 255         var gutter  = this.Get('chart.gutter');
 256         var events  = this.Get('chart.events');
 257
 258         /**
 259         * Reset the coords array to prevent it growing
 260         */
 261         this.coords = [];
 262
 263         /**
 264         * First draw the vertical bars that have been added
 265         */
 266         if (this.Get('chart.vbars')) {
 267             for (i=0; i<this.Get('chart.vbars').length; ++i) {
 268                 // Boundary checking
 269                 if (this.Get('chart.vbars')[i][0] + this.Get('chart.vbars')[i][1] > this.Get('chart.xmax')) {
 270                     this.Get('chart.vbars')[i][1] = 364 - this.Get('chart.vbars')[i][0];
 271                 }
 272
 273                 var barX   = (3 * gutter) + ( (this.Get('chart.vbars')[i][0] - this.Get('chart.xmin')) / (this.Get('chart.xmax') - this.Get('chart.xmin')) ) * (this.graphArea - (2 * gutter) );
 274                 var barY   = gutter;
 275                 var width  = ( (this.graphArea - (2 * gutter)) / (this.Get('chart.xmax') - this.Get('chart.xmin')) ) * this.Get('chart.vbars')[i][1];
 276                 var height = canvas.height - (2 * gutter);
 277
 278                 // Right hand bounds checking
 279                 if ( (barX + width) > (this.canvas.width - gutter) ) {
 280                     width = this.canvas.width - gutter - barX;
 281                 }
 282
 283                 context.fillStyle = this.Get('chart.vbars')[i][2];
 284                 context.fillRect(barX, barY, width, height);
 285             }
 286         }
 287
 288
 289         /**
 290         * Draw the events
 291         */
 292         for (i=0; i<events.length; ++i) {
 293
 294             var ev  = events[i];
 295             var min = this.Get('chart.xmin');
 296
 297             context.beginPath();
 298             context.strokeStyle = 'black';
 299             context.fillStyle = ev[4] ? ev[4] : this.Get('chart.defaultcolor');
 300
 301             var barStartX  = (3 * gutter) + ( (ev[0] - min) / (this.Get('chart.xmax') - min)) * (this.graphArea - (2 * gutter) );
 302             //barStartX += this.margin;
 303             var barStartY  = gutter + (i * this.barHeight);
 304             var barWidth   = (ev[1] / (this.Get('chart.xmax') - min) ) * (this.graphArea - (2 * gutter));
 305
 306             /**
 307             * If the width is greater than the graph atrea, curtail it
 308             */
 309             if ( (barStartX + barWidth) > (canvas.width - gutter) ) {
 310                 barWidth = canvas.width - gutter - barStartX;
 311             }
 312
 313             // draw the border around the bar
 314             if (this.Get('chart.borders')) {
 315                 context.strokeStyle = 'black';
 316                 context.beginPath();
 317                 context.strokeRect(barStartX, barStartY + this.Get('chart.margin'), barWidth, this.barHeight - (2 * this.Get('chart.margin')) );
 318             }
 319
 320             /**
 321             *  Draw the actual bar storing store the coordinates
 322             */
 323             this.coords.push([barStartX, barStartY + this.Get('chart.margin'), barWidth, this.barHeight - (2 * this.Get('chart.margin'))]);
 324             context.fillRect(barStartX, barStartY + this.Get('chart.margin'), barWidth, this.barHeight - (2 * this.Get('chart.margin')) );
 325
 326             // Work out the completeage indicator
 327             var complete = (ev[2] / 100) * barWidth;
 328
 329             // Draw the % complete indicator. If it's greater than 0
 330             if (typeof(ev[2]) == 'number') {
 331                 context.beginPath();
 332                 context.fillStyle = ev[5] ? ev[5] : '#0c0';
 333                 context.fillRect(barStartX,
 334                                       barStartY + this.Get('chart.margin'),
 335                                       (ev[2] / 100) * barWidth,
 336                                       this.barHeight - (2 * this.Get('chart.margin')) );
 337
 338                 context.beginPath();
 339                 context.fillStyle = this.Get('chart.text.color');
 340                 RGraph.Text(context, this.Get('chart.text.font'), this.Get('chart.text.size'), barStartX + barWidth + 5, barStartY + this.halfBarHeight, String(ev[2]) + '%', 'center');
 341             }
 342         }
 343
 344
 345         /**
 346         * If tooltips are defined, handle them
 347         */
 348         if (this.Get('chart.tooltips')) {
 349
 350             // Register the object for redrawing
 351             RGraph.Register(this);
 352
 353             /**
 354             * If the cursor is over a hotspot, change the cursor to a hand
 355             */
 356             var canvas_onmousemove_func = function (eventObj)
 357             {
 358                 eventObj = RGraph.FixEventObject(eventObj);
 359                 var canvas = eventObj.target;
 360                 var obj    = canvas.__object__;
 361                 var len    = obj.coords.length;
 362
 363                 /**
 364                 * Get the mouse X/Y coordinates
 365                 */
 366                 var mouseCoords = RGraph.getMouseXY(eventObj);
 367
 368                 /**
 369                 * Loop through the bars determining if the mouse is over a bar
 370                 */
 371                 for (var i=0; i<len; i++) {
 372
 373                     var mouseX = mouseCoords[0];  // In relation to the canvas
 374                     var mouseY = mouseCoords[1];  // In relation to the canvas
 375                     var left   = obj.coords[i][0];
 376                     var top    = obj.coords[i][1];
 377                     var width  = obj.coords[i][2];
 378                     var height = obj.coords[i][3];
 379
 380                     if (   mouseX >= left
 381                         && mouseX <= (left + width)
 382                         && mouseY >= top
 383                         && mouseY <= (top + height)
 384                         && (typeof(obj.Get('chart.tooltips')) == 'function' || obj.Get('chart.tooltips')[i]) ) {
 385
 386                         canvas.style.cursor = 'pointer';
 387                         return;
 388                     }
 389                 }
 390
 391                 canvas.style.cursor = 'default';
 392             }
 393             this.canvas.addEventListener('mousemove', canvas_onmousemove_func, false);
 394             RGraph.AddEventListener(this.id, 'mousemove', canvas_onmousemove_func);
 395
 396
 397             var canvas_onclick_func = function (eventObj)
 398             {
 399                 eventObj = RGraph.FixEventObject(eventObj);
 400
 401                 var canvas  = eventObj.target;
 402                 var context = canvas.getContext('2d');
 403                 var obj     = canvas.__object__;
 404
 405                 var mouseCoords = RGraph.getMouseXY(eventObj);
 406                 var mouseX      = mouseCoords[0];
 407                 var mouseY      = mouseCoords[1];
 408
 409
 410                 for (i=0; i<obj.coords.length; ++i) {
 411
 412                     var idx = i;
 413                     var xCoord = obj.coords[i][0];
 414                     var yCoord = obj.coords[i][1];
 415                     var width  = obj.coords[i][2];
 416                     var height = obj.coords[i][3];
 417
 418                     if (
 419                            mouseX >= xCoord
 420                         && (mouseX <= xCoord + width)
 421                         && mouseY >= yCoord
 422                         && (mouseY <= yCoord + height)
 423                         && obj.Get('chart.tooltips')
 424                        ) {
 425
 426                        // Redraw the graph
 427                         RGraph.Redraw();
 428
 429                         /**
 430                         * Get the tooltip text
 431                         */
 432                         if (typeof(obj.Get('chart.tooltips')) == 'function') {
 433                             var text = obj.Get('chart.tooltips')(idx);
 434
 435                         } else if (typeof(obj.Get('chart.tooltips')) == 'object' && typeof(obj.Get('chart.tooltips')[idx]) == 'function') {
 436                             var text = obj.Get('chart.tooltips')[idx](idx);
 437
 438                         } else if (typeof(obj.Get('chart.tooltips')) == 'object') {
 439                             var text = obj.Get('chart.tooltips')[idx];
 440
 441                         } else {
 442                             var text = null;
 443                         }
 444
 445                         if (String(text).length && text != null) {
 446
 447                             // SHOW THE CORRECT TOOLTIP
 448                             RGraph.Tooltip(canvas, text, eventObj.pageX, eventObj.pageY, idx);
 449
 450                             /**
 451                             * Draw a rectangle around the correct bar, in effect highlighting it
 452                             */
 453                             context.strokeStyle = 'black';
 454                             context.fillStyle = 'rgba(255,255,255,0.8)';
 455                             context.strokeRect(xCoord, yCoord, width, height);
 456                             context.fillRect(xCoord, yCoord, width, height);
 457
 458                             eventObj.stopPropagation();
 459                         }
 460                         return;
 461                     }
 462                 }
 463             }
 464             this.canvas.addEventListener('click', canvas_onclick_func, false);
 465             RGraph.AddEventListener(this.id, 'click', canvas_onclick_func);
 466         }
 467     }