[77] | 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 traditional radar chart constructor |
---|
| 19 | * |
---|
| 20 | * @param string id The ID of the canvas |
---|
| 21 | * @param array data An array of data to represent |
---|
| 22 | */ |
---|
| 23 | RGraph.Radar = function (id, data) |
---|
| 24 | { |
---|
| 25 | this.id = id; |
---|
| 26 | this.canvas = document.getElementById(id); |
---|
| 27 | this.context = this.canvas.getContext('2d'); |
---|
| 28 | this.canvas.__object__ = this; |
---|
| 29 | this.size = null;// Set in the .Draw() method |
---|
| 30 | this.type = 'radar'; |
---|
| 31 | this.coords = []; |
---|
| 32 | this.isRGraph = true; |
---|
| 33 | this.data = []; |
---|
| 34 | this.max = 0; |
---|
| 35 | |
---|
| 36 | for (var i=1; i<arguments.length; ++i) { |
---|
| 37 | this.data.push(RGraph.array_clone(arguments[i])); |
---|
| 38 | this.max = Math.max(this.max, RGraph.array_max(arguments[i])); |
---|
| 39 | } |
---|
| 40 | |
---|
| 41 | /** |
---|
| 42 | * Compatibility with older browsers |
---|
| 43 | */ |
---|
| 44 | RGraph.OldBrowserCompat(this.context); |
---|
| 45 | |
---|
| 46 | |
---|
| 47 | this.properties = { |
---|
| 48 | 'chart.strokestyle': 'black', |
---|
| 49 | 'chart.gutter.left': 25, |
---|
| 50 | 'chart.gutter.right': 25, |
---|
| 51 | 'chart.gutter.top': 25, |
---|
| 52 | 'chart.gutter.bottom': 25, |
---|
| 53 | 'chart.linewidth': 1, |
---|
| 54 | 'chart.colors': ['red'], |
---|
| 55 | 'chart.colors.alpha': null, |
---|
| 56 | 'chart.circle': 0, |
---|
| 57 | 'chart.circle.fill': 'red', |
---|
| 58 | 'chart.circle.stroke': 'black', |
---|
| 59 | 'chart.labels': [], |
---|
| 60 | 'chart.labels.offsetx': 10, |
---|
| 61 | 'chart.labels.offsety': 10, |
---|
| 62 | 'chart.background.circles': true, |
---|
| 63 | 'chart.text.size': 10, |
---|
| 64 | 'chart.text.font': 'Verdana', |
---|
| 65 | 'chart.text.color': 'black', |
---|
| 66 | 'chart.title': '', |
---|
| 67 | 'chart.title.background': null, |
---|
| 68 | 'chart.title.hpos': null, |
---|
| 69 | 'chart.title.vpos': null, |
---|
| 70 | 'chart.title.color': 'black', |
---|
| 71 | 'chart.linewidth': 1, |
---|
| 72 | |
---|
| 73 | 'chart.key': null, |
---|
| 74 | 'chart.key.background': 'white', |
---|
| 75 | 'chart.key.shadow': false, |
---|
| 76 | 'chart.key.shadow.color': '#666', |
---|
| 77 | 'chart.key.shadow.blur': 3, |
---|
| 78 | 'chart.key.shadow.offsetx': 2, |
---|
| 79 | 'chart.key.shadow.offsety': 2, |
---|
| 80 | 'chart.key.position': 'graph', |
---|
| 81 | 'chart.key.halign': 'right', |
---|
| 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.key.linewidth': 1, |
---|
| 88 | |
---|
| 89 | 'chart.contextmenu': null, |
---|
| 90 | 'chart.annotatable': false, |
---|
| 91 | 'chart.annotate.color': 'black', |
---|
| 92 | 'chart.zoom.factor': 1.5, |
---|
| 93 | 'chart.zoom.fade.in': true, |
---|
| 94 | 'chart.zoom.fade.out': true, |
---|
| 95 | 'chart.zoom.hdir': 'right', |
---|
| 96 | 'chart.zoom.vdir': 'down', |
---|
| 97 | 'chart.zoom.frames': 10, |
---|
| 98 | 'chart.zoom.delay': 50, |
---|
| 99 | 'chart.zoom.shadow': true, |
---|
| 100 | 'chart.zoom.mode': 'canvas', |
---|
| 101 | 'chart.zoom.thumbnail.width': 75, |
---|
| 102 | 'chart.zoom.thumbnail.height': 75, |
---|
| 103 | 'chart.zoom.background': true, |
---|
| 104 | 'chart.zoom.action': 'zoom', |
---|
| 105 | 'chart.tooltips.effect': 'fade', |
---|
| 106 | 'chart.tooltips.css.class': 'RGraph_tooltip', |
---|
| 107 | 'chart.tooltips.highlight': true, |
---|
| 108 | 'chart.tooltips.coords.adjust': [0,0], |
---|
| 109 | 'chart.highlight.stroke': 'gray', |
---|
| 110 | 'chart.highlight.fill': 'white', |
---|
| 111 | 'chart.resizable': false, |
---|
| 112 | 'chart.resize.handle.adjust': [0,0], |
---|
| 113 | 'chart.resize.handle.background': null, |
---|
| 114 | 'chart.labels.axes': 'nsew', |
---|
| 115 | 'chart.ymax': null |
---|
| 116 | } |
---|
| 117 | |
---|
| 118 | // Must have at least 3 points |
---|
| 119 | for (var dataset=0; dataset<this.data.length; ++dataset) { |
---|
| 120 | if (this.data[dataset].length < 3) { |
---|
| 121 | alert('[RADAR] You must specify at least 3 data points'); |
---|
| 122 | return; |
---|
| 123 | } |
---|
| 124 | } |
---|
| 125 | } |
---|
| 126 | |
---|
| 127 | |
---|
| 128 | /** |
---|
| 129 | * A simple setter |
---|
| 130 | * |
---|
| 131 | * @param string name The name of the property to set |
---|
| 132 | * @param string value The value of the property |
---|
| 133 | */ |
---|
| 134 | RGraph.Radar.prototype.Set = function (name, value) |
---|
| 135 | { |
---|
| 136 | this.properties[name] = value; |
---|
| 137 | |
---|
| 138 | /** |
---|
| 139 | * If the name is chart.color, set chart.colors too |
---|
| 140 | */ |
---|
| 141 | if (name == 'chart.color') { |
---|
| 142 | this.properties['chart.colors'] = [value]; |
---|
| 143 | } |
---|
| 144 | } |
---|
| 145 | |
---|
| 146 | |
---|
| 147 | /** |
---|
| 148 | * A simple hetter |
---|
| 149 | * |
---|
| 150 | * @param string name The name of the property to get |
---|
| 151 | */ |
---|
| 152 | RGraph.Radar.prototype.Get = function (name) |
---|
| 153 | { |
---|
| 154 | return this.properties[name]; |
---|
| 155 | } |
---|
| 156 | |
---|
| 157 | |
---|
| 158 | /** |
---|
| 159 | * The draw method which does all the brunt of the work |
---|
| 160 | */ |
---|
| 161 | RGraph.Radar.prototype.Draw = function () |
---|
| 162 | { |
---|
| 163 | /** |
---|
| 164 | * Fire the onbeforedraw event |
---|
| 165 | */ |
---|
| 166 | RGraph.FireCustomEvent(this, 'onbeforedraw'); |
---|
| 167 | |
---|
| 168 | /** |
---|
| 169 | * Clear all of this canvases event handlers (the ones installed by RGraph) |
---|
| 170 | */ |
---|
| 171 | RGraph.ClearEventListeners(this.id); |
---|
| 172 | |
---|
| 173 | /** |
---|
| 174 | * This is new in May 2011 and facilitates indiviual gutter settings, |
---|
| 175 | * eg chart.gutter.left |
---|
| 176 | */ |
---|
| 177 | this.gutterLeft = this.Get('chart.gutter.left'); |
---|
| 178 | this.gutterRight = this.Get('chart.gutter.right'); |
---|
| 179 | this.gutterTop = this.Get('chart.gutter.top'); |
---|
| 180 | this.gutterBottom = this.Get('chart.gutter.bottom'); |
---|
| 181 | |
---|
| 182 | this.centerx = ((this.canvas.width - this.gutterLeft - this.gutterRight) / 2) + this.gutterLeft; |
---|
| 183 | this.centery = ((this.canvas.height - this.gutterTop - this.gutterBottom) / 2) + this.gutterTop; |
---|
| 184 | this.size = Math.min(this.canvas.width - this.gutterLeft - this.gutterRight, this.canvas.height - this.gutterTop - this.gutterBottom); |
---|
| 185 | |
---|
| 186 | // Work out the maximum value and the sum |
---|
| 187 | if (!this.Get('chart.ymax')) { |
---|
| 188 | |
---|
| 189 | // this.max is calculated in the constructor |
---|
| 190 | |
---|
| 191 | this.scale = RGraph.getScale(this.max, this); |
---|
| 192 | this.max = this.scale[4]; |
---|
| 193 | } else { |
---|
| 194 | var ymax = this.Get('chart.ymax'); |
---|
| 195 | |
---|
| 196 | this.scale = [ |
---|
| 197 | ymax * 0.2, |
---|
| 198 | ymax * 0.4, |
---|
| 199 | ymax * 0.6, |
---|
| 200 | ymax * 0.8, |
---|
| 201 | ymax * 1 |
---|
| 202 | ]; |
---|
| 203 | this.max = this.scale[4]; |
---|
| 204 | } |
---|
| 205 | |
---|
| 206 | this.DrawBackground(); |
---|
| 207 | this.DrawAxes(); |
---|
| 208 | this.DrawCircle(); |
---|
| 209 | this.DrawAxisLabels(); |
---|
| 210 | this.DrawChart(); |
---|
| 211 | this.DrawLabels(); |
---|
| 212 | |
---|
| 213 | // Draw the title |
---|
| 214 | if (this.Get('chart.title')) { |
---|
| 215 | RGraph.DrawTitle(this.canvas, this.Get('chart.title'), this.gutterTop) |
---|
| 216 | } |
---|
| 217 | |
---|
| 218 | // Draw the key if necessary |
---|
| 219 | // obj, key, colors |
---|
| 220 | if (this.Get('chart.key')) { |
---|
| 221 | RGraph.DrawKey(this, this.Get('chart.key'), this.Get('chart.colors')); |
---|
| 222 | } |
---|
| 223 | |
---|
| 224 | /** |
---|
| 225 | * Show the context menu |
---|
| 226 | */ |
---|
| 227 | if (this.Get('chart.contextmenu')) { |
---|
| 228 | RGraph.ShowContext(this); |
---|
| 229 | } |
---|
| 230 | |
---|
| 231 | /** |
---|
| 232 | * If the canvas is annotatable, do install the event handlers |
---|
| 233 | */ |
---|
| 234 | if (this.Get('chart.annotatable')) { |
---|
| 235 | RGraph.Annotate(this); |
---|
| 236 | } |
---|
| 237 | |
---|
| 238 | /** |
---|
| 239 | * This bit shows the mini zoom window if requested |
---|
| 240 | */ |
---|
| 241 | if (this.Get('chart.zoom.mode') == 'thumbnail' || this.Get('chart.zoom.mode') == 'area') { |
---|
| 242 | RGraph.ShowZoomWindow(this); |
---|
| 243 | } |
---|
| 244 | |
---|
| 245 | |
---|
| 246 | /** |
---|
| 247 | * This function enables resizing |
---|
| 248 | */ |
---|
| 249 | if (this.Get('chart.resizable')) { |
---|
| 250 | RGraph.AllowResizing(this); |
---|
| 251 | } |
---|
| 252 | |
---|
| 253 | |
---|
| 254 | /** |
---|
| 255 | * This function enables adjusting |
---|
| 256 | */ |
---|
| 257 | if (this.Get('chart.adjustable')) { |
---|
| 258 | RGraph.AllowAdjusting(this); |
---|
| 259 | } |
---|
| 260 | |
---|
| 261 | /** |
---|
| 262 | * Fire the RGraph ondraw event |
---|
| 263 | */ |
---|
| 264 | RGraph.FireCustomEvent(this, 'ondraw'); |
---|
| 265 | } |
---|
| 266 | |
---|
| 267 | |
---|
| 268 | /** |
---|
| 269 | * Draws the background circles |
---|
| 270 | */ |
---|
| 271 | RGraph.Radar.prototype.DrawBackground = function () |
---|
| 272 | { |
---|
| 273 | var color = '#ddd'; |
---|
| 274 | |
---|
| 275 | /** |
---|
| 276 | * Draws the background circles |
---|
| 277 | */ |
---|
| 278 | if (this.Get('chart.background.circles')) { |
---|
| 279 | |
---|
| 280 | this.context.strokeStyle = color; |
---|
| 281 | this.context.beginPath(); |
---|
| 282 | |
---|
| 283 | for (var r=5; r<(this.size / 2); r+=15) { |
---|
| 284 | |
---|
| 285 | this.context.moveTo(this.centerx, this.centery); |
---|
| 286 | this.context.arc(this.centerx, this.centery,r, 0, 6.28, 0); |
---|
| 287 | } |
---|
| 288 | |
---|
| 289 | this.context.stroke(); |
---|
| 290 | } |
---|
| 291 | |
---|
| 292 | |
---|
| 293 | /** |
---|
| 294 | * Draw diagonals |
---|
| 295 | */ |
---|
| 296 | this.context.strokeStyle = color; |
---|
| 297 | for (var i=0; i<360; i+=15) { |
---|
| 298 | this.context.beginPath(); |
---|
| 299 | this.context.arc(this.centerx, this.centery, this.size / 2, (i / 360) * (2 * Math.PI), ((i+0.01) / 360) * (2 * Math.PI), 0); // The 0.01 avoids a bug in Chrome 6 |
---|
| 300 | this.context.lineTo(this.centerx, this.centery); |
---|
| 301 | this.context.stroke(); |
---|
| 302 | } |
---|
| 303 | } |
---|
| 304 | |
---|
| 305 | |
---|
| 306 | /** |
---|
| 307 | * Draws the axes |
---|
| 308 | */ |
---|
| 309 | RGraph.Radar.prototype.DrawAxes = function () |
---|
| 310 | { |
---|
| 311 | this.context.strokeStyle = 'black'; |
---|
| 312 | |
---|
| 313 | var halfsize = this.size / 2; |
---|
| 314 | |
---|
| 315 | this.context.beginPath(); |
---|
| 316 | |
---|
| 317 | /** |
---|
| 318 | * The Y axis |
---|
| 319 | */ |
---|
| 320 | this.context.moveTo(this.centerx, this.centery + halfsize); |
---|
| 321 | this.context.lineTo(this.centerx, this.centery - halfsize); |
---|
| 322 | |
---|
| 323 | |
---|
| 324 | // Draw the bits at either end of the Y axis |
---|
| 325 | this.context.moveTo(this.centerx - 5, this.centery + halfsize); |
---|
| 326 | this.context.lineTo(this.centerx + 5, this.centery + halfsize); |
---|
| 327 | this.context.moveTo(this.centerx - 5, this.centery - halfsize); |
---|
| 328 | this.context.lineTo(this.centerx + 5, this.centery - halfsize); |
---|
| 329 | |
---|
| 330 | // Draw X axis tick marks |
---|
| 331 | for (var y=(this.centery - halfsize); y<(this.centery + halfsize); y+=15) { |
---|
| 332 | this.context.moveTo(this.centerx - 3, y); |
---|
| 333 | this.context.lineTo(this.centerx + 3, y); |
---|
| 334 | } |
---|
| 335 | |
---|
| 336 | /** |
---|
| 337 | * The X axis |
---|
| 338 | */ |
---|
| 339 | this.context.moveTo(this.centerx - halfsize, this.centery); |
---|
| 340 | this.context.lineTo(this.centerx + halfsize, this.centery); |
---|
| 341 | |
---|
| 342 | // Draw the bits at the end of the X axis |
---|
| 343 | this.context.moveTo(this.centerx - halfsize, this.centery - 5); |
---|
| 344 | this.context.lineTo(this.centerx - halfsize, this.centery + 5); |
---|
| 345 | this.context.moveTo(this.centerx + halfsize, this.centery - 5); |
---|
| 346 | this.context.lineTo(this.centerx + halfsize, this.centery + 5); |
---|
| 347 | |
---|
| 348 | // Draw X axis tick marks |
---|
| 349 | for (var x=(this.centerx - halfsize); x<(this.centerx + halfsize); x+=15) { |
---|
| 350 | this.context.moveTo(x, this.centery - 3); |
---|
| 351 | this.context.lineTo(x, this.centery + 3); |
---|
| 352 | } |
---|
| 353 | |
---|
| 354 | /** |
---|
| 355 | * Finally draw it to the canvas |
---|
| 356 | */ |
---|
| 357 | this.context.stroke(); |
---|
| 358 | } |
---|
| 359 | |
---|
| 360 | |
---|
| 361 | /** |
---|
| 362 | * The function which actually draws the radar chart |
---|
| 363 | */ |
---|
| 364 | RGraph.Radar.prototype.DrawChart = function () |
---|
| 365 | { |
---|
| 366 | var alpha = this.Get('chart.colors.alpha'); |
---|
| 367 | |
---|
| 368 | if (typeof(alpha) == 'number') { |
---|
| 369 | var oldAlpha = this.context.globalAlpha; |
---|
| 370 | this.context.globalAlpha = alpha; |
---|
| 371 | } |
---|
| 372 | |
---|
| 373 | for (var dataset=0; dataset<this.data.length; ++dataset) { |
---|
| 374 | |
---|
| 375 | this.context.beginPath(); |
---|
| 376 | |
---|
| 377 | this.coords[dataset] = []; |
---|
| 378 | |
---|
| 379 | for (var i=0; i<this.data[dataset].length; ++i) { |
---|
| 380 | this.coords[dataset][i] = this.GetCoordinates(dataset, i); |
---|
| 381 | } |
---|
| 382 | |
---|
| 383 | /** |
---|
| 384 | * Now go through the coords and draw the chart itself |
---|
| 385 | */ |
---|
| 386 | this.context.strokeStyle = this.Get('chart.strokestyle'); |
---|
| 387 | this.context.fillStyle = this.Get('chart.colors')[dataset]; |
---|
| 388 | this.context.lineWidth = this.Get('chart.linewidth'); |
---|
| 389 | |
---|
| 390 | for (i=0; i<this.coords[dataset].length; ++i) { |
---|
| 391 | if (i == 0) { |
---|
| 392 | this.context.moveTo(this.coords[dataset][i][0], this.coords[dataset][i][1]); |
---|
| 393 | } else { |
---|
| 394 | this.context.lineTo(this.coords[dataset][i][0], this.coords[dataset][i][1]); |
---|
| 395 | } |
---|
| 396 | } |
---|
| 397 | |
---|
| 398 | this.context.closePath(); |
---|
| 399 | |
---|
| 400 | this.context.stroke(); |
---|
| 401 | this.context.fill(); |
---|
| 402 | |
---|
| 403 | /** |
---|
| 404 | * Can now handletooltips |
---|
| 405 | */ |
---|
| 406 | if (this.Get('chart.tooltips')) { |
---|
| 407 | |
---|
| 408 | RGraph.Register(this); |
---|
| 409 | |
---|
| 410 | var canvas_onmousemove_func = function (e) |
---|
| 411 | { |
---|
| 412 | e = RGraph.FixEventObject(e); |
---|
| 413 | |
---|
| 414 | var canvas = e.target; |
---|
| 415 | var obj = canvas.__object__; |
---|
| 416 | var x = e.offsetX; |
---|
| 417 | var y = e.offsetY; |
---|
| 418 | var overHotspot = false; |
---|
| 419 | |
---|
| 420 | for(var dataset=0; dataset<obj.coords.length; ++dataset) { |
---|
| 421 | for (var i=0; i<obj.coords[dataset].length; ++i) { |
---|
| 422 | |
---|
| 423 | var xCoord = obj.coords[dataset][i][0]; |
---|
| 424 | var yCoord = obj.coords[dataset][i][1]; |
---|
| 425 | var tooltips = obj.Get('chart.tooltips'); |
---|
| 426 | var idx = Number(i); |
---|
| 427 | |
---|
| 428 | if ( |
---|
| 429 | (tooltips[i] || tooltips) // The order here is important due to short circuiting |
---|
| 430 | && x < (xCoord + 5 + obj.Get('chart.tooltips.coords.adjust')[0]) |
---|
| 431 | && x > (xCoord - 5 + obj.Get('chart.tooltips.coords.adjust')[0]) |
---|
| 432 | && y > (yCoord - 5 + obj.Get('chart.tooltips.coords.adjust')[1]) |
---|
| 433 | && y < (yCoord + 5 + obj.Get('chart.tooltips.coords.adjust')[1]) |
---|
| 434 | ) { |
---|
| 435 | |
---|
| 436 | // This accounts for the datasets and increases the index accordingly |
---|
| 437 | for(var j=0; j<dataset; j++) { |
---|
| 438 | if (typeof(obj.data[j]) == 'object') { |
---|
| 439 | i += obj.data[j].length; |
---|
| 440 | } |
---|
| 441 | } |
---|
| 442 | |
---|
| 443 | idx = Number(i); |
---|
| 444 | |
---|
| 445 | if ( !RGraph.Registry.Get('chart.tooltip') |
---|
| 446 | || (RGraph.Registry.Get('chart.tooltip').__index__ != idx && RGraph.Registry.Get('chart.tooltip').__dataset__ != dataset) |
---|
| 447 | || (RGraph.Registry.Get('chart.tooltip').__index__ != idx && RGraph.Registry.Get('chart.tooltip').__dataset__ == dataset) |
---|
| 448 | ) { |
---|
| 449 | |
---|
| 450 | /** |
---|
| 451 | * Get the tooltip text |
---|
| 452 | */ |
---|
| 453 | if (typeof(obj.Get('chart.tooltips')) == 'function') { |
---|
| 454 | var text = String(obj.Get('chart.tooltips')(i)); |
---|
| 455 | |
---|
| 456 | } else if (typeof(obj.Get('chart.tooltips')) == 'object' && typeof(obj.Get('chart.tooltips')[i]) == 'function') { |
---|
| 457 | var text = String(obj.Get('chart.tooltips')[i](i)); |
---|
| 458 | |
---|
| 459 | } else if (typeof(obj.Get('chart.tooltips')) == 'object' && typeof(obj.Get('chart.tooltips')[i]) == 'string') { |
---|
| 460 | var text = String(obj.Get('chart.tooltips')[i]); |
---|
| 461 | |
---|
| 462 | } else { |
---|
| 463 | var text = null; |
---|
| 464 | } |
---|
| 465 | |
---|
| 466 | if (typeof(text) == 'string' && text.length) { |
---|
| 467 | |
---|
| 468 | overHotspot = true; |
---|
| 469 | obj.canvas.style.cursor = 'pointer'; |
---|
| 470 | |
---|
| 471 | RGraph.Clear(obj.canvas); |
---|
| 472 | obj.Draw(); |
---|
| 473 | |
---|
| 474 | if (obj.Get('chart.tooltips.highlight')) { |
---|
| 475 | obj.context.beginPath(); |
---|
| 476 | obj.context.strokeStyle = obj.Get('chart.highlight.stroke'); |
---|
| 477 | obj.context.fillStyle = obj.Get('chart.highlight.fill'); |
---|
| 478 | obj.context.arc(xCoord, yCoord, 2, 0, 6.28, 0); |
---|
| 479 | obj.context.fill(); |
---|
| 480 | obj.context.stroke(); |
---|
| 481 | } |
---|
| 482 | |
---|
| 483 | RGraph.Tooltip(obj.canvas, text, e.pageX, e.pageY, idx); |
---|
| 484 | |
---|
| 485 | // Set the data set value on the tooltip |
---|
| 486 | RGraph.Registry.Get('chart.tooltip').__index__ = idx; |
---|
| 487 | RGraph.Registry.Get('chart.tooltip').__dataset__ = dataset; |
---|
| 488 | |
---|
| 489 | |
---|
| 490 | } |
---|
| 491 | //} else if (RGraph.Registry.Get('chart.tooltip') && RGraph.Registry.Get('chart.tooltip').__index__ == idx && RGraph.Registry.Get('chart.tooltip').__dataset__ == dataset) { |
---|
| 492 | } else { |
---|
| 493 | overHotspot = true; |
---|
| 494 | obj.canvas.style.cursor = 'pointer'; |
---|
| 495 | } |
---|
| 496 | } |
---|
| 497 | } |
---|
| 498 | } |
---|
| 499 | |
---|
| 500 | if (!overHotspot) { |
---|
| 501 | obj.canvas.style.cursor = 'default'; |
---|
| 502 | } |
---|
| 503 | } |
---|
| 504 | this.canvas.addEventListener('mousemove', canvas_onmousemove_func, false); |
---|
| 505 | RGraph.AddEventListener(this.id, 'mousemove', canvas_onmousemove_func); |
---|
| 506 | } |
---|
| 507 | } |
---|
| 508 | |
---|
| 509 | // Reset the globalAlpha |
---|
| 510 | if (typeof(alpha) == 'number') { |
---|
| 511 | this.context.globalAlpha = oldAlpha; |
---|
| 512 | } |
---|
| 513 | } |
---|
| 514 | |
---|
| 515 | |
---|
| 516 | /** |
---|
| 517 | * Gets the coordinates for a particular mark |
---|
| 518 | * |
---|
| 519 | * @param number i The index of the data (ie which one it is) |
---|
| 520 | * @return array A two element array of the coordinates |
---|
| 521 | */ |
---|
| 522 | RGraph.Radar.prototype.GetCoordinates = function (dataset, index) |
---|
| 523 | { |
---|
| 524 | // The number of data points |
---|
| 525 | var len = this.data[dataset].length; |
---|
| 526 | |
---|
| 527 | // The magnitude of the data (NOT the x/y coords) |
---|
| 528 | var mag = (this.data[dataset][index] / this.max) * (this.size / 2); |
---|
| 529 | |
---|
| 530 | /** |
---|
| 531 | * Get the angle |
---|
| 532 | */ |
---|
| 533 | var angle = (6.28 / len) * index; // In radians |
---|
| 534 | |
---|
| 535 | /** |
---|
| 536 | * Work out the X/Y coordinates |
---|
| 537 | */ |
---|
| 538 | var x = Math.cos(angle) * mag; |
---|
| 539 | var y = Math.sin(angle) * mag; |
---|
| 540 | |
---|
| 541 | /** |
---|
| 542 | * Put the coordinate in the right quadrant |
---|
| 543 | */ |
---|
| 544 | x = this.centerx + x; |
---|
| 545 | y = this.centery + (index == 0 ? 0 : y); |
---|
| 546 | |
---|
| 547 | return [x,y]; |
---|
| 548 | } |
---|
| 549 | |
---|
| 550 | |
---|
| 551 | /** |
---|
| 552 | * This function adds the labels to the chart |
---|
| 553 | */ |
---|
| 554 | RGraph.Radar.prototype.DrawLabels = function () |
---|
| 555 | { |
---|
| 556 | var labels = this.Get('chart.labels'); |
---|
| 557 | |
---|
| 558 | if (labels && labels.length > 0) { |
---|
| 559 | |
---|
| 560 | this.context.lineWidth = 1; |
---|
| 561 | this.context.fillStyle = this.Get('chart.text.color'); |
---|
| 562 | |
---|
| 563 | var offsetx = this.Get('chart.labels.offsetx'); |
---|
| 564 | var offsety = this.Get('chart.labels.offsety'); |
---|
| 565 | |
---|
| 566 | for (var i=0; i<labels.length; ++i) { |
---|
| 567 | |
---|
| 568 | var ds = 0; |
---|
| 569 | |
---|
| 570 | for (var dataset=0; dataset<this.data.length; ++dataset) { |
---|
| 571 | if (this.data[dataset][i] > this.data[ds][i]) { |
---|
| 572 | ds = dataset; |
---|
| 573 | } |
---|
| 574 | } |
---|
| 575 | |
---|
| 576 | var x = this.coords[ds][i][0]; |
---|
| 577 | var y = this.coords[ds][i][1]; |
---|
| 578 | var text = labels[i]; |
---|
| 579 | var hAlign = 'center'; |
---|
| 580 | var vAlign = 'center'; |
---|
| 581 | var quartile = (i / this.coords.length); |
---|
| 582 | |
---|
| 583 | // ~Manually do labels on the right middle axis |
---|
| 584 | if (i == 0) { |
---|
| 585 | hAlign = 'left'; |
---|
| 586 | vAlign = 'center'; |
---|
| 587 | x += offsetx; |
---|
| 588 | |
---|
| 589 | } else { |
---|
| 590 | |
---|
| 591 | hAlign = (x < this.centerx) ? 'right' : 'left'; |
---|
| 592 | vAlign = (y < this.centery) ? 'bottom' : 'top'; |
---|
| 593 | x += (x < this.centerx) ? (-1 * offsetx) : offsetx; |
---|
| 594 | y += (y < this.centery) ? (-1 * offsety) : offsety; |
---|
| 595 | |
---|
| 596 | if (i / this.data.length == 0.25) { x -= offsetx; hAlign = 'center'; |
---|
| 597 | } else if (i / this.data.length == 0.5) { y -= offsety; vAlign = 'center'; |
---|
| 598 | } else if (i / this.data.length == 0.75) { x += offsetx; hAlign = 'center'; } |
---|
| 599 | } |
---|
| 600 | |
---|
| 601 | // context, font, size, x, y, text |
---|
| 602 | RGraph.Text(this.context, this.Get('chart.text.font'), this.Get('chart.text.size'), x, y, text, vAlign, hAlign, true, null, 'white'); |
---|
| 603 | } |
---|
| 604 | } |
---|
| 605 | } |
---|
| 606 | |
---|
| 607 | |
---|
| 608 | /** |
---|
| 609 | * Draws the circle. No arguments as it gets the information from the object properties. |
---|
| 610 | */ |
---|
| 611 | RGraph.Radar.prototype.DrawCircle = function () |
---|
| 612 | { |
---|
| 613 | var circle = {}; |
---|
| 614 | circle.limit = this.Get('chart.circle'); |
---|
| 615 | circle.fill = this.Get('chart.circle.fill'); |
---|
| 616 | circle.stroke = this.Get('chart.circle.stroke'); |
---|
| 617 | |
---|
| 618 | if (circle.limit) { |
---|
| 619 | |
---|
| 620 | var r = (circle.limit / this.max) * (this.size / 2); |
---|
| 621 | |
---|
| 622 | this.context.fillStyle = circle.fill; |
---|
| 623 | this.context.strokeStyle = circle.stroke; |
---|
| 624 | |
---|
| 625 | this.context.beginPath(); |
---|
| 626 | this.context.arc(this.centerx, this.centery, r, 0, 6.28, 0); |
---|
| 627 | this.context.fill(); |
---|
| 628 | this.context.stroke(); |
---|
| 629 | } |
---|
| 630 | } |
---|
| 631 | |
---|
| 632 | |
---|
| 633 | /** |
---|
| 634 | * Unsuprisingly, draws the labels |
---|
| 635 | */ |
---|
| 636 | RGraph.Radar.prototype.DrawAxisLabels = function () |
---|
| 637 | { |
---|
| 638 | this.context.lineWidth = 1; |
---|
| 639 | |
---|
| 640 | // Set the color to black |
---|
| 641 | this.context.fillStyle = 'black'; |
---|
| 642 | this.context.strokeStyle = 'black'; |
---|
| 643 | |
---|
| 644 | var r = (this.size/ 2); |
---|
| 645 | var font_face = this.Get('chart.text.font'); |
---|
| 646 | var font_size = this.Get('chart.text.size'); |
---|
| 647 | var context = this.context; |
---|
| 648 | var axes = this.Get('chart.labels.axes').toLowerCase(); |
---|
| 649 | var color = 'rgba(255,255,255,0.8)'; |
---|
| 650 | |
---|
| 651 | // The "North" axis labels |
---|
| 652 | if (axes.indexOf('n') > -1) { |
---|
| 653 | RGraph.Text(context,font_face,font_size,this.centerx,this.centery - (r * 0.2),String(this.scale[0]),'center','center',true,false,color); |
---|
| 654 | RGraph.Text(context, font_face, font_size, this.centerx, this.centery - (r * 0.4), String(this.scale[1]), 'center', 'center', true, false, color); |
---|
| 655 | RGraph.Text(context, font_face, font_size, this.centerx, this.centery - (r * 0.6), String(this.scale[2]), 'center', 'center', true, false, color); |
---|
| 656 | RGraph.Text(context, font_face, font_size, this.centerx, this.centery - (r * 0.8), String(this.scale[3]), 'center', 'center', true, false, color); |
---|
| 657 | RGraph.Text(context, font_face, font_size, this.centerx, this.centery - r, String(this.scale[4]), 'center', 'center', true, false, color); |
---|
| 658 | } |
---|
| 659 | |
---|
| 660 | // The "South" axis labels |
---|
| 661 | if (axes.indexOf('s') > -1) { |
---|
| 662 | RGraph.Text(context, font_face, font_size, this.centerx, this.centery + (r * 0.2), String(this.scale[0]), 'center', 'center', true, false, color); |
---|
| 663 | RGraph.Text(context, font_face, font_size, this.centerx, this.centery + (r * 0.4), String(this.scale[1]), 'center', 'center', true, false, color); |
---|
| 664 | RGraph.Text(context, font_face, font_size, this.centerx, this.centery + (r * 0.6), String(this.scale[2]), 'center', 'center', true, false, color); |
---|
| 665 | RGraph.Text(context, font_face, font_size, this.centerx, this.centery + (r * 0.8), String(this.scale[3]), 'center', 'center', true, false, color); |
---|
| 666 | RGraph.Text(context, font_face, font_size, this.centerx, this.centery + r, String(this.scale[4]), 'center', 'center', true, false, color); |
---|
| 667 | } |
---|
| 668 | |
---|
| 669 | // The "East" axis labels |
---|
| 670 | if (axes.indexOf('e') > -1) { |
---|
| 671 | RGraph.Text(context, font_face, font_size, this.centerx + (r * 0.2), this.centery, String(this.scale[0]), 'center', 'center', true, false, color); |
---|
| 672 | RGraph.Text(context, font_face, font_size, this.centerx + (r * 0.4), this.centery, String(this.scale[1]), 'center', 'center', true, false, color); |
---|
| 673 | RGraph.Text(context, font_face, font_size, this.centerx + (r * 0.6), this.centery, String(this.scale[2]), 'center', 'center', true, false, color); |
---|
| 674 | RGraph.Text(context, font_face, font_size, this.centerx + (r * 0.8), this.centery, String(this.scale[3]), 'center', 'center', true, false, color); |
---|
| 675 | RGraph.Text(context, font_face, font_size, this.centerx + r, this.centery, String(this.scale[4]), 'center', 'center', true, false, color); |
---|
| 676 | } |
---|
| 677 | |
---|
| 678 | // The "West" axis labels |
---|
| 679 | if (axes.indexOf('w') > -1) { |
---|
| 680 | RGraph.Text(context, font_face, font_size, this.centerx - (r * 0.2), this.centery, String(this.scale[0]), 'center', 'center', true, false, color); |
---|
| 681 | RGraph.Text(context, font_face, font_size, this.centerx - (r * 0.4), this.centery, String(this.scale[1]), 'center', 'center', true, false, color); |
---|
| 682 | RGraph.Text(context, font_face, font_size, this.centerx - (r * 0.6), this.centery, String(this.scale[2]), 'center', 'center', true, false, color); |
---|
| 683 | RGraph.Text(context, font_face, font_size, this.centerx - (r * 0.8), this.centery, String(this.scale[3]), 'center', 'center', true, false, color); |
---|
| 684 | RGraph.Text(context, font_face, font_size, this.centerx - r, this.centery, String(this.scale[4]), 'center', 'center', true, false, color); |
---|
| 685 | } |
---|
| 686 | |
---|
| 687 | RGraph.Text(context, font_face, font_size, this.centerx, this.centery, '0', 'center', 'center', true, false, color); |
---|
| 688 | } |
---|