libraries/RGraph.common.core.js

   1     /**
   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     /**
  16     * Initialise the various objects
  17     */
  18     if (typeof(RGraph) == 'undefined') RGraph = {isRGraph:true,type:'common'};
  19
  20
  21     RGraph.Registry       = {};
  22     RGraph.Registry.store = [];
  23     RGraph.Registry.store['chart.event.handlers'] = [];
  24     RGraph.background     = {};
  25     RGraph.objects        = [];
  26     RGraph.Resizing       = {};
  27     RGraph.events         = [];
  28
  29
  30
  31     /**
  32     * Returns five values which are used as a nice scale
  33     *
  34     * @param  max int    The maximum value of the graph
  35     * @param  obj object The graph object
  36     * @return     array   An appropriate scale
  37     */
  38     RGraph.getScale = function (max, obj)
  39     {
  40         /**
  41         * Special case for 0
  42         */
  43         if (max == 0) {
  44             return ['0.2', '0.4', '0.6', '0.8', '1.0'];
  45         }
  46
  47         var original_max = max;
  48
  49         /**
  50         * Manually do decimals
  51         */
  52         if (max <= 1) {
  53             if (max > 0.5) {
  54                 return [0.2,0.4,0.6,0.8, Number(1).toFixed(1)];
  55
  56             } else if (max >= 0.1) {
  57                 return obj.Get('chart.scale.round') ? [0.2,0.4,0.6,0.8,1] : [0.1,0.2,0.3,0.4,0.5];
  58
  59             } else {
  60
  61                 var tmp = max;
  62                 var exp = 0;
  63
  64                 while (tmp < 1.01) {
  65                     exp += 1;
  66                     tmp *= 10;
  67                 }
  68
  69                 var ret = ['2e-' + exp, '4e-' + exp, '6e-' + exp, '8e-' + exp, '10e-' + exp];
  70
  71
  72                 if (max <= ('5e-' + exp)) {
  73                     ret = ['1e-' + exp, '2e-' + exp, '3e-' + exp, '4e-' + exp, '5e-' + exp];
  74                 }
  75
  76                 return ret;
  77             }
  78         }
  79
  80         // Take off any decimals
  81         if (String(max).indexOf('.') > 0) {
  82             max = String(max).replace(/\.\d+$/, '');
  83         }
  84
  85         var interval = Math.pow(10, Number(String(Number(max)).length - 1));
  86         var topValue = interval;
  87
  88         while (topValue < max) {
  89             topValue += (interval / 2);
  90         }
  91
  92         // Handles cases where the max is (for example) 50.5
  93         if (Number(original_max) > Number(topValue)) {
  94             topValue += (interval / 2);
  95         }
  96
  97         // Custom if the max is greater than 5 and less than 10
  98         if (max < 10) {
  99             topValue = (Number(original_max) <= 5 ? 5 : 10);
 100         }
 101
 102         /**
 103         * Added 02/11/2010 to create "nicer" scales
 104         */
 105         if (obj && typeof(obj.Get('chart.scale.round')) == 'boolean' && obj.Get('chart.scale.round')) {
 106             topValue = 10 * interval;
 107         }
 108
 109         return [topValue * 0.2, topValue * 0.4, topValue * 0.6, topValue * 0.8, topValue];
 110     }
 111
 112
 113     /**
 114     * Returns the maximum value which is in an array
 115     *
 116     * @param  array arr The array
 117     * @param  int       Whether to ignore signs (ie negative/positive)
 118     * @return int       The maximum value in the array
 119     */
 120     RGraph.array_max = function (arr)
 121     {
 122         var max = null;
 123
 124         for (var i=0; i<arr.length; ++i) {
 125             if (typeof(arr[i]) == 'number') {
 126                 max = (max ? Math.max(max, arguments[1] ? Math.abs(arr[i]) : arr[i]) : arr[i]);
 127             }
 128         }
 129
 130         return max;
 131     }
 132
 133
 134     /**
 135     * Returns the maximum value which is in an array
 136     *
 137     * @param  array arr The array
 138     * @param  int   len The length to pad the array to
 139     * @param  mixed     The value to use to pad the array (optional)
 140     */
 141     RGraph.array_pad = function (arr, len)
 142     {
 143         if (arr.length < len) {
 144             var val = arguments[2] ? arguments[2] : null;
 145
 146             for (var i=arr.length; i<len; ++i) {
 147                 arr[i] = val;
 148             }
 149         }
 150
 151         return arr;
 152     }
 153
 154
 155     /**
 156     * An array sum function
 157     *
 158     * @param  array arr The  array to calculate the total of
 159     * @return int       The summed total of the arrays elements
 160     */
 161     RGraph.array_sum = function (arr)
 162     {
 163         // Allow integers
 164         if (typeof(arr) == 'number') {
 165             return arr;
 166         }
 167
 168         var i, sum;
 169         var len = arr.length;
 170
 171         for(i=0,sum=0;i<len;sum+=arr[i++]);
 172         return sum;
 173     }
 174
 175
 176
 177     /**
 178     * A simple is_array() function
 179     *
 180     * @param  mixed obj The object you want to check
 181     * @return bool      Whether the object is an array or not
 182     */
 183     RGraph.is_array = function (obj)
 184     {
 185         return obj != null && obj.constructor.toString().indexOf('Array') != -1;
 186     }
 187
 188
 189     /**
 190     * Converts degrees to radians
 191     *
 192     * @param  int degrees The number of degrees
 193     * @return float       The number of radians
 194     */
 195     RGraph.degrees2Radians = function (degrees)
 196     {
 197         return degrees * (Math.PI / 180);
 198     }
 199
 200
 201     /**
 202     * This function draws an angled line. The angle is cosidered to be clockwise
 203     *
 204     * @param obj ctxt   The context object
 205     * @param int x      The X position
 206     * @param int y      The Y position
 207     * @param int angle  The angle in RADIANS
 208     * @param int length The length of the line
 209     */
 210     RGraph.lineByAngle = function (context, x, y, angle, length)
 211     {
 212         context.arc(x, y, length, angle, angle, false);
 213         context.lineTo(x, y);
 214         context.arc(x, y, length, angle, angle, false);
 215     }
 216
 217
 218     /**
 219     * This is a useful function which is basically a shortcut for drawing left, right, top and bottom alligned text.
 220     *
 221     * @param object context The context
 222     * @param string font    The font
 223     * @param int    size    The size of the text
 224     * @param int    x       The X coordinate
 225     * @param int    y       The Y coordinate
 226     * @param string text    The text to draw
 227     * @parm  string         The vertical alignment. Can be null. "center" gives center aligned  text, "top" gives top aligned text.
 228     *                       Anything else produces bottom aligned text. Default is bottom.
 229     * @param  string        The horizontal alignment. Can be null. "center" gives center aligned  text, "right" gives right aligned text.
 230     *                       Anything else produces left aligned text. Default is left.
 231     * @param  bool          Whether to show a bounding box around the text. Defaults not to
 232     * @param int            The angle that the text should be rotate at (IN DEGREES)
 233     * @param string         Background color for the text
 234     * @param bool           Whether the text is bold or not
 235     * @param bool           Whether the bounding box has a placement indicator
 236     */
 237     RGraph.Text = function (context, font, size, x, y, text)
 238     {
 239         /**
 240         * This calls the text function recursively to accommodate multi-line text
 241         */
 242         if (typeof(text) == 'string' && text.match(/\r?\n/)) {
 243
 244             var nextline = text.replace(/^.*\r?\n/, '');
 245
 246             RGraph.Text(context, font, size, arguments[9] == -90 ? (x + (size * 1.5)) : x, y + (size * 1.5), nextline, arguments[6] ? arguments[6] : null, 'center', arguments[8], arguments[9], arguments[10], arguments[11], arguments[12]);
 247
 248             text = text.replace(/\r?\n.*$/, '');
 249
 250         }
 251
 252
 253         // Accommodate MSIE
 254         if (RGraph.isIE8()) {
 255             y += 2;
 256         }
 257
 258
 259         context.font = (arguments[11] ? 'Bold ': '') + size + 'pt ' + font;
 260
 261         var i;
 262         var origX = x;
 263         var origY = y;
 264         var originalFillStyle = context.fillStyle;
 265         var originalLineWidth = context.lineWidth;
 266
 267         // Need these now the angle can be specified, ie defaults for the former two args
 268         if (typeof(arguments[6]) == null) arguments[6]  = 'bottom'; // Vertical alignment. Default to bottom/baseline
 269         if (typeof(arguments[7]) == null) arguments[7]  = 'left';   // Horizontal alignment. Default to left
 270         if (typeof(arguments[8]) == null) arguments[8]  = null;     // Show a bounding box. Useful for positioning during development. Defaults to false
 271         if (typeof(arguments[9]) == null) arguments[9]  = 0;        // Angle (IN DEGREES) that the text should be drawn at. 0 is middle right, and it goes clockwise
 272         if (typeof(arguments[12]) == null) arguments[12] = true;    // Whether the bounding box has the placement indicator
 273
 274         // The alignment is recorded here for purposes of Opera compatibility
 275         if (navigator.userAgent.indexOf('Opera') != -1) {
 276             context.canvas.__rgraph_valign__ = arguments[6];
 277             context.canvas.__rgraph_halign__ = arguments[7];
 278         }
 279
 280         // First, translate to x/y coords
 281         context.save();
 282
 283             context.canvas.__rgraph_originalx__ = x;
 284             context.canvas.__rgraph_originaly__ = y;
 285
 286             context.translate(x, y);
 287             x = 0;
 288             y = 0;
 289
 290             // Rotate the canvas if need be
 291             if (arguments[9]) {
 292                 context.rotate(arguments[9] / 57.3);
 293             }
 294
 295             // Vertical alignment - defaults to bottom
 296             if (arguments[6]) {
 297                 var vAlign = arguments[6];
 298
 299                 if (vAlign == 'center') {
 300                     context.translate(0, size / 2);
 301                 } else if (vAlign == 'top') {
 302                     context.translate(0, size);
 303                 }
 304             }
 305
 306
 307             // Hoeizontal alignment - defaults to left
 308             if (arguments[7]) {
 309                 var hAlign = arguments[7];
 310                 var width  = context.measureText(text).width;
 311
 312                 if (hAlign) {
 313                     if (hAlign == 'center') {
 314                         context.translate(-1 * (width / 2), 0)
 315                     } else if (hAlign == 'right') {
 316                         context.translate(-1 * width, 0)
 317                     }
 318                 }
 319             }
 320
 321
 322             context.fillStyle = originalFillStyle;
 323
 324             /**
 325             * Draw a bounding box if requested
 326             */
 327             context.save();
 328                  context.fillText(text,0,0);
 329                  context.lineWidth = 0.5;
 330
 331                 if (arguments[8]) {
 332
 333                     var width = context.measureText(text).width;
 334                     var ieOffset = RGraph.isIE8() ? 2 : 0;
 335
 336                     context.translate(x, y);
 337                     context.strokeRect(0 - 3, 0 - 3 - size - ieOffset, width + 6, 0 + size + 6);
 338
 339                     /**
 340                     * If requested, draw a background for the text
 341                     */
 342                     if (arguments[10]) {
 343
 344                         var offset = 3;
 345                         var ieOffset = RGraph.isIE8() ? 2 : 0;
 346                         var width = context.measureText(text).width
 347
 348                         //context.strokeStyle = 'gray';
 349                         context.fillStyle = arguments[10];
 350                         context.fillRect(x - offset, y - size - offset - ieOffset, width + (2 * offset), size + (2 * offset));
 351                         //context.strokeRect(x - offset, y - size - offset - ieOffset, width + (2 * offset), size + (2 * offset));
 352                     }
 353
 354                     /**
 355                     * Do the actual drawing of the text
 356                     */
 357                     context.fillStyle = originalFillStyle;
 358                     context.fillText(text,0,0);
 359
 360                     if (arguments[12]) {
 361                         context.fillRect(
 362                             arguments[7] == 'left' ? 0 : (arguments[7] == 'center' ? width / 2 : width ) - 2,
 363                             arguments[6] == 'bottom' ? 0 : (arguments[6] == 'center' ? (0 - size) / 2 : 0 - size) - 2,
 364                             4,
 365                             4
 366                         );
 367                     }
 368                 }
 369             context.restore();
 370
 371             // Reset the lineWidth
 372             context.lineWidth = originalLineWidth;
 373
 374         context.restore();
 375     }
 376
 377
 378     /**
 379     * Clears the canvas by setting the width. You can specify a colour if you wish.
 380     *
 381     * @param object canvas The canvas to clear
 382     */
 383     RGraph.Clear = function (canvas)
 384     {
 385         var context = canvas.getContext('2d');
 386
 387         context.fillStyle = arguments[1] ? String(arguments[1]) : 'white';
 388
 389         context = canvas.getContext('2d');
 390         context.beginPath();
 391         context.fillRect(-5,-5,canvas.width + 5,canvas.height + 5);
 392         context.fill();
 393
 394         if (RGraph.ClearAnnotations) {
 395             RGraph.ClearAnnotations(canvas.id);
 396         }
 397     }
 398
 399
 400     /**
 401     * Draws the title of the graph
 402     *
 403     * @param object  canvas The canvas object
 404     * @param string  text   The title to write
 405     * @param integer gutter The size of the gutter
 406     * @param integer        The center X point (optional - if not given it will be generated from the canvas width)
 407     * @param integer        Size of the text. If not given it will be 14
 408     */
 409     RGraph.DrawTitle = function (canvas, text, gutter)
 410     {
 411         var obj     = canvas.__object__;
 412         var context = canvas.getContext('2d');
 413         var size    = arguments[4] ? arguments[4] : 12;
 414         var centerx = (arguments[3] ? arguments[3] : canvas.width / 2);
 415         var keypos  = obj.Get('chart.key.position');
 416         var vpos    = gutter / 2;
 417         var hpos    = obj.Get('chart.title.hpos');
 418         var bgcolor = obj.Get('chart.title.background');
 419
 420         // Account for 3D effect by faking the key position
 421         if (obj.type == 'bar' && obj.Get('chart.variant') == '3d') {
 422             keypos = 'gutter';
 423         }
 424
 425         context.beginPath();
 426         context.fillStyle = obj.Get('chart.text.color') ? obj.Get('chart.text.color') : 'black';
 427
 428         /**
 429         * Vertically center the text if the key is not present
 430         */
 431         if (keypos && keypos != 'gutter') {
 432             var vCenter = 'center';
 433
 434         } else if (!keypos) {
 435             var vCenter = 'center';
 436
 437         } else {
 438             var vCenter = 'bottom';
 439         }
 440
 441         // if chart.title.vpos does not equal 0.5, use that
 442         if (typeof(obj.Get('chart.title.vpos')) == 'number') {
 443             vpos = obj.Get('chart.title.vpos') * gutter;
 444         }
 445
 446         // if chart.title.hpos is a number, use that. It's multiplied with the (entire) canvas width
 447         if (typeof(hpos) == 'number') {
 448             centerx = hpos * canvas.width;
 449         }
 450
 451         // Set the colour
 452         if (typeof(obj.Get('chart.title.color') != null)) {
 453             var oldColor = context.fillStyle
 454             var newColor = obj.Get('chart.title.color')
 455             context.fillStyle = newColor ? newColor : 'black';
 456         }
 457
 458         /**
 459         * Default font is Verdana
 460         */
 461         var font = obj.Get('chart.text.font');
 462
 463         /**
 464         * Draw the title itself
 465         */
 466         RGraph.Text(context, font, size, centerx, vpos, text, vCenter, 'center', bgcolor != null, null, bgcolor, true);
 467
 468         // Reset the fill colour
 469         context.fillStyle = oldColor;
 470     }
 471
 472
 473     /**
 474     * This function returns the mouse position in relation to the canvas
 475     *
 476     * @param object e The event object.
 477     */
 478     RGraph.getMouseXY = function (e)
 479     {
 480         var obj = (RGraph.isIE8() ? event.srcElement : e.target);
 481         var x;
 482         var y;
 483
 484         if (RGraph.isIE8()) e = event;
 485
 486         // Browser with offsetX and offsetY
 487         if (typeof(e.offsetX) == 'number' && typeof(e.offsetY) == 'number') {
 488             x = e.offsetX;
 489             y = e.offsetY;
 490
 491         // FF and other
 492         } else {
 493             x = 0;
 494             y = 0;
 495
 496             while (obj != document.body && obj) {
 497                 x += obj.offsetLeft;
 498                 y += obj.offsetTop;
 499
 500                 obj = obj.offsetParent;
 501             }
 502
 503             x = e.pageX - x;
 504             y = e.pageY - y;
 505         }
 506
 507         return [x, y];
 508     }
 509
 510
 511     /**
 512     * This function returns a two element array of the canvas x/y position in
 513     * relation to the page
 514     *
 515     * @param object canvas
 516     */
 517     RGraph.getCanvasXY = function (canvas)
 518     {
 519         var x   = 0;
 520         var y   = 0;
 521         var obj = canvas;
 522
 523         do {
 524
 525             x += obj.offsetLeft;
 526             y += obj.offsetTop;
 527
 528             obj = obj.offsetParent;
 529
 530         } while (obj && obj.tagName.toLowerCase() != 'body');
 531
 532         return [x, y];
 533     }
 534
 535
 536     /**
 537     * Registers a graph object (used when the canvas is redrawn)
 538     *
 539     * @param object obj The object to be registered
 540     */
 541     RGraph.Register = function (obj)
 542     {
 543         var key = obj.id + '_' + obj.type;
 544
 545         RGraph.objects[key] = obj;
 546     }
 547
 548
 549     /**
 550     * Causes all registered objects to be redrawn
 551     *
 552     * @param string   An optional string indicating which canvas is not to be redrawn
 553     * @param string An optional color to use to clear the canvas
 554     */
 555     RGraph.Redraw = function ()
 556     {
 557         for (i in RGraph.objects) {
 558             // TODO FIXME Maybe include more intense checking for whether the object is an RGraph object, eg obj.isRGraph == true ...?
 559             if (
 560                    typeof(i) == 'string'
 561                 && typeof(RGraph.objects[i]) == 'object'
 562                 && typeof(RGraph.objects[i].type) == 'string'
 563                 && RGraph.objects[i].isRGraph)  {
 564
 565                 if (!arguments[0] || arguments[0] != RGraph.objects[i].id) {
 566                     RGraph.Clear(RGraph.objects[i].canvas, arguments[1] ? arguments[1] : null);
 567                     RGraph.objects[i].Draw();
 568                 }
 569             }
 570         }
 571     }
 572
 573
 574     /**
 575     * Loosly mimicks the PHP function print_r();
 576     */
 577     RGraph.pr = function (obj)
 578     {
 579         var str = '';
 580         var indent = (arguments[2] ? arguments[2] : '');
 581
 582         switch (typeof(obj)) {
 583             case 'number':
 584                 if (indent == '') {
 585                     str+= 'Number: '
 586                 }
 587                 str += String(obj);
 588                 break;
 589
 590             case 'string':
 591                 if (indent == '') {
 592                     str+= 'String (' + obj.length + '):'
 593                 }
 594                 str += '"' + String(obj) + '"';
 595                 break;
 596
 597             case 'object':
 598                 // In case of null
 599                 if (obj == null) {
 600                     str += 'null';
 601                     break;
 602                 }
 603
 604                 str += 'Object\n' + indent + '(\n';
 605
 606                 for (var i=0; i<obj.length; ++i) {
 607                     str += indent + ' ' + i + ' => ' + RGraph.pr(obj[i], true, indent + '    ') + '\n';
 608                 }
 609
 610                 var str = str + indent + ')';
 611                 break;
 612
 613             case 'function':
 614                 str += obj;
 615                 break;
 616
 617             case 'boolean':
 618                 str += 'Boolean: ' + (obj ? 'true' : 'false');
 619                 break;
 620         }
 621
 622         /**
 623         * Finished, now either return if we're in a recursed call, or alert()
 624         * if we're not.
 625         */
 626         if (arguments[1]) {
 627             return str;
 628         } else {
 629             alert(str);
 630         }
 631     }
 632
 633
 634     /**
 635     * The RGraph registry Set() function
 636     *
 637     * @param  string name  The name of the key
 638     * @param  mixed  value The value to set
 639     * @return mixed        Returns the same value as you pass it
 640     */
 641     RGraph.Registry.Set = function (name, value)
 642     {
 643         // Store the setting
 644         RGraph.Registry.store[name] = value;
 645
 646         // Don't really need to do this, but ho-hum
 647         return value;
 648     }
 649
 650
 651     /**
 652     * The RGraph registry Get() function
 653     *
 654     * @param  string name The name of the particular setting to fetch
 655     * @return mixed       The value if exists, null otherwise
 656     */
 657     RGraph.Registry.Get = function (name)
 658     {
 659         //return RGraph.Registry.store[name] == null ? null : RGraph.Registry.store[name];
 660         return RGraph.Registry.store[name];
 661     }
 662
 663
 664     /**
 665     * This function draws the background for the bar chart, line chart and scatter chart.
 666     *
 667     * @param  object obj The graph object
 668     */
 669     RGraph.background.Draw = function (obj)
 670     {
 671         var canvas  = obj.canvas;
 672         var context = obj.context;
 673         var height  = 0;
 674         var gutter  = obj.Get('chart.gutter');
 675         var variant = obj.Get('chart.variant');
 676
 677         context.fillStyle = obj.Get('chart.text.color');
 678
 679         // If it's a bar and 3D variant, translate
 680         if (variant == '3d') {
 681             context.save();
 682             context.translate(10, -5);
 683         }
 684
 685         // X axis title
 686         if (typeof(obj.Get('chart.title.xaxis')) == 'string' && obj.Get('chart.title.xaxis').length) {
 687
 688             var size = obj.Get('chart.text.size');
 689             var font = obj.Get('chart.text.font');
 690
 691             context.beginPath();
 692             RGraph.Text(context, font, size + 2, obj.canvas.width / 2, canvas.height - (gutter * obj.Get('chart.title.xaxis.pos')), obj.Get('chart.title.xaxis'), 'center', 'center', false, false, false, true);
 693             context.fill();
 694         }
 695
 696         // Y axis title
 697         if (typeof(obj.Get('chart.title.yaxis')) == 'string' && obj.Get('chart.title.yaxis').length) {
 698
 699             var size = obj.Get('chart.text.size');
 700             var font = obj.Get('chart.text.font');
 701
 702             context.beginPath();
 703             RGraph.Text(context, font, size + 2, gutter * obj.Get('chart.title.yaxis.pos'), canvas.height / 2, obj.Get('chart.title.yaxis'), 'center', 'center', false, 270, false, true);
 704             context.fill();
 705         }
 706
 707         obj.context.beginPath();
 708
 709         // Draw the horizontal bars
 710         context.fillStyle = obj.Get('chart.background.barcolor1');
 711         height = (obj.canvas.height - obj.Get('chart.gutter'));
 712
 713         for (var i=gutter; i < height ; i+=80) {
 714             obj.context.fillRect(gutter, i, obj.canvas.width - (gutter * 2), Math.min(40, obj.canvas.height - gutter - i) );
 715         }
 716
 717         context.fillStyle = obj.Get('chart.background.barcolor2');
 718         height = (obj.canvas.height - gutter);
 719
 720         for (var i= (40 + gutter); i < height; i+=80) {
 721             obj.context.fillRect(gutter, i, obj.canvas.width - (gutter * 2), i + 40 > (obj.canvas.height - gutter) ? obj.canvas.height - (gutter + i) : 40);
 722         }
 723
 724         context.stroke();
 725
 726
 727         // Draw the background grid
 728         if (obj.Get('chart.background.grid')) {
 729
 730             // If autofit is specified, use the .numhlines and .numvlines along with the width to work
 731             // out the hsize and vsize
 732             if (obj.Get('chart.background.grid.autofit')) {
 733                 var vsize = (canvas.width - (2 * obj.Get('chart.gutter')) - (obj.type == 'gantt' ? 2 * obj.Get('chart.gutter') : 0)) / obj.Get('chart.background.grid.autofit.numvlines');
 734                 var hsize = (canvas.height - (2 * obj.Get('chart.gutter'))) / obj.Get('chart.background.grid.autofit.numhlines');
 735
 736                 obj.Set('chart.background.grid.vsize', vsize);
 737                 obj.Set('chart.background.grid.hsize', hsize);
 738             }
 739
 740             context.beginPath();
 741             context.lineWidth = obj.Get('chart.background.grid.width') ? obj.Get('chart.background.grid.width') : 1;
 742             context.strokeStyle = obj.Get('chart.background.grid.color');
 743
 744             // Draw the horizontal lines
 745             if (obj.Get('chart.background.grid.hlines')) {
 746                 height = (canvas.height - gutter)
 747                 for (y=gutter; y < height; y+=obj.Get('chart.background.grid.hsize')) {
 748                     context.moveTo(gutter, y);
 749                     context.lineTo(canvas.width - gutter, y);
 750                 }
 751             }
 752
 753             if (obj.Get('chart.background.grid.vlines')) {
 754                 // Draw the vertical lines
 755                 var width = (canvas.width - gutter)
 756                 for (x=gutter + (obj.type == 'gantt' ? (2 * gutter) : 0); x<=width; x+=obj.Get('chart.background.grid.vsize')) {
 757                     context.moveTo(x, gutter);
 758                     context.lineTo(x, obj.canvas.height - gutter);
 759                 }
 760             }
 761
 762             if (obj.Get('chart.background.grid.border')) {
 763                 // Make sure a rectangle, the same colour as the grid goes around the graph
 764                 context.strokeStyle = obj.Get('chart.background.grid.color');
 765                 context.strokeRect(gutter, gutter, canvas.width - (2 * gutter), canvas.height - (2 * gutter));
 766             }
 767         }
 768
 769         context.stroke();
 770
 771         // If it's a bar and 3D variant, translate
 772         if (variant == '3d') {
 773             context.restore();
 774         }
 775
 776         // Draw the title if one is set
 777         if ( typeof(obj.Get('chart.title')) == 'string') {
 778
 779             if (obj.type == 'gantt') {
 780                 gutter /= 2;
 781             }
 782
 783             RGraph.DrawTitle(canvas, obj.Get('chart.title'), gutter, null, obj.Get('chart.text.size') + 2);
 784         }
 785
 786         context.stroke();
 787     }
 788
 789
 790     /**
 791     * Returns the day number for a particular date. Eg 1st February would be 32
 792     *
 793     * @param   object obj A date object
 794     * @return  int        The day number of the given date
 795     */
 796     RGraph.GetDays = function (obj)
 797     {
 798         var year  = obj.getFullYear();
 799         var days  = obj.getDate();
 800         var month = obj.getMonth();
 801
 802         if (month == 0) return days;
 803         if (month >= 1) days += 31;
 804         if (month >= 2) days += 28;
 805
 806             // Leap years. Crude, but if this code is still being used
 807             // when it stops working, then you have my permission to shoot
 808             // me. Oh, you won't be able to - I'll be dead...
 809             if (year >= 2008 && year % 4 == 0) days += 1;
 810
 811         if (month >= 3) days += 31;
 812         if (month >= 4) days += 30;
 813         if (month >= 5) days += 31;
 814         if (month >= 6) days += 30;
 815         if (month >= 7) days += 31;
 816         if (month >= 8) days += 31;
 817         if (month >= 9) days += 30;
 818         if (month >= 10) days += 31;
 819         if (month >= 11) days += 30;
 820
 821         return days;
 822     }
 823
 824
 825
 826
 827
 828
 829
 830
 831
 832
 833
 834
 835
 836
 837
 838     /**
 839     * Draws the graph key (used by various graphs)
 840     *
 841     * @param object obj The graph object
 842     * @param array  key An array of the texts to be listed in the key
 843     * @param colors An array of the colors to be used
 844     */
 845     RGraph.DrawKey = function (obj, key, colors)
 846     {
 847         var canvas  = obj.canvas;
 848         var context = obj.context;
 849         context.lineWidth = 1;
 850
 851         context.beginPath();
 852
 853         /**
 854         * Key positioned in the gutter
 855         */
 856         var keypos   = obj.Get('chart.key.position');
 857         var textsize = obj.Get('chart.text.size');
 858         var gutter   = obj.Get('chart.gutter');
 859
 860         /**
 861         * Change the older chart.key.vpos to chart.key.position.y
 862         */
 863         if (typeof(obj.Get('chart.key.vpos')) == 'number') {
 864             obj.Set('chart.key.position.y', obj.Get('chart.key.vpos') * gutter);
 865         }
 866
 867         if (keypos && keypos == 'gutter') {
 868
 869             RGraph.DrawKey_gutter(obj, key, colors);
 870
 871
 872         /**
 873         * In-graph style key
 874         */
 875         } else if (keypos && keypos == 'graph') {
 876
 877             RGraph.DrawKey_graph(obj, key, colors);
 878
 879         } else {
 880             alert('[COMMON] (' + obj.id + ') Unknown key position: ' + keypos);
 881         }
 882     }
 883
 884
 885
 886
 887
 888     /**
 889     * This does the actual drawing of the key when it's in the graph
 890     *
 891     * @param object obj The graph object
 892     * @param array  key The key items to draw
 893     * @param array colors An aray of colors that the key will use
 894     */
 895     RGraph.DrawKey_graph = function (obj, key, colors)
 896     {
 897         var canvas      = obj.canvas;
 898         var context     = obj.context;
 899         var text_size   = typeof(obj.Get('chart.key.text.size')) == 'number' ? obj.Get('chart.key.text.size') : obj.Get('chart.text.size');
 900         var text_font   = obj.Get('chart.text.font');
 901         var gutter      = obj.Get('chart.gutter');
 902         var hpos        = obj.Get('chart.yaxispos') == 'right' ? gutter + 10 : canvas.width - gutter - 10;
 903         var vpos        = gutter + 10;
 904         var title       = obj.Get('chart.title');
 905         var blob_size   = text_size; // The blob of color
 906         var hmargin      = 8; // This is the size of the gaps between the blob of color and the text
 907         var vmargin      = 4; // This is the vertical margin of the key
 908         var fillstyle   = obj.Get('chart.key.background');
 909         var strokestyle = 'black';
 910         var height      = 0;
 911         var width       = 0;
 912
 913
 914         // Need to set this so that measuring the text works out OK
 915         context.font = text_size + 'pt ' + obj.Get('chart.text.font');
 916
 917         // Work out the longest bit of text
 918         for (i=0; i<key.length; ++i) {
 919             width = Math.max(width, context.measureText(key[i]).width);
 920         }
 921
 922         width += 5;
 923         width += blob_size;
 924         width += 5;
 925         width += 5;
 926         width += 5;
 927
 928         /**
 929         * Now we know the width, we can move the key left more accurately
 930         */
 931         if (   obj.Get('chart.yaxispos') == 'left'
 932             || (obj.type == 'pie' && !obj.Get('chart.yaxispos'))
 933             || (obj.type == 'hbar' && !obj.Get('chart.yaxispos'))
 934             || (obj.type == 'rscatter' && !obj.Get('chart.yaxispos'))
 935             || (obj.type == 'tradar' && !obj.Get('chart.yaxispos'))
 936             || (obj.type == 'rose' && !obj.Get('chart.yaxispos'))
 937             || (obj.type == 'funnel' && !obj.Get('chart.yaxispos'))
 938            ) {
 939
 940             hpos -= width;
 941         }
 942
 943         /**
 944         * Specific location coordinates
 945         */
 946         if (typeof(obj.Get('chart.key.position.x')) == 'number') {
 947             hpos = obj.Get('chart.key.position.x');
 948         }
 949
 950         if (typeof(obj.Get('chart.key.position.y')) == 'number') {
 951             vpos = obj.Get('chart.key.position.y');
 952         }
 953
 954
 955         // Stipulate the shadow for the key box
 956         if (obj.Get('chart.key.shadow')) {
 957             context.shadowColor   = obj.Get('chart.key.shadow.color');
 958             context.shadowBlur    = obj.Get('chart.key.shadow.blur');
 959             context.shadowOffsetX = obj.Get('chart.key.shadow.offsetx');
 960             context.shadowOffsetY = obj.Get('chart.key.shadow.offsety');
 961         }
 962
 963
 964
 965
 966         // Draw the box that the key resides in
 967         context.beginPath();
 968             context.fillStyle   = obj.Get('chart.key.background');
 969             context.strokeStyle = 'black';
 970
 971
 972         if (arguments[3] != false) {
 973             /*
 974             // Manually draw the MSIE shadow
 975             if (RGraph.isIE8() && obj.Get('chart.key.shadow')) {
 976                 context.beginPath();
 977                 context.fillStyle   = '#666';
 978
 979                 if (obj.Get('chart.key.rounded')) {
 980                     RGraph.NoShadow(obj);
 981                     context.beginPath();
 982                         RGraph.filledCurvyRect(context,
 983                                                xpos + obj.Get('chart.key.shadow.offsetx'),
 984                                                gutter + 5 + obj.Get('chart.key.shadow.offsety'),
 985                                                width - 5,
 986                                                5 + ( (textsize + 5) * key.length),
 987                                                5);
 988                     context.closePath();
 989                     context.fill();
 990
 991                 } else {
 992                     context.fillRect(xpos + 2, gutter + 5 + 2, width - 5, 5 + ( (textsize + 5) * key.length));
 993                 }
 994                 context.fill();
 995                 context.fillStyle   = obj.Get('chart.key.background');
 996             }
 997             */
 998
 999             // The older square rectangled key
1000             if (obj.Get('chart.key.rounded') == true) {
1001                 context.beginPath();
1002                     context.strokeStyle = strokestyle;
1003                     RGraph.strokedCurvyRect(context, hpos, vpos, width - 5, 5 + ( (text_size + 5) * key.length),4);
1004
1005                 context.stroke();
1006                 context.fill();
1007
1008                 RGraph.NoShadow(obj);
1009
1010             } else {
1011                 context.strokeRect(hpos, vpos, width - 5, 5 + ( (text_size + 5) * key.length));
1012                 context.fillRect(hpos, vpos, width - 5, 5 + ( (text_size + 5) * key.length));
1013             }
1014         }
1015
1016         RGraph.NoShadow(obj);
1017
1018         context.beginPath();
1019             // Draw the labels given
1020             for (var i=key.length - 1; i>=0; i--) {
1021                 var j = Number(i) + 1;
1022
1023                 // Draw the blob of color
1024                 if (obj.Get('chart.key.color.shape') == 'circle') {
1025                     context.beginPath();
1026                         context.strokeStyle = 'rgba(0,0,0,0)';
1027                         context.fillStyle = colors[i];
1028                         context.arc(hpos + 5 + (blob_size / 2), vpos + (5 * j) + (text_size * j) - text_size + (blob_size / 2), blob_size / 2, 0, 6.26, 0);
1029                     context.fill();
1030
1031                 } else if (obj.Get('chart.key.color.shape') == 'line') {
1032                     context.beginPath();
1033                         context.strokeStyle = colors[i];
1034                         context.moveTo(hpos + 5, vpos + (5 * j) + (text_size * j) - text_size + (blob_size / 2));
1035                         context.lineTo(hpos + blob_size + 5, vpos + (5 * j) + (text_size * j) - text_size + (blob_size / 2));
1036                     context.stroke();
1037
1038                 } else {
1039                     context.fillStyle =  colors[i];
1040                     context.fillRect(hpos + 5, vpos + (5 * j) + (text_size * j) - text_size, text_size, text_size + 1);
1041                 }
1042
1043                 context.beginPath();
1044
1045                 context.fillStyle = 'black';
1046
1047                 RGraph.Text(context,
1048                             text_font,
1049                             text_size,
1050                             hpos + blob_size + 5 + 5,
1051                             vpos + (5 * j) + (text_size * j),
1052                             key[i]);
1053             }
1054         context.fill();
1055     }
1056
1057
1058
1059
1060
1061
1062     /**
1063     * This does the actual drawing of the key when it's in the gutter
1064     *
1065     * @param object obj The graph object
1066     * @param array  key The key items to draw
1067     * @param array colors An aray of colors that the key will use
1068     */
1069     RGraph.DrawKey_gutter = function (obj, key, colors)
1070     {
1071         var canvas      = obj.canvas;
1072         var context     = obj.context;
1073         var text_size   = typeof(obj.Get('chart.key.text.size')) == 'number' ? obj.Get('chart.key.text.size') : obj.Get('chart.text.size');
1074         var text_font   = obj.Get('chart.text.font');
1075         var gutter      = obj.Get('chart.gutter');
1076         var hpos        = canvas.width / 2;
1077         var vpos        = (gutter / 2) - 5;
1078         var title       = obj.Get('chart.title');
1079         var blob_size   = text_size; // The blob of color
1080         var hmargin      = 8; // This is the size of the gaps between the blob of color and the text
1081         var vmargin      = 4; // This is the vertical margin of the key
1082         var fillstyle   = obj.Get('chart.key.background');
1083         var strokestyle = 'black';
1084         var length      = 0;
1085
1086
1087
1088         // Need to work out the length of the key first
1089         context.font = text_size + 'pt ' + text_font;
1090         for (i=0; i<key.length; ++i) {
1091             length += hmargin;
1092             length += blob_size;
1093             length += hmargin;
1094             length += context.measureText(key[i]).width;
1095         }
1096         length += hmargin;
1097
1098
1099
1100
1101         /**
1102         * Work out hpos since in the Pie it isn't necessarily dead center
1103         */
1104         if (obj.type == 'pie') {
1105             if (obj.Get('chart.align') == 'left') {
1106                 var hpos = obj.radius + obj.Get('chart.gutter');
1107
1108             } else if (obj.Get('chart.align') == 'right') {
1109                 var hpos = obj.canvas.width - obj.radius - obj.Get('chart.gutter');
1110
1111             } else {
1112                 hpos = canvas.width / 2;
1113             }
1114         }
1115
1116
1117
1118
1119
1120         /**
1121         * This makes the key centered
1122         */
1123         hpos -= (length / 2);
1124
1125
1126         /**
1127         * Override the horizontal/vertical positioning
1128         */
1129         if (typeof(obj.Get('chart.key.position.x')) == 'number') {
1130             hpos = obj.Get('chart.key.position.x');
1131         }
1132         if (typeof(obj.Get('chart.key.position.y')) == 'number') {
1133             vpos = obj.Get('chart.key.position.y');
1134         }
1135
1136
1137
1138         /**
1139         * Draw the box that the key sits in
1140         */
1141         if (obj.Get('chart.key.position.gutter.boxed')) {
1142
1143             if (obj.Get('chart.key.shadow')) {
1144                 context.shadowColor   = obj.Get('chart.key.shadow.color');
1145                 context.shadowBlur    = obj.Get('chart.key.shadow.blur');
1146                 context.shadowOffsetX = obj.Get('chart.key.shadow.offsetx');
1147                 context.shadowOffsetY = obj.Get('chart.key.shadow.offsety');
1148             }
1149
1150
1151             context.beginPath();
1152                 context.fillStyle = fillstyle;
1153                 context.strokeStyle = strokestyle;
1154
1155                 if (obj.Get('chart.key.rounded')) {
1156                     RGraph.strokedCurvyRect(context, hpos, vpos - vmargin, length, text_size + vmargin + vmargin)
1157                     // Odd... RGraph.filledCurvyRect(context, hpos, vpos - vmargin, length, text_size + vmargin + vmargin);
1158                 } else {
1159                     context.strokeRect(hpos, vpos - vmargin, length, text_size + vmargin + vmargin);
1160                     context.fillRect(hpos, vpos - vmargin, length, text_size + vmargin + vmargin);
1161                 }
1162
1163             context.stroke();
1164             context.fill();
1165
1166
1167             RGraph.NoShadow(obj);
1168         }
1169
1170
1171         /**
1172         * Draw the blobs of color and the text
1173         */
1174         for (var i=0, pos=hpos; i<key.length; ++i) {
1175             pos += hmargin;
1176
1177             // Draw the blob of color - line
1178             if (obj.Get('chart.key.color.shape') =='line') {
1179
1180                 context.beginPath();
1181                     context.strokeStyle = colors[i];
1182                     context.moveTo(pos, vpos + (blob_size / 2));
1183                     context.lineTo(pos + blob_size, vpos + (blob_size / 2));
1184                 context.stroke();
1185
1186             // Circle
1187             } else if (obj.Get('chart.key.color.shape') == 'circle') {
1188
1189                 context.beginPath();
1190                     context.fillStyle = colors[i];
1191                     context.moveTo(pos, vpos + (blob_size / 2));
1192                     context.arc(pos + (blob_size / 2), vpos + (blob_size / 2), (blob_size / 2), 0, 6.28, 0);
1193                 context.fill();
1194
1195
1196             } else {
1197
1198                 context.beginPath();
1199                     context.fillStyle = colors[i];
1200                     context.fillRect(pos, vpos, blob_size, blob_size);
1201                 context.fill();
1202             }
1203
1204             pos += blob_size;
1205
1206             pos += hmargin;
1207
1208             context.beginPath();
1209                 context.fillStyle = 'black';
1210                 RGraph.Text(context, text_font, text_size, pos, vpos + text_size - 1, key[i]);
1211             context.fill();
1212             pos += context.measureText(key[i]).width;
1213         }
1214     }
1215
1216
1217
1218
1219
1220
1221     /**
1222     * A shortcut for RGraph.pr()
1223     */
1224     function pd(variable)
1225     {
1226         RGraph.pr(variable);
1227     }
1228
1229     function p(variable)
1230     {
1231         RGraph.pr(variable);
1232     }
1233
1234     /**
1235     * A shortcut for console.log - as used by Firebug and Chromes console
1236     */
1237     function cl (variable)
1238     {
1239         return console.log(variable);
1240     }
1241
1242
1243     /**
1244     * Makes a clone of an object
1245     *
1246     * @param obj val The object to clone
1247     */
1248     RGraph.array_clone = function (obj)
1249     {
1250         if(obj == null || typeof(obj) != 'object') {
1251             return obj;
1252         }
1253
1254         var temp = [];
1255         //var temp = new obj.constructor();
1256
1257         for(var i=0;i<obj.length; ++i) {
1258             temp[i] = RGraph.array_clone(obj[i]);
1259         }
1260
1261         return temp;
1262     }
1263
1264
1265     /**
1266     * This function reverses an array
1267     */
1268     RGraph.array_reverse = function (arr)
1269     {
1270         var newarr = [];
1271
1272         for (var i=arr.length - 1; i>=0; i--) {
1273             newarr.push(arr[i]);
1274         }
1275
1276         return newarr;
1277     }
1278
1279
1280     /**
1281     * Formats a number with thousand seperators so it's easier to read
1282     *
1283     * @param  integer num The number to format
1284     * @param  string      The (optional) string to prepend to the string
1285     * @param  string      The (optional) string to ap
1286     * pend to the string
1287     * @return string      The formatted number
1288     */
1289     RGraph.number_format = function (obj, num)
1290     {
1291         var i;
1292         var prepend = arguments[2] ? String(arguments[2]) : '';
1293         var append  = arguments[3] ? String(arguments[3]) : '';
1294         var output  = '';
1295         var decimal = '';
1296         var decimal_seperator  = obj.Get('chart.scale.point') ? obj.Get('chart.scale.point') : '.';
1297         var thousand_seperator = obj.Get('chart.scale.thousand') ? obj.Get('chart.scale.thousand') : ',';
1298         RegExp.$1   = '';
1299         var i,j;
1300
1301         // Ignore the preformatted version of "1e-2"
1302         if (String(num).indexOf('e') > 0) {
1303             return String(prepend + String(num) + append);
1304         }
1305
1306         // We need then number as a string
1307         num = String(num);
1308
1309         // Take off the decimal part - we re-append it later
1310         if (num.indexOf('.') > 0) {
1311             num     = num.replace(/\.(.*)/, '');
1312             decimal = RegExp.$1;
1313         }
1314
1315         // Thousand seperator
1316         //var seperator = arguments[1] ? String(arguments[1]) : ',';
1317         var seperator = thousand_seperator;
1318
1319         /**
1320         * Work backwards adding the thousand seperators
1321         */
1322         var foundPoint;
1323         for (i=(num.length - 1),j=0; i>=0; j++,i--) {
1324             var character = num.charAt(i);
1325
1326             if ( j % 3 == 0 && j != 0) {
1327                 output += seperator;
1328             }
1329
1330             /**
1331             * Build the output
1332             */
1333             output += character;
1334         }
1335
1336         /**
1337         * Now need to reverse the string
1338         */
1339         var rev = output;
1340         output = '';
1341         for (i=(rev.length - 1); i>=0; i--) {
1342             output += rev.charAt(i);
1343         }
1344
1345         // Tidy up
1346         output = output.replace(/^-,/, '-');
1347
1348         // Reappend the decimal
1349         if (decimal.length) {
1350             output =  output + decimal_seperator + decimal;
1351             decimal = '';
1352             RegExp.$1 = '';
1353         }
1354
1355         // Minor bugette
1356         if (output.charAt(0) == '-') {
1357             output *= -1;
1358             prepend = '-' + prepend;
1359         }
1360
1361         return prepend + output + append;
1362     }
1363
1364
1365     /**
1366     * Draws horizontal coloured bars on something like the bar, line or scatter
1367     */
1368     RGraph.DrawBars = function (obj)
1369     {
1370         var hbars = obj.Get('chart.background.hbars');
1371
1372         /**
1373         * Draws a horizontal bar
1374         */
1375         obj.context.beginPath();
1376
1377         for (i=0; i<hbars.length; ++i) {
1378
1379             // If null is specified as the "height", set it to the upper max value
1380             if (hbars[i][1] == null) {
1381                 hbars[i][1] = obj.max;
1382
1383             // If the first index plus the second index is greater than the max value, adjust accordingly
1384             } else if (hbars[i][0] + hbars[i][1] > obj.max) {
1385                 hbars[i][1] = obj.max - hbars[i][0];
1386             }
1387
1388
1389             // If height is negative, and the abs() value is greater than .max, use a negative max instead
1390             if (Math.abs(hbars[i][1]) > obj.max) {
1391                 hbars[i][1] = -1 * obj.max;
1392             }
1393
1394
1395             // If start point is greater than max, change it to max
1396             if (Math.abs(hbars[i][0]) > obj.max) {
1397                 hbars[i][0] = obj.max;
1398             }
1399
1400             // If start point plus height is less than negative max, use the negative max plus the start point
1401             if (hbars[i][0] + hbars[i][1] < (-1 * obj.max) ) {
1402                 hbars[i][1] = -1 * (obj.max + hbars[i][0]);
1403             }
1404
1405             // If the X axis is at the bottom, and a negative max is given, warn the user
1406             if (obj.Get('chart.xaxispos') == 'bottom' && (hbars[i][0] < 0 || (hbars[i][1] + hbars[i][1] < 0)) ) {
1407                 alert('[' + obj.type.toUpperCase() + ' (ID: ' + obj.id + ') BACKGROUND HBARS] You have a negative value in one of your background hbars values, whilst the X axis is in the center');
1408             }
1409
1410             var ystart = (obj.grapharea - ((hbars[i][0] / obj.max) * obj.grapharea));
1411             var height = (Math.min(hbars[i][1], obj.max - hbars[i][0]) / obj.max) * obj.grapharea;
1412
1413             // Account for the X axis being in the center
1414             if (obj.Get('chart.xaxispos') == 'center') {
1415                 ystart /= 2;
1416                 height /= 2;
1417             }
1418
1419             ystart += obj.Get('chart.gutter')
1420
1421             var x = obj.Get('chart.gutter');
1422             var y = ystart - height;
1423             var w = obj.canvas.width - (2 * obj.Get('chart.gutter'));
1424             var h = height;
1425
1426             // Accommodate Opera :-/
1427             if (navigator.userAgent.indexOf('Opera') != -1 && obj.Get('chart.xaxispos') == 'center' && h < 0) {
1428                 h *= -1;
1429                 y = y - h;
1430             }
1431
1432             obj.context.fillStyle = hbars[i][2];
1433             obj.context.fillRect(x, y, w, h);
1434         }
1435
1436         obj.context.fill();
1437     }
1438
1439
1440     /**
1441     * Draws in-graph labels.
1442     *
1443     * @param object obj The graph object
1444     */
1445     RGraph.DrawInGraphLabels = function (obj)
1446     {
1447         var canvas  = obj.canvas;
1448         var context = obj.context;
1449         var labels  = obj.Get('chart.labels.ingraph');
1450         var labels_processed = [];
1451
1452         // Defaults
1453         var fgcolor   = 'black';
1454         var bgcolor   = 'white';
1455         var direction = 1;
1456
1457         if (!labels) {
1458             return;
1459         }
1460
1461         /**
1462         * Preprocess the labels array. Numbers are expanded
1463         */
1464         for (var i=0; i<labels.length; ++i) {
1465             if (typeof(labels[i]) == 'number') {
1466                 for (var j=0; j<labels[i]; ++j) {
1467                     labels_processed.push(null);
1468                 }
1469             } else if (typeof(labels[i]) == 'string' || typeof(labels[i]) == 'object') {
1470                 labels_processed.push(labels[i]);
1471
1472             } else {
1473                 labels_processed.push('');
1474             }
1475         }
1476
1477         /**
1478         * Turn off any shadow
1479         */
1480         RGraph.NoShadow(obj);
1481
1482         if (labels_processed && labels_processed.length > 0) {
1483
1484             for (var i=0; i<labels_processed.length; ++i) {
1485                 if (labels_processed[i]) {
1486                     var coords = obj.coords[i];
1487
1488                     if (coords && coords.length > 0) {
1489                         var x      = (obj.type == 'bar' ? coords[0] + (coords[2] / 2) : coords[0]);
1490                         var y      = (obj.type == 'bar' ? coords[1] + (coords[3] / 2) : coords[1]);
1491                         var length = typeof(labels_processed[i][4]) == 'number' ? labels_processed[i][4] : 25;
1492
1493                         context.beginPath();
1494                         context.fillStyle   = 'black';
1495                         context.strokeStyle = 'black';
1496
1497
1498                         if (obj.type == 'bar') {
1499
1500                             if (obj.Get('chart.variant') == 'dot') {
1501                                 context.moveTo(x, obj.coords[i][1] - 5);
1502                                 context.lineTo(x, obj.coords[i][1] - 5 - length);
1503
1504                                 var text_x = x;
1505                                 var text_y = obj.coords[i][1] - 5 - length;
1506
1507                             } else if (obj.Get('chart.variant') == 'arrow') {
1508                                 context.moveTo(x, obj.coords[i][1] - 5);
1509                                 context.lineTo(x, obj.coords[i][1] - 5 - length);
1510
1511                                 var text_x = x;
1512                                 var text_y = obj.coords[i][1] - 5 - length;
1513
1514                             } else {
1515
1516                                 context.arc(x, y, 2.5, 0, 6.28, 0);
1517                                 context.moveTo(x, y);
1518                                 context.lineTo(x, y - length);
1519
1520                                 var text_x = x;
1521                                 var text_y = y - length;
1522                             }
1523
1524                             context.stroke();
1525                             context.fill();
1526
1527
1528                         } else if (obj.type == 'line') {
1529
1530                             if (
1531                                 typeof(labels_processed[i]) == 'object' &&
1532                                 typeof(labels_processed[i][3]) == 'number' &&
1533                                 labels_processed[i][3] == -1
1534                                ) {
1535
1536                                 context.moveTo(x, y + 5);
1537                                 context.lineTo(x, y + 5 + length);
1538
1539                                 context.stroke();
1540                                 context.beginPath();
1541
1542                                 // This draws the arrow
1543                                 context.moveTo(x, y + 5);
1544                                 context.lineTo(x - 3, y + 10);
1545                                 context.lineTo(x + 3, y + 10);
1546                                 context.closePath();
1547
1548                                 var text_x = x;
1549                                 var text_y = y + 5 + length;
1550
1551                             } else {
1552
1553                                 var text_x = x;
1554                                 var text_y = y - 5 - length;
1555
1556                                 context.moveTo(x, y - 5);
1557                                 context.lineTo(x, y - 5 - length);
1558
1559                                 context.stroke();
1560                                 context.beginPath();
1561
1562                                 // This draws the arrow
1563                                 context.moveTo(x, y - 5);
1564                                 context.lineTo(x - 3, y - 10);
1565                                 context.lineTo(x + 3, y - 10);
1566                                 context.closePath();
1567                             }
1568
1569                             context.fill();
1570                         }
1571
1572
1573                         // Taken out on the 10th Nov 2010 - unnecessary
1574                         //var width = context.measureText(labels[i]).width;
1575
1576                         context.beginPath();
1577
1578                             // Fore ground color
1579                             context.fillStyle = (typeof(labels_processed[i]) == 'object' && typeof(labels_processed[i][1]) == 'string') ? labels_processed[i][1] : 'black';
1580
1581                             RGraph.Text(context,
1582                                         obj.Get('chart.text.font'),
1583                                         obj.Get('chart.text.size'),
1584                                         text_x,
1585                                         text_y,
1586                                         (typeof(labels_processed[i]) == 'object' && typeof(labels_processed[i][0]) == 'string') ? labels_processed[i][0] : labels_processed[i],
1587                                         'bottom',
1588                                         'center',
1589                                         true,
1590                                         null,
1591                                         (typeof(labels_processed[i]) == 'object' && typeof(labels_processed[i][2]) == 'string') ? labels_processed[i][2] : 'white');
1592                         context.fill();
1593                     }
1594                 }
1595             }
1596         }
1597     }
1598
1599
1600     /**
1601     * This function "fills in" key missing properties that various implementations lack
1602     *
1603     * @param object e The event object
1604     */
1605     RGraph.FixEventObject = function (e)
1606     {
1607         if (RGraph.isIE8()) {
1608
1609             var e = event;
1610
1611             e.pageX  = (event.clientX + document.body.scrollLeft);
1612             e.pageY  = (event.clientY + document.body.scrollTop);
1613             e.target = event.srcElement;
1614
1615             if (!document.body.scrollTop && document.documentElement.scrollTop) {
1616                 e.pageX += parseInt(document.documentElement.scrollLeft);
1617                 e.pageY += parseInt(document.documentElement.scrollTop);
1618             }
1619         }
1620
1621         // This is mainly for FF which doesn't provide offsetX
1622         if (typeof(e.offsetX) == 'undefined' && typeof(e.offsetY) == 'undefined') {
1623             var coords = RGraph.getMouseXY(e);
1624             e.offsetX = coords[0];
1625             e.offsetY = coords[1];
1626         }
1627
1628         // Any browser that doesn't implement stopPropagation() (MSIE)
1629         if (!e.stopPropagation) {
1630             e.stopPropagation = function () {window.event.cancelBubble = true;}
1631         }
1632
1633         return e;
1634     }
1635
1636
1637     /**
1638     * Draw crosshairs if enabled
1639     *
1640     * @param object obj The graph object (from which we can get the context and canvas as required)
1641     */
1642     RGraph.DrawCrosshairs = function (obj)
1643     {
1644         if (obj.Get('chart.crosshairs')) {
1645             var canvas  = obj.canvas;
1646             var context = obj.context;
1647
1648             // 5th November 2010 - removed now that tooltips are DOM2 based.
1649             //if (obj.Get('chart.tooltips') && obj.Get('chart.tooltips').length > 0) {
1650                 //alert('[' + obj.type.toUpperCase() + '] Sorry - you cannot have crosshairs enabled with tooltips! Turning off crosshairs...');
1651                 //obj.Set('chart.crosshairs', false);
1652                 //return;
1653             //}
1654
1655             canvas.onmousemove = function (e)
1656             {
1657                 var e       = RGraph.FixEventObject(e);
1658                 var canvas  = obj.canvas;
1659                 var context = obj.context;
1660                 var gutter  = obj.Get('chart.gutter');
1661                 var width   = canvas.width;
1662                 var height  = canvas.height;
1663                 var adjustments = obj.Get('chart.tooltips.coords.adjust');
1664
1665                 var mouseCoords = RGraph.getMouseXY(e);
1666                 var x = mouseCoords[0];
1667                 var y = mouseCoords[1];
1668
1669                 if (typeof(adjustments) == 'object' && adjustments[0] && adjustments[1]) {
1670                     x = x - adjustments[0];
1671                     y = y - adjustments[1];
1672                 }
1673
1674                 RGraph.Clear(canvas);
1675                 obj.Draw();
1676
1677                 if (   x >= gutter
1678                     && y >= gutter
1679                     && x <= (width - gutter)
1680                     && y <= (height - gutter)
1681                    ) {
1682
1683                     var linewidth = obj.Get('chart.crosshairs.linewidth');
1684                     context.lineWidth = linewidth ? linewidth : 1;
1685
1686                     context.beginPath();
1687                     context.strokeStyle = obj.Get('chart.crosshairs.color');
1688
1689                     // Draw a top vertical line
1690                     context.moveTo(x, gutter);
1691                     context.lineTo(x, height - gutter);
1692
1693                     // Draw a horizontal line
1694                     context.moveTo(gutter, y);
1695                     context.lineTo(width - gutter, y);
1696
1697                     context.stroke();
1698
1699                     /**
1700                     * Need to show the coords?
1701                     */
1702                     if (obj.Get('chart.crosshairs.coords')) {
1703                         if (obj.type == 'scatter') {
1704
1705                             var xCoord = (((x - obj.Get('chart.gutter')) / (obj.canvas.width - (2 * obj.Get('chart.gutter')))) * (obj.Get('chart.xmax') - obj.Get('chart.xmin'))) + obj.Get('chart.xmin');
1706                                 xCoord = xCoord.toFixed(obj.Get('chart.scale.decimals'));
1707                             var yCoord = obj.max - (((y - obj.Get('chart.gutter')) / (obj.canvas.height - (2 * obj.Get('chart.gutter')))) * obj.max);
1708
1709                                 if (obj.type == 'scatter' && obj.Get('chart.xaxispos') == 'center') {
1710                                     yCoord = (yCoord - (obj.max / 2)) * 2;
1711                                 }
1712
1713                                 yCoord = yCoord.toFixed(obj.Get('chart.scale.decimals'));
1714                             var div    = RGraph.Registry.Get('chart.coordinates.coords.div');
1715                             var mouseCoords = RGraph.getMouseXY(e);
1716                             var canvasXY = RGraph.getCanvasXY(canvas);
1717
1718                             if (!div) {
1719
1720                                 div = document.createElement('DIV');
1721                                 div.__object__     = obj;
1722                                 div.style.position = 'absolute';
1723                                 div.style.backgroundColor = 'white';
1724                                 div.style.border = '1px solid black';
1725                                 div.style.fontFamily = 'Arial, Verdana, sans-serif';
1726                                 div.style.fontSize = '10pt'
1727                                 div.style.padding = '2px';
1728                                 div.style.opacity = 1;
1729                                 div.style.WebkitBorderRadius = '3px';
1730                                 div.style.borderRadius = '3px';
1731                                 div.style.MozBorderRadius = '3px';
1732                                 document.body.appendChild(div);
1733
1734                                 RGraph.Registry.Set('chart.coordinates.coords.div', div);
1735                             }
1736
1737                             // Convert the X/Y pixel coords to correspond to the scale
1738
1739                             div.style.opacity = 1;
1740                             div.style.display = 'inline';
1741
1742                             if (!obj.Get('chart.crosshairs.coords.fixed')) {
1743                                 div.style.left = Math.max(2, (e.pageX - div.offsetWidth - 3)) + 'px';
1744                                 div.style.top = Math.max(2, (e.pageY - div.offsetHeight - 3))  + 'px';
1745                             } else {
1746                                 div.style.left = canvasXY[0] + obj.Get('chart.gutter') + 3 + 'px';
1747                                 div.style.top  = canvasXY[1] + obj.Get('chart.gutter') + 3 + 'px';
1748                             }
1749
1750                             div.innerHTML = '<span style="color: #666">' + obj.Get('chart.crosshairs.coords.labels.x') + ':</span> ' + xCoord + '<br><span style="color: #666">' + obj.Get('chart.crosshairs.coords.labels.y') + ':</span> ' + yCoord;
1751
1752                             canvas.addEventListener('mouseout', RGraph.HideCrosshairCoords, false);
1753
1754                         } else {
1755                             alert('[RGRAPH] Showing crosshair coordinates is only supported on the Scatter chart');
1756                         }
1757                     }
1758                 } else {
1759                     RGraph.HideCrosshairCoords();
1760                 }
1761             }
1762         }
1763     }
1764
1765     /**
1766     * Thisz function hides the crosshairs coordinates
1767     */
1768     RGraph.HideCrosshairCoords = function ()
1769     {
1770         var div = RGraph.Registry.Get('chart.coordinates.coords.div');
1771
1772         if (   div
1773             && div.style.opacity == 1
1774             && div.__object__.Get('chart.crosshairs.coords.fadeout')
1775            ) {
1776             setTimeout(function() {RGraph.Registry.Get('chart.coordinates.coords.div').style.opacity = 0.9;}, 50);
1777             setTimeout(function() {RGraph.Registry.Get('chart.coordinates.coords.div').style.opacity = 0.8;}, 100);
1778             setTimeout(function() {RGraph.Registry.Get('chart.coordinates.coords.div').style.opacity = 0.7;}, 150);
1779             setTimeout(function() {RGraph.Registry.Get('chart.coordinates.coords.div').style.opacity = 0.6;}, 200);
1780             setTimeout(function() {RGraph.Registry.Get('chart.coordinates.coords.div').style.opacity = 0.5;}, 250);
1781             setTimeout(function() {RGraph.Registry.Get('chart.coordinates.coords.div').style.opacity = 0.4;}, 300);
1782             setTimeout(function() {RGraph.Registry.Get('chart.coordinates.coords.div').style.opacity = 0.3;}, 350);
1783             setTimeout(function() {RGraph.Registry.Get('chart.coordinates.coords.div').style.opacity = 0.2;}, 400);
1784             setTimeout(function() {RGraph.Registry.Get('chart.coordinates.coords.div').style.opacity = 0.1;}, 450);
1785             setTimeout(function() {RGraph.Registry.Get('chart.coordinates.coords.div').style.opacity = 0;}, 500);
1786             setTimeout(function() {RGraph.Registry.Get('chart.coordinates.coords.div').style.display = 'none';}, 550);
1787         }
1788     }
1789
1790
1791     /**
1792     * Trims the right hand side of a string. Removes SPACE, TAB
1793     * CR and LF.
1794     *
1795     * @param string str The string to trim
1796     */
1797     RGraph.rtrim = function (str)
1798     {
1799         return str.replace(/( |\n|\r|\t)+$/, '');
1800     }
1801
1802
1803     /**
1804     * Draws the3D axes/background
1805     */
1806     RGraph.Draw3DAxes = function (obj)
1807     {
1808         var gutter  = obj.Get('chart.gutter');
1809         var context = obj.context;
1810         var canvas  = obj.canvas;
1811
1812         context.strokeStyle = '#aaa';
1813         context.fillStyle = '#ddd';
1814
1815         // Draw the vertical left side
1816         context.beginPath();
1817             context.moveTo(gutter, gutter);
1818             context.lineTo(gutter + 10, gutter - 5);
1819             context.lineTo(gutter + 10, canvas.height - gutter - 5);
1820             context.lineTo(gutter, canvas.height - gutter);
1821         context.closePath();
1822
1823         context.stroke();
1824         context.fill();
1825
1826         // Draw the bottom floor
1827         context.beginPath();
1828             context.moveTo(gutter, canvas.height - gutter);
1829             context.lineTo(gutter + 10, canvas.height - gutter - 5);
1830             context.lineTo(canvas.width - gutter + 10,  canvas.height - gutter - 5);
1831             context.lineTo(canvas.width - gutter, canvas.height - gutter);
1832         context.closePath();
1833
1834         context.stroke();
1835         context.fill();
1836     }
1837
1838     /**
1839     * Turns off any shadow
1840     *
1841     * @param object obj The graph object
1842     */
1843     RGraph.NoShadow = function (obj)
1844     {
1845         obj.context.shadowColor   = 'rgba(0,0,0,0)';
1846         obj.context.shadowBlur    = 0;
1847         obj.context.shadowOffsetX = 0;
1848         obj.context.shadowOffsetY = 0;
1849     }
1850
1851
1852     /**
1853     * Sets the four shadow properties - a shortcut function
1854     *
1855     * @param object obj     Your graph object
1856     * @param string color   The shadow color
1857     * @param number offsetx The shadows X offset
1858     * @param number offsety The shadows Y offset
1859     * @param number blur    The blurring effect applied to the shadow
1860     */
1861     RGraph.SetShadow = function (obj, color, offsetx, offsety, blur)
1862     {
1863         obj.context.shadowColor   = color;
1864         obj.context.shadowOffsetX = offsetx;
1865         obj.context.shadowOffsetY = offsety;
1866         obj.context.shadowBlur    = blur;
1867     }
1868
1869
1870     /**
1871     * This function attempts to "fill in" missing functions from the canvas
1872     * context object. Only two at the moment - measureText() nd fillText().
1873     *
1874     * @param object context The canvas 2D context
1875     */
1876     RGraph.OldBrowserCompat = function (context)
1877     {
1878         if (!context.measureText) {
1879
1880             // This emulates the measureText() function
1881             context.measureText = function (text)
1882             {
1883                 var textObj = document.createElement('DIV');
1884                 textObj.innerHTML = text;
1885                 textObj.style.backgroundColor = 'white';
1886                 textObj.style.position = 'absolute';
1887                 textObj.style.top = -100
1888                 textObj.style.left = 0;
1889                 document.body.appendChild(textObj);
1890
1891                 var width = {width: textObj.offsetWidth};
1892
1893                 textObj.style.display = 'none';
1894
1895                 return width;
1896             }
1897         }
1898
1899         if (!context.fillText) {
1900             // This emulates the fillText() method
1901             context.fillText    = function (text, targetX, targetY)
1902             {
1903                 return false;
1904             }
1905         }
1906
1907         // If IE8, add addEventListener()
1908         if (!context.canvas.addEventListener) {
1909             window.addEventListener = function (ev, func, bubble)
1910             {
1911                 return this.attachEvent('on' + ev, func);
1912             }
1913
1914             context.canvas.addEventListener = function (ev, func, bubble)
1915             {
1916                 return this.attachEvent('on' + ev, func);
1917             }
1918         }
1919     }
1920
1921
1922     /**
1923     * This function is for use with circular graph types, eg the Pie or Radar. Pass it your event object
1924     * and it will pass you back the corresponding segment details as an array:
1925     *
1926     * [x, y, r, startAngle, endAngle]
1927     *
1928     * Angles are measured in degrees, and are measured from the "east" axis (just like the canvas).
1929     *
1930     * @param object e   Your event object
1931     */
1932     RGraph.getSegment = function (e)
1933     {
1934         RGraph.FixEventObject(e);
1935
1936         // The optional arg provides a way of allowing some accuracy (pixels)
1937         var accuracy = arguments[1] ? arguments[1] : 0;
1938
1939         var obj         = e.target.__object__;
1940         var canvas      = obj.canvas;
1941         var context     = obj.context;
1942         var mouseCoords = RGraph.getMouseXY(e);
1943         var x           = mouseCoords[0] - obj.centerx;
1944         var y           = mouseCoords[1] - obj.centery;
1945         var r           = obj.radius;
1946         var theta       = Math.atan(y / x); // RADIANS
1947         var hyp         = y / Math.sin(theta);
1948         var angles      = obj.angles;
1949         var ret         = [];
1950         var hyp         = (hyp < 0) ? hyp + accuracy : hyp - accuracy;
1951
1952
1953         // Put theta in DEGREES
1954         theta *= 57.3
1955
1956         // hyp should not be greater than radius if it's a Rose chart
1957         if (obj.type == 'rose') {
1958             if (   (isNaN(hyp) && Math.abs(mouseCoords[0]) < (obj.centerx - r) )
1959                 || (isNaN(hyp) && Math.abs(mouseCoords[0]) > (obj.centerx + r))
1960                 || (!isNaN(hyp) && Math.abs(hyp) > r)) {
1961                 return;
1962             }
1963         }
1964
1965         /**
1966         * Account for the correct quadrant
1967         */
1968         if (x < 0 && y >= 0) {
1969             theta += 180;
1970         } else if (x < 0 && y < 0) {
1971             theta += 180;
1972         } else if (x > 0 && y < 0) {
1973             theta += 360;
1974         }
1975
1976         /**
1977         * Account for the rose chart
1978         */
1979         if (obj.type == 'rose') {
1980             theta += 90;
1981         }
1982
1983         if (theta > 360) {
1984             theta -= 360;
1985         }
1986
1987         for (var i=0; i<angles.length; ++i) {
1988             if (theta >= angles[i][0] && theta < angles[i][1]) {
1989
1990                 hyp = Math.abs(hyp);
1991
1992                 if (obj.type == 'rose' && hyp > angles[i][2]) {
1993                     return null;
1994                 }
1995
1996                 if (!hyp || (obj.type == 'pie' && obj.radius && hyp > obj.radius) ) {
1997                     return null;
1998                 }
1999
2000                 if (obj.type == 'pie' && obj.Get('chart.variant') == 'donut' && (hyp > obj.radius || hyp < (obj.radius / 2) ) ) {
2001                     return null;
2002                 }
2003
2004                 ret[0] = obj.centerx;
2005                 ret[1] = obj.centery;
2006                 ret[2] = (obj.type == 'rose') ? angles[i][2] : obj.radius;
2007                 ret[3] = angles[i][0];
2008                 ret[4] = angles[i][1];
2009                 ret[5] = i;
2010
2011                 if (obj.type == 'rose') {
2012
2013                     ret[3] -= 90;
2014                     ret[4] -= 90;
2015
2016                     if (x > 0 && y < 0) {
2017                         ret[3] += 360;
2018                         ret[4] += 360;
2019                     }
2020                 }
2021
2022                 if (ret[3] < 0) ret[3] += 360;
2023                 if (ret[4] > 360) ret[4] -= 360;
2024
2025                 return ret;
2026             }
2027         }
2028
2029         return null;
2030     }
2031
2032
2033     /**
2034     * This is a function that can be used to run code asynchronously, which can
2035     * be used to speed up the loading of you pages.
2036     *
2037     * @param string func This is the code to run. It can also be a function pointer.
2038     *                    The front page graphs show this function in action. Basically
2039     *                   each graphs code is made in a function, and that function is
2040     *                   passed to this function to run asychronously.
2041     */
2042     RGraph.Async = function (func)
2043     {
2044         return setTimeout(func, arguments[1] ? arguments[1] : 1);
2045     }
2046
2047
2048     /**
2049     * A custom random number function
2050     *
2051     * @param number min The minimum that the number should be
2052     * @param number max The maximum that the number should be
2053     * @param number    How many decimal places there should be. Default for this is 0
2054     */
2055     RGraph.random = function (min, max)
2056     {
2057         var dp = arguments[2] ? arguments[2] : 0;
2058         var r = Math.random();
2059
2060         return Number((((max - min) * r) + min).toFixed(dp));
2061     }
2062
2063
2064     /**
2065     * Draws a rectangle with curvy corners
2066     *
2067     * @param context object The context
2068     * @param x       number The X coordinate (top left of the square)
2069     * @param y       number The Y coordinate (top left of the square)
2070     * @param w       number The width of the rectangle
2071     * @param h       number The height of the rectangle
2072     * @param         number The radius of the curved corners
2073     * @param         boolean Whether the top left corner is curvy
2074     * @param         boolean Whether the top right corner is curvy
2075     * @param         boolean Whether the bottom right corner is curvy
2076     * @param         boolean Whether the bottom left corner is curvy
2077     */
2078     RGraph.strokedCurvyRect = function (context, x, y, w, h)
2079     {
2080         // The corner radius
2081         var r = arguments[5] ? arguments[5] : 3;
2082
2083         // The corners
2084         var corner_tl = (arguments[6] || arguments[6] == null) ? true : false;
2085         var corner_tr = (arguments[7] || arguments[7] == null) ? true : false;
2086         var corner_br = (arguments[8] || arguments[8] == null) ? true : false;
2087         var corner_bl = (arguments[9] || arguments[9] == null) ? true : false;
2088
2089         context.beginPath();
2090
2091             // Top left side
2092             context.moveTo(x + (corner_tl ? r : 0), y);
2093             context.lineTo(x + w - (corner_tr ? r : 0), y);
2094
2095             // Top right corner
2096             if (corner_tr) {
2097                 context.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2, false);
2098             }
2099
2100             // Top right side
2101             context.lineTo(x + w, y + h - (corner_br ? r : 0) );
2102
2103             // Bottom right corner
2104             if (corner_br) {
2105                 context.arc(x + w - r, y - r + h, r, Math.PI * 2, Math.PI * 0.5, false);
2106             }
2107
2108             // Bottom right side
2109             context.lineTo(x + (corner_bl ? r : 0), y + h);
2110
2111             // Bottom left corner
2112             if (corner_bl) {
2113                 context.arc(x + r, y - r + h, r, Math.PI * 0.5, Math.PI, false);
2114             }
2115
2116             // Bottom left side
2117             context.lineTo(x, y + (corner_tl ? r : 0) );
2118
2119             // Top left corner
2120             if (corner_tl) {
2121                 context.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5, false);
2122             }
2123
2124         context.stroke();
2125     }
2126
2127
2128     /**
2129     * Draws a filled rectangle with curvy corners
2130     *
2131     * @param context object The context
2132     * @param x       number The X coordinate (top left of the square)
2133     * @param y       number The Y coordinate (top left of the square)
2134     * @param w       number The width of the rectangle
2135     * @param h       number The height of the rectangle
2136     * @param         number The radius of the curved corners
2137     * @param         boolean Whether the top left corner is curvy
2138     * @param         boolean Whether the top right corner is curvy
2139     * @param         boolean Whether the bottom right corner is curvy
2140     * @param         boolean Whether the bottom left corner is curvy
2141     */
2142     RGraph.filledCurvyRect = function (context, x, y, w, h)
2143     {
2144         // The corner radius
2145         var r = arguments[5] ? arguments[5] : 3;
2146
2147         // The corners
2148         var corner_tl = (arguments[6] || arguments[6] == null) ? true : false;
2149         var corner_tr = (arguments[7] || arguments[7] == null) ? true : false;
2150         var corner_br = (arguments[8] || arguments[8] == null) ? true : false;
2151         var corner_bl = (arguments[9] || arguments[9] == null) ? true : false;
2152
2153         context.beginPath();
2154
2155             // First draw the corners
2156
2157             // Top left corner
2158             if (corner_tl) {
2159                 context.moveTo(x + r, y + r);
2160                 context.arc(x + r, y + r, r, Math.PI, 1.5 * Math.PI, false);
2161             } else {
2162                 context.fillRect(x, y, r, r);
2163             }
2164
2165             // Top right corner
2166             if (corner_tr) {
2167                 context.moveTo(x + w - r, y + r);
2168                 context.arc(x + w - r, y + r, r, 1.5 * Math.PI, 0, false);
2169             } else {
2170                 context.moveTo(x + w - r, y);
2171                 context.fillRect(x + w - r, y, r, r);
2172             }
2173
2174
2175             // Bottom right corner
2176             if (corner_br) {
2177                 context.moveTo(x + w - r, y + h - r);
2178                 context.arc(x + w - r, y - r + h, r, 0, Math.PI / 2, false);
2179             } else {
2180                 context.moveTo(x + w - r, y + h - r);
2181                 context.fillRect(x + w - r, y + h - r, r, r);
2182             }
2183
2184             // Bottom left corner
2185             if (corner_bl) {
2186                 context.moveTo(x + r, y + h - r);
2187                 context.arc(x + r, y - r + h, r, Math.PI / 2, Math.PI, false);
2188             } else {
2189                 context.moveTo(x, y + h - r);
2190                 context.fillRect(x, y + h - r, r, r);
2191             }
2192
2193             // Now fill it in
2194             context.fillRect(x + r, y, w - r - r, h);
2195             context.fillRect(x, y + r, r + 1, h - r - r);
2196             context.fillRect(x + w - r - 1, y + r, r + 1, h - r - r);
2197
2198         context.fill();
2199     }
2200
2201
2202     /**
2203     * A crude timing function
2204     *
2205     * @param string label The label to use for the time
2206     */
2207     RGraph.Timer = function (label)
2208     {
2209         var d = new Date();
2210
2211         // This uses the Firebug console
2212         console.log(label + ': ' + d.getSeconds() + '.' + d.getMilliseconds());
2213     }
2214
2215
2216     /**
2217     * Hides the palette if it's visible
2218     */
2219     RGraph.HidePalette = function ()
2220     {
2221         var div = RGraph.Registry.Get('palette');
2222
2223         if (typeof(div) == 'object' && div) {
2224             div.style.visibility = 'hidden';
2225             div.style.display    = 'none';
2226             RGraph.Registry.Set('palette', null);
2227         }
2228     }
2229
2230
2231     /**
2232     * Hides the zoomed canvas
2233     */
2234     RGraph.HideZoomedCanvas = function ()
2235     {
2236         if (typeof(__zoomedimage__) == 'object') {
2237             obj = __zoomedimage__.obj;
2238         } else {
2239             return;
2240         }
2241
2242         if (obj.Get('chart.zoom.fade.out')) {
2243             for (var i=10,j=1; i>=0; --i, ++j) {
2244                 if (typeof(__zoomedimage__) == 'object') {
2245                     setTimeout("__zoomedimage__.style.opacity = " + String(i / 10), j * 30);
2246                 }
2247             }
2248
2249             if (typeof(__zoomedbackground__) == 'object') {
2250                 setTimeout("__zoomedbackground__.style.opacity = " + String(i / 10), j * 30);
2251             }
2252         }
2253
2254         if (typeof(__zoomedimage__) == 'object') {
2255             setTimeout("__zoomedimage__.style.display = 'none'", obj.Get('chart.zoom.fade.out') ? 310 : 0);
2256         }
2257
2258         if (typeof(__zoomedbackground__) == 'object') {
2259             setTimeout("__zoomedbackground__.style.display = 'none'", obj.Get('chart.zoom.fade.out') ? 310 : 0);
2260         }
2261     }
2262
2263
2264     /**
2265     * Adds an event handler
2266     *
2267     * @param object obj   The graph object
2268     * @param string event The name of the event, eg ontooltip
2269     * @param object func  The callback function
2270     */
2271     RGraph.AddCustomEventListener = function (obj, name, func)
2272     {
2273         if (typeof(RGraph.events[obj.id]) == 'undefined') {
2274             RGraph.events[obj.id] = [];
2275         }
2276
2277         RGraph.events[obj.id].push([obj, name, func]);
2278     }
2279
2280
2281     /**
2282     * Used to fire one of the RGraph custom events
2283     *
2284     * @param object obj   The graph object that fires the event
2285     * @param string event The name of the event to fire
2286     */
2287     RGraph.FireCustomEvent = function (obj, name)
2288     {
2289         for (i in RGraph.events) {
2290             if (typeof(i) == 'string' && i == obj.id && RGraph.events[i].length > 0) {
2291                 for(var j=0; j<RGraph.events[i].length; ++j) {
2292                     if (RGraph.events[i][j][1] == name) {
2293                         RGraph.events[i][j][2](obj);
2294                     }
2295                 }
2296             }
2297         }
2298     }
2299
2300
2301     /**
2302     * Checks the browser for traces of MSIE8
2303     */
2304     RGraph.isIE8 = function ()
2305     {
2306         return navigator.userAgent.indexOf('MSIE 8') > 0;
2307     }
2308
2309
2310     /**
2311     * Checks the browser for traces of MSIE9
2312     */
2313     RGraph.isIE9 = function ()
2314     {
2315         return navigator.userAgent.indexOf('MSIE 9') > 0;
2316     }
2317
2318
2319     /**
2320     * Checks the browser for traces of MSIE9
2321     */
2322     RGraph.isIE9up = function ()
2323     {
2324         navigator.userAgent.match(/MSIE (\d+)/);
2325
2326         return Number(RegExp.$1) >= 9;
2327     }
2328
2329
2330     /**
2331     * This clears a canvases event handlers.
2332     *
2333     * @param string id The ID of the canvas whose event handlers will be cleared
2334     */
2335     RGraph.ClearEventListeners = function (id)
2336     {
2337         for (var i=0; i<RGraph.Registry.Get('chart.event.handlers').length; ++i) {
2338
2339             var el = RGraph.Registry.Get('chart.event.handlers')[i];
2340
2341             if (el && (el[0] == id || el[0] == ('window_' + id)) ) {
2342                 if (el[0].substring(0, 7) == 'window_') {
2343                     window.removeEventListener(el[1], el[2], false);
2344                 } else {
2345                     document.getElementById(id).removeEventListener(el[1], el[2], false);
2346                 }
2347
2348                 RGraph.Registry.Get('chart.event.handlers')[i] = null;
2349             }
2350         }
2351     }
2352
2353
2354     /**
2355     *
2356     */
2357     RGraph.AddEventListener = function (id, e, func)
2358     {
2359         RGraph.Registry.Get('chart.event.handlers').push([id, e, func]);
2360     }
2361
2362
2363     /**
2364     * This function suggests a gutter size based on the widest left label. Given that the bottom
2365     * labels may be longer, this may be a little out.
2366     *
2367     * @param object obj  The graph object
2368     * @param array  data An array of graph data
2369     * @return int        A suggested gutter setting
2370     */
2371     RGraph.getGutterSuggest = function (obj, data)
2372     {
2373         var str = RGraph.number_format(obj, RGraph.array_max(RGraph.getScale(RGraph.array_max(data), obj)), obj.Get('chart.units.pre'), obj.Get('chart.units.post'));
2374
2375         // Take into account the HBar
2376         if (obj.type == 'hbar') {
2377
2378             var str = '';
2379             var len = 0;
2380
2381             for (var i=0; i<obj.Get('chart.labels').length; ++i) {
2382                 str = (obj.Get('chart.labels').length > str.length ? obj.Get('chart.labels')[i] : str);
2383             }
2384         }
2385
2386         obj.context.font = obj.Get('chart.text.size') + 'pt ' + obj.Get('chart.text.font');
2387
2388         len = obj.context.measureText(str).width + 5;
2389
2390         return (obj.type == 'hbar' ? len / 3 : len);
2391     }
2392
2393
2394     /**
2395     * A basic Array shift gunction
2396     *
2397     * @param  object The numerical array to work on
2398     * @return        The new array
2399     */
2400     RGraph.array_shift = function (arr)
2401     {
2402         var ret = [];
2403
2404         for (var i=1; i<arr.length; ++i) ret.push(arr[i]);
2405
2406         return ret;
2407     }
2408
2409
2410     /**
2411     * If you prefer, you can use the SetConfig() method to set the configuration information
2412     * for your chart. You may find that setting the configuration this way eases reuse.
2413     *
2414     * @param object obj    The graph object
2415     * @param object config The graph configuration information
2416     */
2417     RGraph.SetConfig = function (obj, config)
2418     {
2419         for (i in config) {
2420             if (typeof(i) == 'string') {
2421                 obj.Set(i, config[i]);
2422             }
2423         }
2424
2425         return obj;
2426     }
2427
2428
2429     /**
2430     * This function gets the canvas height. Defaults to the actual
2431     * height but this can be changed by setting chart.height.
2432     *
2433     * @param object obj The graph object
2434     */
2435     RGraph.GetHeight = function (obj)
2436     {
2437         var height = obj.Get('chart.height');
2438
2439         return height ? height : obj.canvas.height;
2440     }
2441
2442
2443     /**
2444     * This function gets the canvas width. Defaults to the actual
2445     * width but this can be changed by setting chart.width.
2446     *
2447     * @param object obj The graph object
2448     */
2449     RGraph.GetWidth = function (obj)
2450     {
2451         var width = obj.Get('chart.width');
2452
2453         return width ? width : obj.canvas.width;
2454     }