libraries/RGraph.pie.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     if (typeof(RGraph) == 'undefined') RGraph = {};
  16
  17     /**
  18     * The pie chart constructor
  19     *
  20     * @param data array The data to be represented on the pie chart
  21     */
  22     RGraph.Pie = function (id, data)
  23     {
  24         this.id                = id;
  25         this.canvas            = document.getElementById(id);
  26         this.context           = this.canvas.getContext("2d");
  27         this.canvas.__object__ = this;
  28         this.total             = 0;
  29         this.subTotal          = 0;
  30         this.angles            = [];
  31         this.data              = data;
  32         this.properties        = [];
  33         this.type              = 'pie';
  34         this.isRGraph          = true;
  35
  36
  37         /**
  38         * Compatibility with older browsers
  39         */
  40         RGraph.OldBrowserCompat(this.context);
  41
  42         this.properties = {
  43             'chart.colors':                 ['rgb(255,0,0)', '#ddd', 'rgb(0,255,0)', 'rgb(0,0,255)', 'pink', 'yellow', 'red', 'rgb(0,255,255)', 'black', 'white'],
  44             'chart.strokestyle':            '#999',
  45             'chart.linewidth':              1,
  46             'chart.labels':                 [],
  47             'chart.labels.sticks':          false,
  48             'chart.labels.sticks.color':    '#aaa',
  49             'chart.segments':               [],
  50             'chart.gutter':                 25,
  51             'chart.title':                  '',
  52             'chart.title.background':       null,
  53             'chart.title.hpos':             null,
  54             'chart.title.vpos':             null,
  55             'chart.shadow':                 false,
  56             'chart.shadow.color':           'rgba(0,0,0,0.5)',
  57             'chart.shadow.offsetx':         3,
  58             'chart.shadow.offsety':         3,
  59             'chart.shadow.blur':            3,
  60             'chart.text.size':              10,
  61             'chart.text.color':             'black',
  62             'chart.text.font':              'Verdana',
  63             'chart.contextmenu':            null,
  64             'chart.tooltips':               [],
  65             'chart.tooltips.event':         'onclick',
  66             'chart.tooltips.effect':        'fade',
  67             'chart.tooltips.css.class':     'RGraph_tooltip',
  68             'chart.tooltips.highlight':     true,
  69             'chart.radius':                 null,
  70             'chart.highlight.style':        '3d',
  71             'chart.highlight.style.2d.color': 'rgba(255,255,255,0.5)',
  72             'chart.border':                 false,
  73             'chart.border.color':           'rgba(255,255,255,0.5)',
  74             'chart.key':                    null,
  75             'chart.key.background':         'white',
  76             'chart.key.position':           'graph',
  77             'chart.key.shadow':             false,
  78             'chart.key.shadow.color':       '#666',
  79             'chart.key.shadow.blur':        3,
  80             'chart.key.shadow.offsetx':     2,
  81             'chart.key.shadow.offsety':     2,
  82             'chart.key.position.gutter.boxed': true,
  83             'chart.key.position.x':         null,
  84             'chart.key.position.y':         null,
  85             'chart.key.color.shape':        'square',
  86             'chart.key.rounded':            true,
  87             'chart.annotatable':            false,
  88             'chart.annotate.color':         'black',
  89             'chart.align':                  'center',
  90             'chart.zoom.factor':            1.5,
  91             'chart.zoom.fade.in':           true,
  92             'chart.zoom.fade.out':          true,
  93             'chart.zoom.hdir':              'right',
  94             'chart.zoom.vdir':              'down',
  95             'chart.zoom.frames':            10,
  96             'chart.zoom.delay':             50,
  97             'chart.zoom.shadow':            true,
  98             'chart.zoom.mode':              'canvas',
  99             'chart.zoom.thumbnail.width':   75,
 100             'chart.zoom.thumbnail.height':  75,
 101             'chart.zoom.background':        true,
 102             'chart.zoom.action':            'zoom',
 103             'chart.resizable':              false,
 104             'chart.variant':                'pie'
 105         }
 106
 107         /**
 108         * Calculate the total
 109         */
 110         for (var i=0,len=data.length; i<len; i++) {
 111             this.total += data[i];
 112         }
 113
 114         // Check the common library has been included
 115         if (typeof(RGraph) == 'undefined') {
 116             alert('[PIE] Fatal error: The common library does not appear to have been included');
 117         }
 118     }
 119
 120
 121     /**
 122     * A generic setter
 123     */
 124     RGraph.Pie.prototype.Set = function (name, value)
 125     {
 126         this.properties[name] = value;
 127     }
 128
 129
 130     /**
 131     * A generic getter
 132     */
 133     RGraph.Pie.prototype.Get = function (name)
 134     {
 135         return this.properties[name];
 136     }
 137
 138
 139     /**
 140     * This draws the pie chart
 141     */
 142     RGraph.Pie.prototype.Draw = function ()
 143     {
 144         /**
 145         * Fire the onbeforedraw event
 146         */
 147         RGraph.FireCustomEvent(this, 'onbeforedraw');
 148
 149
 150         /**
 151         * Clear all of this canvases event handlers (the ones installed by RGraph)
 152         */
 153         RGraph.ClearEventListeners(this.id);
 154
 155
 156         this.diameter    = Math.min(this.canvas.height, this.canvas.width) - (2 * this.Get('chart.gutter'));
 157         this.radius      = this.Get('chart.radius') ? this.Get('chart.radius') : this.diameter / 2;
 158         // this.centerx now defined below
 159         this.centery     = this.canvas.height / 2;
 160         this.subTotal    = 0;
 161         this.angles      = [];
 162
 163         /**
 164         * Alignment (Pie is center aligned by default) Only if centerx is not defined - donut defines the centerx
 165         */
 166         if (this.Get('chart.align') == 'left') {
 167             this.centerx = this.radius + this.Get('chart.gutter');
 168
 169         } else if (this.Get('chart.align') == 'right') {
 170             this.centerx = this.canvas.width - (this.radius + this.Get('chart.gutter'));
 171
 172         } else {
 173             this.centerx = this.canvas.width / 2;
 174         }
 175
 176         /**
 177         * Draw the shadow if required
 178         */
 179         if (this.Get('chart.shadow')) {
 180
 181             var offsetx = document.all ? this.Get('chart.shadow.offsetx') : 0;
 182             var offsety = document.all ? this.Get('chart.shadow.offsety') : 0;
 183
 184             this.context.beginPath();
 185             this.context.fillStyle = this.Get('chart.shadow.color');
 186
 187             this.context.shadowColor   = this.Get('chart.shadow.color');
 188             this.context.shadowBlur    = this.Get('chart.shadow.blur');
 189             this.context.shadowOffsetX = this.Get('chart.shadow.offsetx');
 190             this.context.shadowOffsetY = this.Get('chart.shadow.offsety');
 191
 192             this.context.arc(this.centerx + offsetx, this.centery + offsety, this.radius, 0, 6.28, 0);
 193
 194             this.context.fill();
 195
 196             // Now turn off the shadow
 197             RGraph.NoShadow(this);
 198         }
 199
 200         /**
 201         * The total of the array of values
 202         */
 203         this.total = RGraph.array_sum(this.data);
 204
 205         for (var i=0,len=this.data.length; i<len; i++) {
 206             var angle = (this.data[i] / this.total) * 360;
 207
 208             this.DrawSegment(angle,
 209                              this.Get('chart.colors')[i],
 210                              i == (this.data.length - 1));
 211         }
 212
 213         /**
 214         * Redraw the seperating lines
 215         */
 216         if (this.Get('chart.linewidth') > 0) {
 217             this.context.beginPath();
 218             this.context.lineWidth = this.Get('chart.linewidth');
 219             this.context.strokeStyle = this.Get('chart.strokestyle');
 220
 221             for (var i=0,len=this.angles.length; i<len; ++i) {
 222                 this.context.moveTo(this.centerx, this.centery);
 223                 this.context.arc(this.centerx, this.centery, this.radius, this.angles[i][0] / 57.3, (this.angles[i][0] + 0.01) / 57.3, 0);
 224             }
 225
 226             this.context.stroke();
 227
 228             /**
 229             * And finally redraw the border
 230             */
 231             this.context.beginPath();
 232             this.context.moveTo(this.centerx, this.centery);
 233             this.context.arc(this.centerx, this.centery, this.radius, 0, 6.28, 0);
 234             this.context.stroke();
 235         }
 236
 237         /**
 238         * Draw label sticks
 239         */
 240         if (this.Get('chart.labels.sticks')) {
 241             this.DrawSticks();
 242
 243             // Redraw the border going around the Pie chart if the stroke style is NOT white
 244             if (
 245                    this.Get('chart.strokestyle') != 'white'
 246                 && this.Get('chart.strokestyle') != '#fff'
 247                 && this.Get('chart.strokestyle') != '#fffffff'
 248                 && this.Get('chart.strokestyle') != 'rgb(255,255,255)'
 249                 && this.Get('chart.strokestyle') != 'rgba(255,255,255,0)'
 250                ) {
 251
 252                 this.context.beginPath();
 253                     this.context.strokeStyle = this.Get('chart.strokestyle');
 254                     this.context.lineWidth = this.Get('chart.linewidth');
 255                     this.context.arc(this.centerx, this.centery, this.radius, 0, 6.28, false);
 256                 this.context.stroke();
 257             }
 258         }
 259
 260         /**
 261         * Draw the labels
 262         */
 263         this.DrawLabels();
 264
 265         /**
 266         * Draw the title
 267         */
 268         if (this.Get('chart.align') == 'left') {
 269             var centerx = this.radius + this.Get('chart.gutter');
 270
 271         } else if (this.Get('chart.align') == 'right') {
 272             var centerx = this.canvas.width - (this.radius + this.Get('chart.gutter'));
 273
 274         } else {
 275             var centerx = null;
 276         }
 277
 278         RGraph.DrawTitle(this.canvas, this.Get('chart.title'), this.Get('chart.gutter'), centerx, this.Get('chart.text.size') + 2);
 279
 280
 281         /**
 282         * Setup the context menu if required
 283         */
 284         if (this.Get('chart.contextmenu')) {
 285             RGraph.ShowContext(this);
 286         }
 287
 288         /**
 289         * Tooltips
 290         */
 291         if (this.Get('chart.tooltips').length) {
 292
 293             /**
 294             * Register this object for redrawing
 295             */
 296             RGraph.Register(this);
 297
 298             /**
 299             * The onclick event
 300             */
 301             //this.canvas.onclick = function (e)
 302             var canvas_onclick_func = function (e)
 303             {
 304                 RGraph.HideZoomedCanvas();
 305
 306                 e = RGraph.FixEventObject(e);
 307
 308                 var mouseCoords = RGraph.getMouseXY(e);
 309
 310                 var canvas  = e.target;
 311                 var context = canvas.getContext('2d');
 312                 var obj     = e.target.__object__;
 313
 314                 var x       = mouseCoords[0] - obj.centerx;
 315                 var y       = mouseCoords[1] - obj.centery;
 316                 var theta   = Math.atan(y / x); // RADIANS
 317                 var hyp     = y / Math.sin(theta);
 318
 319
 320
 321                 /**
 322                 * If it's actually a donut make sure the hyp is bigger
 323                 * than the size of the hole in the middle
 324                 */
 325                 if (obj.Get('chart.variant') == 'donut' && Math.abs(hyp) < (obj.radius / 2)) {
 326                     return;
 327                 }
 328
 329                 /**
 330                 * The angles for each segment are stored in "angles",
 331                 * so go through that checking if the mouse position corresponds
 332                 */
 333                 var isDonut = obj.Get('chart.variant') == 'donut';
 334                 var hStyle  = obj.Get('chart.highlight.style');
 335                 var segment = RGraph.getSegment(e);
 336
 337                 if (segment) {
 338
 339
 340                     if (RGraph.Registry.Get('chart.tooltip') && segment[5] == RGraph.Registry.Get('chart.tooltip').__index__) {
 341                         return;
 342                     } else {
 343                         RGraph.Redraw();
 344                     }
 345
 346                     if (isDonut || hStyle == '2d') {
 347
 348                         context.beginPath();
 349
 350                         context.fillStyle = obj.Get('chart.highlight.style.2d.color');
 351
 352                         context.moveTo(obj.centerx, obj.centery);
 353                         context.arc(obj.centerx, obj.centery, obj.radius, RGraph.degrees2Radians(obj.angles[segment[5]][0]), RGraph.degrees2Radians(obj.angles[segment[5]][1]), 0);
 354                         context.lineTo(obj.centerx, obj.centery);
 355                         context.closePath();
 356
 357                         context.fill();
 358
 359                         //Removed 7th December 2010
 360                         //context.stroke();
 361
 362                     } else {
 363
 364                         context.lineWidth = 2;
 365
 366                         /**
 367                         * Draw a white segment where the one that has been clicked on was
 368                         */
 369                         context.fillStyle = 'white';
 370                         context.strokeStyle = 'white';
 371                         context.beginPath();
 372                         context.moveTo(obj.centerx, obj.centery);
 373                         context.arc(obj.centerx, obj.centery, obj.radius, obj.angles[segment[5]][0] / 57.3, obj.angles[segment[5]][1] / 57.3, 0);
 374                         context.stroke();
 375                         context.fill();
 376
 377                         context.lineWidth = 1;
 378
 379                         context.shadowColor   = '#666';
 380                         context.shadowBlur    = 3;
 381                         context.shadowOffsetX = 3;
 382                         context.shadowOffsetY = 3;
 383
 384                         // Draw the new segment
 385                         context.beginPath();
 386                             context.fillStyle   = obj.Get('chart.colors')[segment[5]];
 387                             context.strokeStyle = 'rgba(0,0,0,0)';
 388                             context.moveTo(obj.centerx - 3, obj.centery - 3);
 389                             context.arc(obj.centerx - 3, obj.centery - 3, obj.radius, RGraph.degrees2Radians(obj.angles[segment[5]][0]), RGraph.degrees2Radians(obj.angles[segment[5]][1]), 0);
 390                             context.lineTo(obj.centerx - 3, obj.centery - 3);
 391                         context.closePath();
 392
 393                         context.stroke();
 394                         context.fill();
 395
 396                         // Turn off the shadow
 397                         RGraph.NoShadow(obj);
 398
 399                         /**
 400                         * If a border is defined, redraw that
 401                         */
 402                         if (obj.Get('chart.border')) {
 403                             context.beginPath();
 404                             context.strokeStyle = obj.Get('chart.border.color');
 405                             context.lineWidth = 5;
 406                             context.arc(obj.centerx - 3, obj.centery - 3, obj.radius - 2, RGraph.degrees2Radians(obj.angles[i][0]), RGraph.degrees2Radians(obj.angles[i][1]), 0);
 407                             context.stroke();
 408                         }
 409                     }
 410
 411                     /**
 412                     * If a tooltip is defined, show it
 413                     */
 414
 415                     /**
 416                     * Get the tooltip text
 417                     */
 418                     if (typeof(obj.Get('chart.tooltips')) == 'function') {
 419                         var text = String(obj.Get('chart.tooltips')(segment[5]));
 420
 421                     } else if (typeof(obj.Get('chart.tooltips')) == 'object' && typeof(obj.Get('chart.tooltips')[segment[5]]) == 'function') {
 422                         var text = String(obj.Get('chart.tooltips')[segment[5]](segment[5]));
 423
 424                     } else if (typeof(obj.Get('chart.tooltips')) == 'object') {
 425                         var text = String(obj.Get('chart.tooltips')[segment[5]]);
 426
 427                     } else {
 428                         var text = '';
 429                     }
 430
 431                     if (text) {
 432                         RGraph.Tooltip(canvas, text, e.pageX, e.pageY, segment[5]);
 433                     }
 434
 435                     /**
 436                     * Need to redraw the key?
 437                     */
 438                     if (obj.Get('chart.key') && obj.Get('chart.key').length && obj.Get('chart.key.position') == 'graph') {
 439                         RGraph.DrawKey(obj, obj.Get('chart.key'), obj.Get('chart.colors'));
 440                     }
 441
 442                     e.stopPropagation();
 443
 444                     return;
 445                 }
 446             }
 447             var event_name = this.Get('chart.tooltips.event') == 'onmousemove' ? 'mousemove' : 'click';
 448
 449             this.canvas.addEventListener(event_name, canvas_onclick_func, false);
 450             RGraph.AddEventListener(this.id, event_name, canvas_onclick_func);
 451
 452
 453
 454
 455
 456
 457
 458
 459             /**
 460             * The onmousemove event for changing the cursor
 461             */
 462             //this.canvas.onmousemove = function (e)
 463             var canvas_onmousemove_func = function (e)
 464             {
 465                 RGraph.HideZoomedCanvas();
 466
 467                 e = RGraph.FixEventObject(e);
 468
 469                 var segment = RGraph.getSegment(e);
 470
 471                 if (segment) {
 472                     e.target.style.cursor = 'pointer';
 473
 474                     return;
 475                 }
 476
 477                 /**
 478                 * Put the cursor back to null
 479                 */
 480                 e.target.style.cursor = 'default';
 481             }
 482             this.canvas.addEventListener('mousemove', canvas_onmousemove_func, false);
 483             RGraph.AddEventListener(this.id, 'mousemove', canvas_onmousemove_func);
 484         }
 485
 486
 487         /**
 488         * If a border is pecified, draw it
 489         */
 490         if (this.Get('chart.border')) {
 491             this.context.beginPath();
 492             this.context.lineWidth = 5;
 493             this.context.strokeStyle = this.Get('chart.border.color');
 494
 495             this.context.arc(this.centerx,
 496                              this.centery,
 497                              this.radius - 2,
 498                              0,
 499                              6.28,
 500                              0);
 501
 502             this.context.stroke();
 503         }
 504
 505         /**
 506         * Draw the kay if desired
 507         */
 508         if (this.Get('chart.key') != null) {
 509             //this.Set('chart.key.position', 'graph');
 510             RGraph.DrawKey(this, this.Get('chart.key'), this.Get('chart.colors'));
 511         }
 512
 513
 514         /**
 515         * If this is actually a donut, draw a big circle in the middle
 516         */
 517         if (this.Get('chart.variant') == 'donut') {
 518             this.context.beginPath();
 519             this.context.strokeStyle = this.Get('chart.strokestyle');
 520             this.context.fillStyle   = 'white';//this.Get('chart.fillstyle');
 521             this.context.arc(this.centerx, this.centery, this.radius / 2, 0, 6.28, 0);
 522             this.context.stroke();
 523             this.context.fill();
 524         }
 525
 526         RGraph.NoShadow(this);
 527
 528         /**
 529         * If the canvas is annotatable, do install the event handlers
 530         */
 531         if (this.Get('chart.annotatable')) {
 532             RGraph.Annotate(this);
 533         }
 534
 535         /**
 536         * This bit shows the mini zoom window if requested
 537         */
 538         if (this.Get('chart.zoom.mode') == 'thumbnail' || this.Get('chart.zoom.mode') == 'area') {
 539             RGraph.ShowZoomWindow(this);
 540         }
 541
 542
 543         /**
 544         * This function enables resizing
 545         */
 546         if (this.Get('chart.resizable')) {
 547             RGraph.AllowResizing(this);
 548         }
 549
 550         /**
 551         * Fire the RGraph ondraw event
 552         */
 553         RGraph.FireCustomEvent(this, 'ondraw');
 554     }
 555
 556
 557     /**
 558     * Draws a single segment of the pie chart
 559     *
 560     * @param int degrees The number of degrees for this segment
 561     */
 562     RGraph.Pie.prototype.DrawSegment = function (degrees, color, last)
 563     {
 564         var context  = this.context;
 565         var canvas   = this.canvas;
 566         var subTotal = this.subTotal;
 567
 568         context.beginPath();
 569
 570             context.fillStyle   = color;
 571             context.strokeStyle = this.Get('chart.strokestyle');
 572             context.lineWidth   = 0;
 573
 574             context.arc(this.centerx,
 575                         this.centery,
 576                         this.radius,
 577                         subTotal / 57.3,
 578                         (last ? 360 : subTotal + degrees) / 57.3,
 579                         0);
 580
 581             context.lineTo(this.centerx, this.centery);
 582
 583             // Keep hold of the angles
 584             this.angles.push([subTotal, subTotal + degrees])
 585         this.context.closePath();
 586
 587         this.context.fill();
 588
 589         /**
 590         * Calculate the segment angle
 591         */
 592         this.Get('chart.segments').push([subTotal, subTotal + degrees]);
 593         this.subTotal += degrees;
 594     }
 595
 596     /**
 597     * Draws the graphs labels
 598     */
 599     RGraph.Pie.prototype.DrawLabels = function ()
 600     {
 601         var hAlignment = 'left';
 602         var vAlignment = 'center';
 603         var labels     = this.Get('chart.labels');
 604         var context    = this.context;
 605
 606         /**
 607         * Turn the shadow off
 608         */
 609         RGraph.NoShadow(this);
 610
 611         context.fillStyle = 'black';
 612         context.beginPath();
 613
 614         /**
 615         * Draw the key (ie. the labels)
 616         */
 617         if (labels && labels.length) {
 618
 619             var text_size = this.Get('chart.text.size');
 620
 621             for (i=0; i<labels.length; ++i) {
 622
 623                 /**
 624                 * T|his ensures that if we're given too many labels, that we don't get an error
 625                 */
 626                 if (typeof(this.Get('chart.segments')[i]) == 'undefined') {
 627                     continue;
 628                 }
 629
 630                 // Move to the centre
 631                 context.moveTo(this.centerx,this.centery);
 632
 633                 var a = this.Get('chart.segments')[i][0] + ((this.Get('chart.segments')[i][1] - this.Get('chart.segments')[i][0]) / 2);
 634
 635                 /**
 636                 * Alignment
 637                 */
 638                 if (a < 90) {
 639                     hAlignment = 'left';
 640                     vAlignment = 'center';
 641                 } else if (a < 180) {
 642                     hAlignment = 'right';
 643                     vAlignment = 'center';
 644                 } else if (a < 270) {
 645                     hAlignment = 'right';
 646                     vAlignment = 'center';
 647                 } else if (a < 360) {
 648                     hAlignment = 'left';
 649                     vAlignment = 'center';
 650                 }
 651
 652                 context.fillStyle = this.Get('chart.text.color');
 653
 654                 RGraph.Text(context,
 655                             this.Get('chart.text.font'),
 656                             text_size,
 657                             this.centerx + ((this.radius + 10)* Math.cos(a / 57.3)) + (this.Get('chart.labels.sticks') ? (a < 90 || a > 270 ? 2 : -2) : 0),
 658                             this.centery + (((this.radius + 10) * Math.sin(a / 57.3))),
 659                             labels[i],
 660                             vAlignment,
 661                             hAlignment);
 662             }
 663
 664             context.fill();
 665         }
 666     }
 667
 668
 669     /**
 670     * This function draws the pie chart sticks (for the labels)
 671     */
 672     RGraph.Pie.prototype.DrawSticks = function ()
 673     {
 674         var context  = this.context;
 675         var segments = this.Get('chart.segments');
 676         var offset   = this.Get('chart.linewidth') / 2;
 677
 678         for (var i=0; i<segments.length; ++i) {
 679
 680             var degrees = segments[i][1] - segments[i][0];
 681
 682             context.beginPath();
 683             context.strokeStyle = this.Get('chart.labels.sticks.color');
 684             context.lineWidth   = 1;
 685
 686             var midpoint = (segments[i][0] + (degrees / 2)) / 57.3;
 687
 688             context.arc(this.centerx,
 689                         this.centery,
 690                         this.radius + 7,
 691                         midpoint,
 692                         midpoint + 0.01,
 693                         0);
 694
 695
 696             context.arc(this.centerx,
 697                         this.centery,
 698                         this.radius - offset,
 699                         midpoint,
 700                         midpoint + 0.01,
 701                         0);
 702
 703             context.stroke();
 704         }
 705     }