1/*Copyright (c) 2013 NTS Corp. All Rights Reserved. 2 3Permission is hereby granted, free of charge, to any person 4obtaining a copy of this software and associated documentation 5files (the "Software"), to deal in the Software without 6restriction, including without limitation the rights to use, 7copy, modify, merge, publish, distribute, sublicense, and/or sell 8copies of the Software, and to permit persons to whom the 9Software is furnished to do so, subject to the following 10conditions: 11 12The above copyright notice and this permission notice shall be 13included in all copies or substantial portions of the Software. 14THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 15EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 16OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 17NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 18HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 19WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 20FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 21OTHER DEALINGS IN THE SOFTWARE. 22*/ 23/*Developed by Insook Choe ([email protected]), Inho Jung([email protected])*/ 24 25var CONST_SVG_URL = 'http://www.w3.org/2000/svg'; 26var VML_NAME_SPACE = 'urn:schemas-microsoft-com:vml' 27var CONST_MAX_RADIUS = 100; 28var CONST_DECREMENT = 20; 29 30var Nwagon = { 31 32 chart: function(options){ 33 var isIE_old = false; 34 if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) { //test for MSIE x.x; 35 var ieversion = new Number(RegExp.$1); // capture x.x portion and store as a number 36 if (ieversion <= 8){ 37 38 isIE_old = true; 39 if(!document.namespaces['v']) { 40 document.namespaces.add('v', VML_NAME_SPACE); 41 } 42 } 43 } 44 var chartObj = new Object(); 45 chartObj.chartType = options['chartType']; 46 chartObj.dataset = options['dataset']; 47 chartObj.legend = options['legend']; 48 chartObj.width = options['chartSize']['width']; 49 chartObj.height = options['chartSize']['height']; 50 chartObj.chart_div = options['chartDiv']; 51 52 //************ values.length should be equal to names.length **************// 53 switch (chartObj.chartType) 54 { 55 case ('radar') : 56 isIE_old ? Nwagon_ie.radar.drawRadarChart(chartObj) : this.radar.drawRadarChart(chartObj); 57 break; 58 case ('polar') : 59 case ('polar_pie') : 60 chartObj.core_circle_radius = options['core_circle_radius']; 61 chartObj.core_circle_value = options['core_circle_value']; 62 chartObj.max = options['maxValue']; 63 chartObj.increment = options['increment']; 64 isIE_old ? Nwagon_ie.polar.drawPolarChart(chartObj) : this.polar.drawPolarChart(chartObj); 65 break; 66 case ('donut') : 67 case ('pie') : 68 chartObj.core_circle_radius = 0; 69 if(chartObj.chartType == 'donut'){ 70 chartObj.core_circle_radius = options['core_circle_radius']; 71 } 72 chartObj.donut_width = options['donut_width']; 73 isIE_old ? Nwagon_ie.donut.drawDonutChart(chartObj) : this.donut.drawDonutChart(chartObj); 74 break; 75 case ('line') : 76 case ('area') : 77 case ('jira') : 78 if (options.hasOwnProperty('bottomOffsetValue')) chartObj.bottomOffsetValue = options['bottomOffsetValue']; 79 if (options.hasOwnProperty('leftOffsetValue')) chartObj.leftOffsetValue = options['leftOffsetValue']; 80 if (options['maxValue']) chartObj.highest = options['maxValue']; 81 if (options['minValue']) chartObj.lowest = options['minValue']; 82 if (options['increment']) chartObj.increment = options['increment']; 83 if (options['isGuideLineNeeded']) chartObj.isGuideLineNeeded = options['isGuideLineNeeded']; 84 isIE_old ? Nwagon_ie.line.drawLineChart(chartObj) : this.line.drawLineChart(chartObj); 85 break; 86 case ('column'): 87 case ('stacked_column') : 88 case ('multi_column') : 89 if (options.hasOwnProperty('bottomOffsetValue')) chartObj.bottomOffsetValue = options['bottomOffsetValue']; 90 if (options.hasOwnProperty('leftOffsetValue')) chartObj.leftOffsetValue = options['leftOffsetValue']; 91 if (options.hasOwnProperty('topOffsetValue')) chartObj.topOffsetValue = options['topOffsetValue']; 92 if (options.hasOwnProperty('rightOffsetValue')) chartObj.rightOffsetValue = options['rightOffsetValue'];
93 if (options['maxValue']) chartObj.highest = options['maxValue']; 94 if (options['increment']) chartObj.increment = options['increment']; 95 96 isIE_old ? Nwagon_ie.column.drawColumnChart(chartObj) : this.column.drawColumnChart(chartObj); 97 break; 98 } 99 }, 100 101 createChartArea: function(parentSVG, chartType, viewbox, width, height){ 102 103 var chartDiv = document.getElementById(parentSVG); 104 var textArea = document.createElement('ul'); 105 textArea.className = 'accessibility'; 106 chartDiv.appendChild(textArea); 107 var attr = {'version':'1.1', 'width':width, 'height':height, 'viewBox':viewbox, 'class':'Nwagon_' + chartType, 'aria-hidden':'true'}; 108 var svg = Nwagon.createSvgElem('svg', attr); 109 chartDiv.appendChild(svg); 110 111 return svg; 112 }, 113 114 createSvgElem: function(elem, attr){ 115 var svgElem = document.createElementNS(CONST_SVG_URL, elem); 116 Nwagon.setAttributes(svgElem, attr); 117 return svgElem; 118 }, 119 120 setAttributes: function(svgObj, attributes){ 121 var keys_arr = Object.keys(attributes); 122 var len = keys_arr.length; 123 for(var i = 0; i<len; i++){ 124 svgObj.setAttribute(keys_arr[i], attributes[keys_arr[i]]); 125 } 126 }, 127 128 getMax: function(a){ 129 var maxValue = 0; 130 if(a.length){ 131 for (var j = 0; j < a.length; j++) 132 { 133 var a_sub = a[j]; 134 if(a_sub.length){ 135 for(var k = 0; k<a_sub.length; k++){ 136 if (typeof(a_sub[k]) == 'number' && a_sub[k] > maxValue) maxValue = a_sub[k]; 137 } 138 } 139 else{ 140 if (typeof(a[j]) == 'number' && a[j] > maxValue) maxValue = a[j]; 141 } 142 } 143 } 144 return maxValue; 145 }, 146 147 createTooltip: function(){ 148 var tooltip = Nwagon.createSvgElem('g', {'class':'tooltip'}); 149 var tooltipbg = Nwagon.createSvgElem('rect', {}); 150 tooltip.appendChild(tooltipbg); 151 152 var tooltiptxt = Nwagon.createSvgElem('text', {}); 153 tooltip.appendChild(tooltiptxt); 154 155 return tooltip; 156 }, 157 158 showToolTip: function(tooltip, px, py, value, height, ytextOffset, yRectOffset){ 159 return function(){ 160 tooltip.style.cssText = "display: block"; 161 var text_el = tooltip.getElementsByTagName('text')[0]; 162 text_el.textContent = ' '+value; 163 Nwagon.setAttributes(text_el, {'x':px, 'y':py-ytextOffset, 'text-anchor':'middle'}); 164 var width = text_el.getBBox().width; 165 Nwagon.setAttributes(tooltip.getElementsByTagName('rect')[0], {'x':(px-width/2)-5, 'y':py-yRectOffset, 'width':width+10,'height':height}); 166 } 167 }, 168 169 hideToolTip: function(tooltip){ 170 return function(){ 171 tooltip.style.cssText = "display: none"; 172 } 173 }, 174 175 getAngles: function(arr, angles){ 176 177 var total = 0; 178 for(var i=0; i<arr.length; i++){ 179 total+=arr[i]; 180 } 181 for(i=0; i<arr.length; i++){ 182 var degree = 360 * (arr[i]/total); 183 angles['angles'].push(degree); 184 angles['percent'].push(arr[i]/total); 185 angles['values'].push(arr[i]); 186 } 187 return angles; 188 }, 189 getOpacity: function(opa, r, max_r){ 190 var len = opa.length; 191 var interval = max_r/len; 192 var value = Math.ceil(r/interval); 193 return opa[value-1]; 194 }, 195 196 line:{ 197 points:[], 198 guide_line: null, 199 200 drawLabels: function(x, y, labelText){ 201 var attributes = {'x':x, 'y':y, 'text-anchor':'end'}; 202 var text = Nwagon.createSvgElem('text', attributes); 203 text.textContent = labelText; 204 return text; 205 }, 206 drawLineChart: function(obj){ 207 var type = obj.chartType; 208 var isAreaChart = (type == 'area'), isJira = (type == 'jira'); 209 var width = obj.width, height = obj.height; 210 var values = obj.dataset['values']; 211 var LeftOffsetAbsolute = obj.hasOwnProperty('leftOffsetValue') ? obj.leftOffsetValue : 50; 212 var BottomOffsetAbsolute = obj.hasOwnProperty('bottomOffsetValue') ? obj.bottomOffsetValue : 80; 213 var TopOffsetAbsolute = obj.hasOwnProperty('topOffsetValue') ? obj.topOffsetValue : 0; 214 var RightOffsetAbsolute = obj.hasOwnProperty('rightOffsetValue') ? obj.rightOffsetValue : 0; 215 var names = obj.legend['names'];
216 var isGuideNeeded = obj.hasOwnProperty('isGuideLineNeeded') ? obj.isGuideLineNeeded : false; 217 218 RightOffsetAbsolute = obj.dataset['fields'] ? (150 + RightOffsetAbsolute) : RightOffsetAbsolute; 219 220 var viewbox = (-LeftOffsetAbsolute) + ' ' + (BottomOffsetAbsolute-height) + ' ' + width + ' ' + height; 221 var svg = Nwagon.createChartArea(obj.chart_div, obj.chartType, viewbox, width, height); 222 var max = obj.highest ? obj.highest : Nwagon.getMax(values); 223 var min = obj.lowest ? obj.lowest : 0; 224 //this.drawBackground(svg, names.length, obj.dataset, obj.increment, max, min, width-LeftOffsetAbsolute-RightOffsetAbsolute, height-BottomOffsetAbsolute-TopOffsetAbsolute); // freesos 225 //this.drawLineForeground(obj.chart_div, svg, obj.legend, obj.dataset, obj.increment, max, min, width-LeftOffsetAbsolute-RightOffsetAbsolute, height-BottomOffsetAbsolute-TopOffsetAbsolute, isAreaChart, isJira, isGuideNeeded); 226 this.drawLineForeground(obj.chart_div, svg, obj.legend, obj.dataset, obj.increment, max, min, width, height-BottomOffsetAbsolute-TopOffsetAbsolute, isAreaChart, isJira, isGuideNeeded); // freesos 227 228 // after guide line is drawn, add eventlistener to svg 229 if(Nwagon.line.guide_line){ 230 var line = Nwagon.line.guide_line; 231 var interval = Math.floor((width-LeftOffsetAbsolute-RightOffsetAbsolute)/names.length); 232 var x_coord_max = line.x1.animVal.value; 233 var text_add = '', index = 0; 234 var fields = obj.dataset['fields']; 235 var _h = fields ? fields.length * 14 : 14; 236 var tool = Nwagon.createTooltip(); 237 var text_el = tool.getElementsByTagName('text')[0]; 238 if(text_el){ 239 for(var i = 0; i<fields.length; i++){ 240 var ts = Nwagon.createSvgElem('tspan', {}); 241 text_el.appendChild(ts); 242 } 243 } 244 svg.appendChild(tool); 245 246 var pt = svg.createSVGPoint(); 247 function cursorPoint(evt){ 248 pt.x = evt.clientX; pt.y = evt.clientY; 249 return pt.matrixTransform(svg.getScreenCTM().inverse()); 250 } 251 svg.addEventListener('mousemove',function(evt){ 252 var loc = cursorPoint(evt); 253 var x = loc.x; 254 if(x < 0) x = 0; 255 if(x > x_coord_max) x = x_coord_max; 256 if(loc.y < 0){ 257 line.setAttribute('x1', x); 258 line.setAttribute('x2', x); 259 index = Math.floor(x/interval); 260 tool.style.cssText = 'display: block'; 261 if(fields && values[index]){ 262 var ts_group = text_el.getElementsByTagName('tspan'); 263 for(var i = 0; i<fields.length; i++){ 264 ts_group[i].setAttribute('x', x); 265 if(i>0) ts_group[i].setAttribute('dy', 15); 266 ts_group[i].textContent = names[index] + '('+ fields[i] + '): ' + values[index][i]; 267 } 268 } 269 Nwagon.setAttributes(text_el, {'x':x, 'y':loc.y-40, 'text-anchor':'start'}); 270 var _width = text_el.getBBox().width; 271 Nwagon.setAttributes(tool.getElementsByTagName('rect')[0], {'x':x-5, 'y':loc.y-50, 'width':_width+10,'height':_h}); 272 } 273 },false); 274 svg.addEventListener('mouseout',function(evt){ 275 tool.style.cssText = 'display:none'; 276 },false); 277 } 278 }, 279 drawJiraForeground:function(parentDiv, _points, colors){ 280 var getSlopeAndAlpha = function(point_1, point_2){ 281 var values = {}; 282 var slope; 283 if((point_2[1] == point_1[1])){ 284 slope = 0; 285 } 286 else{ 287 slope = (point_2[1]-point_1[1])/(point_2[0]-point_1[0]); 288 } 289 values['alpha'] = point_1[1] - (slope * point_1[0]); 290 values['slope'] = slope; 291 return values; 292 }; 293 var drawPolygons = function(arr1, arr2){ 294 295 if(arr1 && arr2){ 296 var color, first, second, px, py; 297 var points_to_draw = ''; 298 299 var i = 0; 300 while ( i < arr1.length){ 301 if(arr1[i][1] > arr2[i][1]){ 302 first = arr1;
303 second = arr2; 304 color = colors[0]; 305 break; 306 } 307 if(arr1[i][1] < arr2[i][1]){ 308 first = arr2; 309 second = arr1; 310 color = colors[1]; 311 break; 312 } 313 i++; 314 } 315 var j = 0; 316 while(j<first.length){ 317 px = first[j][0]; 318 py = first[j][1]; 319 if(j === 0){ 320 points_to_draw += 'M '+px + ' -' + py; 321 } 322 else{ 323 points_to_draw += ' L '+px + ' -' + py; 324 } 325 j++; 326 } 327 var k = second.length-1; 328 while(k >=0){ 329 px = second[k][0]; 330 py = second[k][1]; 331 points_to_draw += ' L '+px + ' -' + py; 332 k--; 333 } 334 335 points_to_draw +=' Z'; 336 var unlayered = Nwagon.createSvgElem('path', {'d':points_to_draw, 'fill': color, 'opacity':'0.7'}); 337 polygons.appendChild(unlayered); 338 } 339 }; 340 341 var foregrounds = document.getElementById(parentDiv).querySelectorAll('.Nwagon_jira g.foreground'); 342 var foreground = foregrounds[foregrounds.length-1]; 343 344 var polygons = Nwagon.createSvgElem('g', {'class':'polygon'}); 345 foreground.appendChild(polygons); 346 347 var layered_points = []; 348 if(_points.length == 2){ 349 var colorOne = colors[0]; 350 var colorTwo = colors[1]; 351 var one = _points[0]; 352 var two = _points[1]; 353 var temp_one = [], temp_two = []; 354 355 if(one.length === two.length){ 356 var length = one.length; 357 358 359 for(var i = 0; i < length; i++){ 360 temp_one.push(one[i]); 361 temp_two.push(two[i]); 362 363 if((one[i][1] > two[i][1])) layered_points.push(two[i]); 364 else layered_points.push(one[i]); 365 366 if(i !== length-1){ 367 if( !((one[i][1] > two[i][1]) && (one[i+1][1] > two[i+1][1])) && 368 !((one[i][1] < two[i][1]) && (one[i+1][1] < two[i+1][1])) && 369 !((one[i][1] == two[i][1]) || (one[i+1][1] == two[i+1][1])) ) 370 { 371 var points_to_push = []; 372 var equation1 = getSlopeAndAlpha(one[i], one[i+1]); 373 var equation2 = getSlopeAndAlpha(two[i], two[i+1]); 374 var slope1 = equation1['slope']; 375 var slope2 = equation2['slope']; 376 var alpha1 = equation1['alpha']; 377 var alpha2 = equation2['alpha']; 378 379 var px = (alpha2 - alpha1)/(slope1-slope2); 380 var py = (px * slope1) + alpha1; 381 points_to_push.push(px); 382 points_to_push.push(py); 383 layered_points.push(points_to_push); 384 temp_one.push(points_to_push); // for making splicing easier push the cross _points twice 385 temp_one.push(points_to_push); 386 temp_two.push(points_to_push); 387 temp_two.push(points_to_push); 388 } 389 } 390 } 391 } 392 }
393 // Draw polygon where two areas are stacked up 394 if(layered_points.length){ 395 396 var points_to_draw = ''; 397 for (var i = 0; i<layered_points.length; i++){ 398 var px = layered_points[i][0]; 399 var py = layered_points[i][1]; 400 if(i === 0){ 401 points_to_draw += 'M '+px + ' -' + py; 402 } 403 else{ 404 points_to_draw += ' L '+px + ' -' + py; 405 } 406 } 407 points_to_draw += ' L '+layered_points[layered_points.length-1][0] + ' -' + 0 + ' L 0 0 Z'; 408 var layered_line = Nwagon.createSvgElem('path', {'d':points_to_draw, 'class':'layered'}); 409 polygons.appendChild(layered_line); 410 } 411 // Draw polygons for non-layered portions 412 if(temp_one.length === temp_two.length){ 413 var i = 0; 414 while(i<temp_one.length){ 415 if((temp_one[i][1] == temp_two[i][1] ) && (i !=0) || (i == temp_one.length-1)) { 416 var splice_one = temp_one.splice(i+1); 417 var splice_two = temp_two.splice(i+1); 418 drawPolygons(temp_one, temp_two); 419 420 temp_one = splice_one; 421 temp_two = splice_two; 422 i = 0; 423 } 424 i++; 425 } 426 } 427 }, 428 draw_vertex_and_tooltip:function(parentSVG, data, guide_needed){ 429 var circles = Nwagon.createSvgElem('g', {'class':'circles'}); 430 parentSVG.appendChild(circles); 431 if(!guide_needed){ 432 var tooltip = Nwagon.createTooltip(); 433 parentSVG.appendChild(tooltip); 434 } 435 for (var i = 0; i<data.length; i++){ 436 var vertex = Nwagon.createSvgElem('circle', data[i]['attributes']); 437 circles.appendChild(vertex); 438 if(!guide_needed){ 439 vertex.onmouseover = Nwagon.showToolTip(tooltip, data[i]['tooltip_x'], data[i]['tooltip_y'], data[i]['text'], 14, 7, 18); 440 vertex.onmouseout = Nwagon.hideToolTip(tooltip); 441 } 442 } 443 }, 444 drawLineForeground: function(parentDiv, parentSVG, legend, dataset, increment, max, min, width, height, isAreaChart, isJira, guide_line_needed){ 445 var numOfCols = legend['names'].length - 1; 446 var colWidth = (width/numOfCols).toFixed(3); 447 var yLimit = (Math.ceil((max-min)/increment)+1) * increment; 448 var px = '', cw = '', ch = ''; 449 var names = legend['names']; 450 var data = dataset['values']; 451 var colors = dataset['colorset']; 452 var fields = dataset['fields']; 453 var circle_and_tooltips = []; 454 var jira_points = []; 455 456 var foreground = Nwagon.createSvgElem('g', {'class':'foreground'}); 457 parentSVG.appendChild(foreground); 458 459 var lines = Nwagon.createSvgElem('g', {'class':'lines'}); 460 foreground.appendChild(lines); 461 462 var labels = Nwagon.createSvgElem('g', {'class':'labels'}); 463 foreground.appendChild(labels); 464 465 // Draw foreground elements (lines, circles, labels...) 466 cw = (3/5*colWidth); 467 if(data[0]){ 468 for (var k = 0; k < data[0].length; k++){ 469 var ul = document.getElementById(parentDiv).getElementsByTagName('ul')[0]; 470 if(ul){ 471 var textEl = document.createElement('li'); 472 textEl.innerHTML = fields[k]; 473 var innerUL = document.createElement('ul'); 474 textEl.appendChild(innerUL); 475 ul.appendChild(textEl); 476 } 477 478 var first_y = 0; 479 var points_to_draw = ''; 480 var line_points = []; 481 var start_point = 0; 482 for (var i = 0; i<data.length; i++){ 483 var circle_and_tooltip_data = {}; 484 var point_pair = []; 485 px = colWidth*i; 486 487 var py = ((data[i][k] - min) / yLimit) * height; 488 if(isNaN(py)){ 489 start_point++; 490 } 491 else{ 492 if(i === start_point){ 493 points_to_draw += 'M '+px + ' -' + py; 494 first_y = py; 495 } 496 else{ 497 points_to_draw += ' L '+px + ' -' + py; 498 } 499 point_pair.push(px); 500 point_pair.push(py); 501 line_points.push(point_pair); 502 503 var attributes = {'cx':px, 'cy':'-'+py, 'r':2, 'stroke': colors[k], 'fill':colors[k]}; 504 var tooltip_text = names[i] + '('+ fields[k] + '): ' + data[i][k].toString(); 505 506 circle_and_tooltip_data['attributes'] = attributes; 507 circle_and_tooltip_data['text'] = tooltip_text; 508 circle_and_tooltip_data['tooltip_x'] = px+cw/2; 509 circle_and_tooltip_data['tooltip_y'] = -py; 510 circle_and_tooltips.push(circle_and_tooltip_data); 511 512 if(innerUL){ 513 var innerLI = document.createElement('li'); 514 innerLI.innerHTML = 'Label ' + names[i] + ', Value '+ data[i][k].toString(); 515 innerUL.appendChild(innerLI); 516 } 517 } 518 if(k===0){ 519 var text = Nwagon.line.drawLabels(px + cw/2, 15, names[i], false, 0); 520 labels.appendChild(text); 521 } 522 } 523
524 var line = Nwagon.createSvgElem('path', {'d':points_to_draw, 'fill': 'none', 'stroke':colors[k]}); 525 526 if (isAreaChart){ 527 var polygon_to_draw = points_to_draw +' L '+px+ ' ' + 0 + ' L '+0 + ' ' + 0 + ' L '+0 + ' -' + first_y +' Z'; 528 var polygon = Nwagon.createSvgElem('path', {'d':polygon_to_draw, 'fill':colors[k], 'opacity': '0.8'}); 529 lines.appendChild(polygon); 530 } 531 lines.appendChild(line); 532 jira_points.push(line_points); 533 } 534 } 535 if(isJira){ 536 Nwagon.line.drawJiraForeground(parentDiv, jira_points, colors); 537 } 538 539 if(guide_line_needed){ 540 Nwagon.line.guide_line = Nwagon.createSvgElem('line', {'x1':numOfCols*colWidth, 'y1': 4, 'x2':numOfCols*colWidth, 'y2' : -height, 'class':'guide_line'}); 541 parentSVG.appendChild(Nwagon.line.guide_line); 542 } 543 544 Nwagon.line.draw_vertex_and_tooltip(foreground, circle_and_tooltips, guide_line_needed); 545 546 }, 547 548 drawBackground: function(parentSVG, numOfCols, dataset, increment, max, min, width, height){ 549 550 var colWidth = (width/numOfCols).toFixed(3); 551 var attributes = {}; 552 var px = '', yRatio = 1; 553 554 var background = Nwagon.createSvgElem('g', {'class':'background'}); 555 parentSVG.appendChild(background); 556 557 var numOfRows = Math.ceil((max-min)/increment); 558 var rowHeight = height/(numOfRows+1); 559 560 //Vertical lines(Fist line) 561 attributes = {'x1':'0', 'y1':'0', 'x2':'0', 'y2':-height + (rowHeight/2), 'class':'v'}; 562 var line = Nwagon.createSvgElem('line', attributes); 563 background.appendChild(line); 564 565 //Vertical lines(x-axis) 566 for (var i = 0; i < numOfCols; i++) 567 { 568 px = i * colWidth; 569 attributes = {'x1':px, 'y1': 4, 'x2':px, 'y2':-1 , 'class':'v'}; 570 line = Nwagon.createSvgElem('line', attributes); 571 background.appendChild(line); 572 } 573 574 //Horizontal lines 575 var count = 0; 576 for (i = 0; i<=numOfRows; i++) 577 { 578 var class_name = (i === 0) ? 'h' : 'h_dash' ; 579 attributes = {'x1':'-3', 'y1':'-'+ i*rowHeight, 'x2':(numOfCols*colWidth).toString(), 'y2':'-'+ i*rowHeight, 'class':class_name}; 580 line = Nwagon.createSvgElem('line', attributes); 581 background.appendChild(line); 582 583 attributes = {'x':'-15', 'y':-((count*rowHeight)-3), 'text-anchor':'end'}; 584 var text = Nwagon.createSvgElem('text', attributes); 585 text.textContent = ((count*increment) + min).toString(); 586 587 background.appendChild(text); 588 count++; 589 } 590 //Field Names 591 if(dataset['fields']) 592 { 593 var fields = Nwagon.createSvgElem('g', {'class':'fields'}); 594 background.appendChild(fields); 595 596 var numOfFields = dataset['fields'].length; 597 for (i = 0; i<numOfFields; i++) 598 { 599 px = width+20; 600 py = (30*i) - height + rowHeight; 601 602 attributes = {'x':px, 'y':py, 'width':20, 'height':15, 'fill':dataset['colorset'][i]}; 603 var badge = Nwagon.createSvgElem('rect', attributes); 604 fields.appendChild(badge); 605 606 attributes = {'x':px+30, 'y':py+7, 'alignment-baseline':'central'};
607 var name = Nwagon.createSvgElem('text', attributes); 608 name.textContent = dataset['fields'][i]; 609 fields.appendChild(name); 610 } 611 } 612 } 613 }, 614 615 column:{ 616 617 drawColumnChart: function(obj){ 618 619 var width = obj.width, height = obj.height; 620 var values = obj.dataset['values']; 621 var LeftOffsetAbsolute = obj.hasOwnProperty('leftOffsetValue') ? obj.leftOffsetValue : 50; 622 var BottomOffsetAbsolute = obj.hasOwnProperty('bottomOffsetValue') ? obj.bottomOffsetValue : 80; 623 var TopOffsetAbsolute = obj.hasOwnProperty('topOffsetValue') ? obj.topOffsetValue : 0; 624 var RightOffsetAbsolute = obj.hasOwnProperty('rightOffsetValue') ? obj.rightOffsetValue : 0; 625 626 RightOffsetAbsolute = obj.dataset['fields'] ? (150 + RightOffsetAbsolute) : RightOffsetAbsolute; 627 628 var viewbox = (-LeftOffsetAbsolute) + ' ' + (BottomOffsetAbsolute -height) + ' ' + width + ' ' + height; 629 var svg = Nwagon.createChartArea(obj.chart_div, obj.chartType, viewbox, width, height); 630 var max = obj.highest ? obj.highest : Nwagon.getMax(values); 631 632 this.drawBackground(svg, obj.legend['names'].length, obj.dataset, obj.increment, max, width-LeftOffsetAbsolute-RightOffsetAbsolute, height-BottomOffsetAbsolute-TopOffsetAbsolute); 633 this.drawColumnForeground(obj.chart_div, svg, obj.legend, obj.dataset, obj.increment, max, width-LeftOffsetAbsolute-RightOffsetAbsolute, height-BottomOffsetAbsolute-TopOffsetAbsolute, obj.chartType); 634 635 }, 636 637 drawColumn: function(parentGroup, width, height){ 638 639 var column = Nwagon.createSvgElem('rect', {'x':'0', 'y':-height, 'width':width, 'height':height}); 640 parentGroup.appendChild(column); 641 642 return column; 643 }, 644 645 drawLabels: function(x, y, labelText){ 646 647 var attributes = {'x':x, 'y':y, 'text-anchor':'end', 'transform':'rotate(315,'+ x +','+ y + ')'}; 648 var text = Nwagon.createSvgElem('text', attributes); 649 text.textContent = labelText; 650 651 return text; 652 }, 653 654 getColorSetforSingleColumnChart: function(max, values, colorset){ 655 var numOfColors = colorset.length; 656 var interval = max/numOfColors; 657 var colors = []; 658 659 for(var index = 0; index < values.length; index++){ 660 var colorIndex = Math.floor(values[index]/interval); 661 if (colorIndex == numOfColors) colorIndex--; 662 colors.push(colorset[colorIndex]); 663 } 664 return colors; 665 }, 666 667 drawColumnForeground: function(parentDiv, parentSVG, legend, dataset, increment, max, width, height, chartType){ 668 669 var names = legend['names']; 670 var numOfCols = names.length; 671 var colWidth = (width/numOfCols).toFixed(3); 672 var yLimit = (Math.ceil(max/increment)+1) * increment; 673 var px = '', cw = '', ch = ''; 674 var data = dataset['values']; 675 var chart_title = dataset['title']; 676 var fields = dataset['fields']; 677 678 var foreground = Nwagon.createSvgElem('g', {'class':'foreground'}); 679 parentSVG.appendChild(foreground); 680 681 var columns = Nwagon.createSvgElem('g', {'class':'columns'}); 682 foreground.appendChild(columns); 683 684 var labels = Nwagon.createSvgElem('g', {'class':'labels'}); 685 foreground.appendChild(labels); 686 687 var tooltip = Nwagon.createTooltip(); 688 foreground.appendChild(tooltip); 689 690 var drawColGroups = function(columns, ch, px, color, tooltipText, isStackedColumn, yValue){ 691 var colgroup = Nwagon.createSvgElem('g', {}); 692 columns.appendChild(colgroup); 693 694 var column = Nwagon.column.drawColumn(colgroup, cw, ch); 695 696 Nwagon.setAttributes(column, {'x':px, 'style':'fill:'+color}); 697 if(isStackedColumn) 698 { 699 var py = yValue - column.getBBox().y; 700 if ( py > 0 ) Nwagon.setAttributes(column, {'y':-py}); 701 ch = py; 702 } 703 704 column.onmouseover = Nwagon.showToolTip(tooltip, px+cw/2, -ch, tooltipText, 14, 7, 18); 705 column.onmouseout = Nwagon.hideToolTip(tooltip); 706 707 column = null; //prevent memory leak (in IE) 708 }; 709 710 var create_data_list = function(obj){ 711 var ul = document.getElementById(parentDiv).getElementsByTagName('ul')[0]; 712 if (ul){ 713 for (var key in obj){ 714 if(obj.hasOwnProperty(key)){ 715 var li = document.createElement('li'); 716 li.innerHTML = key; 717 var innerUL = document.createElement('ul'); 718 li.appendChild(innerUL); 719 ul.appendChild(li); 720 var innerList = obj[key]; 721 for (var k = 0; k< innerList.length; k++){ 722 var innerLI = document.createElement('li'); 723 innerLI.innerHTML = innerList[k]; 724 innerUL.appendChild(innerLI); 725 } 726 } 727 } 728 } 729 }; 730 731 if(chartType == 'column') 732 { 733 var ul = document.getElementById(parentDiv).getElementsByTagName('ul')[0]; 734 if(ul){ 735 ul.innerHTML = chart_title; 736 } 737 cw = (3/5*colWidth);
738 var colors = Nwagon.column.getColorSetforSingleColumnChart(max, data, dataset['colorset']); 739 740 for(var index = 0; index < data.length; index++){ 741 px = (colWidth*(index+0.2));// + cw; 742 ch = data[index]/yLimit*height; 743 drawColGroups(columns, ch, px, colors[index], data[index]); 744 745 var text = Nwagon.column.drawLabels(px + cw/2, 15, names[index], false, 0); 746 labels.appendChild(text); 747 748 var innerLI = document.createElement('li'); 749 innerLI.innerHTML = 'Label ' + names[index] + ', Value '+ data[index]; 750 if(ul){ 751 ul.appendChild(innerLI); 752 } 753 } 754 } 755 else if(chartType == 'multi_column') 756 { 757 var colors = dataset['colorset']; 758 cw = (3/5*colWidth)/colors.length; 759 var chart_data = {}; 760 for ( var k = 0; k<fields.length; k++){ 761 chart_data[fields[k]] = []; 762 } 763 764 for(var i = 0; i < data.length; i++){ 765 var one_data = data[i]; 766 px = (colWidth*(i+0.2)); 767 768 for(var index = 0; index < one_data.length; index++){ 769 var pxx = px+ (index*(cw)); 770 ch = one_data[index]/yLimit*height; 771 drawColGroups(columns, ch, pxx, colors[index], one_data[index], false, 0); 772 chart_data[fields[index]].push('Label ' + names[i] + ', Value '+ one_data[index]); 773 } 774 775 var text = Nwagon.column.drawLabels(px + cw/2, 15, names[i]); 776 labels.appendChild(text); 777 } 778 create_data_list(chart_data); 779 } 780 else if(chartType == 'stacked_column') 781 { 782 cw = (3/5*colWidth); 783 var colors = dataset['colorset']; 784 var chart_data = {}; 785 for ( var k = 0; k<fields.length; k++){ 786 chart_data[fields[k]] = []; 787 } 788 for(var i = 0; i < data.length; i++){ 789 var one_data = data[i]; 790 var yValue = 0; 791 792 for(var index = 0; index < one_data.length; index++){ 793 px = (colWidth*(i+0.2));// + cw; 794 ch = one_data[index]/yLimit*height; 795 796 drawColGroups(columns, ch, px, colors[index], one_data[index], true, yValue); 797 chart_data[fields[index]].push('Label ' + names[i] + ', Value '+ one_data[index]); 798 yValue +=ch; 799 } 800 801 802 var text = Nwagon.column.drawLabels(px + cw/2, 15, names[i]); 803 labels.appendChild(text); 804 } 805 create_data_list(chart_data); 806 } 807 }, 808 809 drawBackground: function(parentSVG, numOfCols, dataset, increment, max, width, height){ 810 811 var colWidth =(width/numOfCols).toFixed(3); 812 var attributes = {}; 813 var px = '', yRatio = 1; 814 815 var background = Nwagon.createSvgElem('g', {'class':'background'}); 816 parentSVG.appendChild(background); 817 818 var numOfRows = Math.ceil(max/increment); 819 rowHeight = height/(numOfRows+1); 820 821 //Vertical lines 822 for (var i = 0; i<=numOfCols; i++) 823 { 824 px = (i * colWidth).toString(); 825 attributes = {'x1':px, 'y1':'0', 'x2':px, 'y2':rowHeight-height, 'class':'v'}; 826 var line = Nwagon.createSvgElem('line', attributes); 827 background.appendChild(line); 828 } 829 //Horizontal lines (draw 1 more extra line to accomodate the max value) 830 var count = 0; 831 for (var i = 0; i<=numOfRows; i++) 832 { 833 attributes = {'x1':'0', 'y1':'-'+ i*rowHeight, 'x2':(numOfCols*colWidth).toString(), 'y2':'-'+ i*rowHeight, 'class':'h'};
834 var line = Nwagon.createSvgElem('line', attributes); 835 background.appendChild(line); 836 837 attributes = {'x':'-15', 'y':-((count*rowHeight)-3), 'text-anchor':'end'}; 838 var text = Nwagon.createSvgElem('text', attributes); 839 text.textContent = (count*increment).toString(); 840 841 background.appendChild(text); 842 count++; 843 } 844 //Field Names 845 if(dataset['fields']) 846 { 847 var fields = Nwagon.createSvgElem('g', {'class':'fields'}); 848 background.appendChild(fields); 849 850 var numOfFields = dataset['fields'].length; 851 for (var i = 0; i<numOfFields; i++) 852 { 853 px = width+20; 854 py = (30*i) - height + rowHeight; 855 856 attributes = {'x':px, 'y':py, 'width':20, 'height':15, 'fill':dataset['colorset'][i]}; 857 var badge = Nwagon.createSvgElem('rect', attributes); 858 fields.appendChild(badge); 859 860 attributes = {'x':px+25, 'y':py+7, 'alignment-baseline':'central'};
861 var name = Nwagon.createSvgElem('text', attributes); 862 name.textContent = dataset['fields'][i]; 863 fields.appendChild(name); 864 } 865 } 866 } 867 }, 868 869 donut: { 870 871 drawDonutChart: function(obj){ 872 var width = obj.width, height = obj.height; 873 var viewbox = '-' + width/3 + ' -' + height/2 + ' ' + width + ' ' + height; 874 var svg = Nwagon.createChartArea(obj.chart_div, obj.chartType, viewbox, width, height); 875 var angles = {'angles':[], 'percent':[], 'values':[]}; 876 var degree_values = obj.dataset['values']; 877 if(degree_values){ 878 angles = Nwagon.getAngles(degree_values, angles); 879 } 880 this.drawDonut(obj.chart_div, angles, obj.chartType, svg, obj.dataset, obj.core_circle_radius, obj.donut_width); 881 if(obj.core_circle_radius == 0){ 882 this.drawField(obj.dataset['fields'], obj.dataset['colorset'], svg, obj.donut_width/2); 883 } 884 else{ 885 this.drawField(obj.dataset['fields'], obj.dataset['colorset'], svg, obj.donut_width); 886 } 887 888 }, 889 drawDonut: function(parentDiv, angles, chart_type, parentSVG, data, core_radius, donut_width){ 890 // var core_circle_radius = core_radius; 891 var radius = donut_width + core_radius; 892 var ul = document.getElementById(parentDiv).getElementsByTagName('ul')[0]; 893 var create_data_li = function(text_to_add){ 894 if(ul){ 895 var li = document.createElement('li'); 896 li.innerHTML = text_to_add; 897 ul.appendChild(li); 898 } 899 }; 900 901 var foreground = Nwagon.createSvgElem('g', {'class':'foreground'}); 902 parentSVG.appendChild(foreground); 903 var donuts = Nwagon.createSvgElem('g', {'class':'donuts'}); 904 foreground.appendChild(donuts); 905 var tooltip = Nwagon.createTooltip(); 906 foreground.appendChild(tooltip); 907 908 var colors = data['colorset']; 909 910 var length = angles['angles'].length; 911 var arch_end_x = 0, arch_end_y = 0; 912 var points_to_draw = '', text_to_add = ''; 913 var names = data['fields']; 914 var angle_to_rotate = 0; 915 var sub_angle = angle_in_int = angle_in_int_accumulate = 0; 916 917 for(var j=0; j<length; j++) 918 { 919 var path; 920 if(angles['percent'][j] < 1){ 921 sub_angle = (Math.PI*2) * angles['percent'][j]; 922 angle_in_int = angles['angles'][j]; 923 if(j > 0){ 924 angle_in_int_accumulate+=angles['angles'][j-1]; 925 } 926 927 if(core_radius > 0) { 928 929 if(sub_angle){ 930 931 arch_end_x = (radius)*Math.sin(sub_angle); 932 arch_end_y = sub_angle ? -(radius*Math.sin(sub_angle)/Math.tan(sub_angle)) : 0; 933 934 var end_x = core_radius*Math.sin(sub_angle); 935 var end_y = sub_angle ? -(core_radius*Math.sin(sub_angle)/Math.tan(sub_angle)) : 0; 936 937 if(sub_angle > Math.PI){ 938 points_to_draw = 'M0 '+ -core_radius+ ' L0 ' +'-'+radius +' A ' + radius + ' ' + radius + ' 0 1 1 ' + arch_end_x +' '+ arch_end_y +' L '+ end_x +' '+ end_y; 939 points_to_draw+= ' A ' + core_radius + ' ' + core_radius + ' 0 1 0 0 '+ -core_radius + ' Z'; 940 } 941 else 942 { 943 points_to_draw = 'M0 '+ -core_radius+ ' L0 ' +'-'+radius +' A ' + radius + ' ' + radius + ' 0 0 1 ' + arch_end_x +' '+ arch_end_y +' L '+ end_x +' '+ end_y; 944 points_to_draw+= ' A ' + core_radius + ' ' + core_radius + ' 0 0 0 0 '+ -core_radius + ' Z'; 945 } 946 } 947 else{ 948 points_to_draw = 'M0 0 L 0 0 Z'; 949 } 950 951 } 952 else{ 953 if(sub_angle){
954 arch_end_x = radius*Math.sin(sub_angle); 955 arch_end_y = sub_angle ? -(radius*Math.sin(sub_angle)/Math.tan(sub_angle)) : 0; 956 if(sub_angle > Math.PI){ 957 points_to_draw = 'M0 0 L0 ' +'-'+radius +' A ' + radius + ' ' + radius + ' 0 1 1 ' + arch_end_x +' '+ arch_end_y +' L0 0 Z'; 958 } 959 else{ 960 points_to_draw = 'M0 0 L0 ' +'-'+radius +' A ' + radius + ' ' + radius + ' 0 0 1 ' + arch_end_x +' '+ arch_end_y +' L0 0 Z'; 961 } 962 } 963 else{ 964 points_to_draw = 'M0 0 L 0 0 Z'; 965 } 966 } 967 path = Nwagon.createSvgElem('path', {'class':'sector','d':points_to_draw, 'fill':colors[j]}); 968 donuts.appendChild(path); 969 } 970 else{ 971 972 var attributes = {'cx':0, 'cy':0, 'r':radius, 'stroke':'transparent', 'fill': colors[j]}; 973 path = Nwagon.createSvgElem('circle', attributes); 974 donuts.appendChild(path); 975 if(core_radius > 0){ 976 var inner_attributes = {'cx':0, 'cy':0, 'r':core_radius, 'stroke':'transparent', 'fill-opacity': 1, 'fill': 'white'};
977 var inner_circle = Nwagon.createSvgElem('circle', inner_attributes); 978 donuts.appendChild(inner_circle); 979 } 980 } 981 982 if(angles['angles'].length){ 983 angle_to_rotate = angle_in_int_accumulate; 984 } 985 else{ 986 angle_to_rotate = (angle_in_int*j); 987 } 988 989 var sectors = document.querySelectorAll('#' + parentDiv + ' .Nwagon_'+chart_type+' .foreground .sector'); 990 if(sectors.length > 0){ 991 var sector = sectors[sectors.length-1]; 992 sector.setAttribute('transform','rotate('+ angle_to_rotate +')'); 993 } 994 995 var tooltip_angle = (Math.PI * (angle_to_rotate-90))/180; 996 var tooltip_y = radius * Math.sin(tooltip_angle); 997 var tooltip_x = radius * Math.cos(tooltip_angle);// * Math.cos(angle_to_rotate); 998 999 var degree_value = angles['values'][j].toFixed(0); 1000 text_to_add = names[j] ? (names[j]+ '(' +(angles['percent'][j]*100).toFixed(1) +'%) ' + degree_value) : 'undefiend'; 1001 1002 path.onmouseover = Nwagon.showToolTip(tooltip, tooltip_x, tooltip_y, text_to_add, 14, 7, 18); 1003 path.onmouseout = Nwagon.hideToolTip(tooltip); 1004 1005 create_data_li(text_to_add); 1006 } 1007 }, 1008 drawField: function(fields_names, colorset, parentSVG, width){ 1009 if(fields_names.length) 1010 { 1011 var fields = Nwagon.createSvgElem('g', {'class':'fields'}); 1012 parentSVG.appendChild(fields); 1013 var attributes = {}; 1014 var height = 15; 1015 var numOfFields = fields_names.length; 1016 for (var i = 0; i<numOfFields; i++) 1017 { 1018 var px = width * 4; 1019 var py = (30*i) - (numOfFields * height); //70 ; 1020 1021 attributes = {'x':px, 'y':py, 'width':20, 'height':height, 'fill':colorset[i]}; 1022 var badge = Nwagon.createSvgElem('rect', attributes); 1023 fields.appendChild(badge); 1024 1025 attributes = {'x':px+25, 'y':py+10, 'alignment-baseline':'central'};
1026 var name = Nwagon.createSvgElem('text', attributes); 1027 name.textContent = fields_names[i]; 1028 fields.appendChild(name); 1029 } 1030 } 1031 } 1032 }, 1033 1034 polar: { 1035 drawPolarChart: function(obj){ 1036 1037 var BottomOffsetAbsolute = 80; 1038 var RightOffsetAbsolute = obj.dataset['fields'] ? 150 : 0; 1039 1040 var width = obj.width, height = obj.height; 1041 var viewbox = '-' + width/2 + ' -' + height/2 + ' ' + width + ' ' + height; 1042 var svg = Nwagon.createChartArea(obj.chart_div, obj.chartType, viewbox, width, height); 1043 var angles = {'angles':[], 'percent':[], 'values':[]}; 1044 if(obj.chartType == 'polar_pie'){ 1045 var degree_values = obj.dataset['degree_values']; 1046 if(degree_values){ 1047 angles = Nwagon.getAngles(degree_values, angles); 1048 } 1049 } 1050 1051 if(svg && obj.legend['names'] && obj.dataset){ 1052 this.drawBackground(svg, angles['angles'], obj.chartType, obj.legend['names'], obj.dataset, obj.increment, obj.max, obj.core_circle_radius, (width/2)-RightOffsetAbsolute, (height/2)-BottomOffsetAbsolute); 1053 this.drawLabels(svg, angles, obj.legend, CONST_MAX_RADIUS, obj.core_circle_radius); 1054 if(obj.core_circle_radius > 0 && obj.core_circle_value){ 1055 this.drawCoreCircleValue(svg, obj.core_circle_value, obj.core_circle_radius); 1056 } 1057 this.drawForeground(obj.chart_div, angles, obj.chartType, svg, obj.legend, obj.dataset, obj.core_circle_radius, obj.max); 1058 } 1059 this.drawCoordinates(svg, obj.increment, obj.max, obj.core_circle_radius); 1060 }, 1061 1062 1063 drawCoordinates: function(parentSVG, decrement, maxRadius, core_circle_radius){ 1064 1065 var g = Nwagon.createSvgElem('g', {'class':'xAxis'}); 1066 var i = maxRadius, y=0.0, point=0.0; 1067 1068 while (i > 0) 1069 { 1070 point = y+',' + -(i+core_circle_radius); 1071 1072 var attributes = {'points': point, 'x':y, 'y':-(i+core_circle_radius), 'text-anchor':'middle'}; 1073 var text = Nwagon.createSvgElem('text', attributes); 1074 text.textContent = i.toString(); 1075 g.appendChild(text); 1076 i-=decrement; 1077 } 1078 parentSVG.appendChild(g); 1079 }, 1080 1081 drawCoreCircleValue: function(parentSVG, value, core_circle_radius){ 1082 1083 var core = Nwagon.createSvgElem('g', {'class':'core'}); 1084 parentSVG.appendChild(core); 1085 var attributes = {'x':'0', 'y':core_circle_radius/4, 'text-anchor':'middle', 'class':'core_text'}; 1086 var core_text = Nwagon.createSvgElem('text', attributes); 1087 core_text.textContent = value; 1088 core.appendChild(core_text); 1089 }, 1090 1091 drawLabels: function(parentSVG, angles, legend, maxRadius, core_circle_radius){ 1092 1093 var labels = Nwagon.createSvgElem('g', {'class':'labels'}); 1094 parentSVG.appendChild(labels); 1095 var names = legend.names; 1096 var length = names.length; 1097 var angle = angle_accumulate = 0; 1098 1099 for(var i = 0; i<length; i++){ 1100 if(angles['percent'].length){ 1101 angle = (Math.PI*2) * angles['percent'][i]; 1102 if(i>0){ 1103 angle_accumulate += (Math.PI*2) * angles['percent'][i-1]; 1104 } 1105 } 1106 else{ 1107 angle = (Math.PI*2)/length; 1108 angle_accumulate = angle*i; 1109 } 1110 var sub_names = names[i]; 1111 if(sub_names){ 1112 var sub_len = sub_names.length; 1113 for(var k = 0; k<sub_len; k++){ 1114 var sub_angle = angle/sub_len; 1115 var total_angle = angle_accumulate + (sub_angle * k) + sub_angle/2; 1116 var y = -(maxRadius+core_circle_radius+12) * Math.cos(total_angle); 1117 var x = (maxRadius+core_circle_radius+12) * Math.sin(total_angle); 1118 1119 var align = (x < 0) ? 'end' : 'start'; 1120 if(x < 1 && x > -1) align = 'middle'; 1121 1122 var attributes = {'x':x, 'y':y, 'text-anchor':align, 'class':'chart_label'};
1123 var text = Nwagon.createSvgElem('text', attributes); 1124 text.textContent = sub_names[k]; 1125 labels.appendChild(text); 1126 } 1127 } 1128 } 1129 }, 1130 1131 drawForeground: function(parentDiv, angles, chart_type, parentSVG, legend, data, core_circle_radius, max){ 1132 1133 var ul = document.getElementById(parentDiv).getElementsByTagName('ul')[0]; 1134 var create_data_li = function(text_to_add){ 1135 if(ul){ 1136 var li = document.createElement('li'); 1137 li.innerHTML = text_to_add; 1138 ul.appendChild(li); 1139 } 1140 }; 1141 var foreground = Nwagon.createSvgElem('g', {'class':'foreground'}); 1142 parentSVG.appendChild(foreground); 1143 var pies = Nwagon.createSvgElem('g', {'class':'pies'}); 1144 foreground.appendChild(pies); 1145 var tooltip = Nwagon.createTooltip(); 1146 foreground.appendChild(tooltip); 1147 1148 var colors = data['colorset']; 1149 var dataGroup = data['values']; 1150 var opacities = data ['opacity']; 1151 var length = dataGroup.length; 1152 var arch_end_x = 0, arch_end_y = 0; 1153 var points_to_draw = '', text_to_add = ''; 1154 var names = legend.names; 1155 var angle_to_rotate = 0; 1156 var angle = angle_in_int = angle_in_int_accumulate = 0; 1157 if(length){ 1158 for(var j=0; j<length; j++) 1159 { 1160 if(angles['angles'].length){ 1161 angle = (Math.PI*2) * angles['percent'][j]; 1162 angle_in_int = angles['angles'][j]; 1163 if(j > 0){ 1164 angle_in_int_accumulate+=angles['angles'][j-1]; 1165 } 1166 } 1167 else{ 1168 angle = (Math.PI*2)/length; 1169 angle_in_int = 360/length; 1170 } 1171 1172 var sub_data = dataGroup[j]; 1173 var sub_len = sub_data.length; 1174 1175 for (var k = 0; k<sub_len; k++){ 1176 var radius = sub_data[k]; 1177 var opacity = 0.8; 1178 if(opacities.length){ 1179 opacity = Nwagon.getOpacity(opacities, radius, max); 1180 } 1181 1182 var sub_angle = angle/sub_len; 1183 var sub_angle_in_int = angle_in_int/sub_len; 1184 1185 if(core_circle_radius > 0) { 1186 radius = radius+core_circle_radius; 1187 arch_end_x = (radius)*Math.sin(sub_angle); 1188 arch_end_y = -(radius*Math.sin(sub_angle)/Math.tan(sub_angle)); 1189 1190 var end_x = core_circle_radius*Math.sin(sub_angle); 1191 var end_y = -(core_circle_radius*Math.sin(sub_angle)/Math.tan(sub_angle)); 1192 if(sub_angle > Math.PI){ 1193 points_to_draw = 'M0 '+ -core_circle_radius+ ' L0 ' +'-'+radius +' A ' + radius + ' ' + radius + ' 0 1 1 ' + arch_end_x +' '+ arch_end_y +' L '+ end_x +' '+ end_y; 1194 points_to_draw+= ' A ' + core_circle_radius + ' ' + core_circle_radius + ' 0 1 0 0 '+ -core_circle_radius + ' Z'; 1195 } 1196 else 1197 { 1198 points_to_draw = 'M0 '+ -core_circle_radius+ ' L0 ' +'-'+radius +' A ' + radius + ' ' + radius + ' 0 0 1 ' + arch_end_x +' '+ arch_end_y +' L '+ end_x +' '+ end_y; 1199 points_to_draw+= ' A ' + core_circle_radius + ' ' + core_circle_radius + ' 0 0 0 0 '+ -core_circle_radius + ' Z'; 1200 } 1201 1202 } 1203 else{ 1204 arch_end_x = radius*Math.sin(sub_angle); 1205 arch_end_y = -(radius*Math.sin(sub_angle)/Math.tan(sub_angle)); 1206 points_to_draw = 'M0 0 L0 ' +'-'+radius +' A ' + radiu
1206s + ' ' + radius + ' 0 0 1 ' + arch_end_x +' '+ arch_end_y +' L0 0 Z'; 1207 } 1208 1209 var path = Nwagon.createSvgElem('path', {'class':'sector','d':points_to_draw, 'fill':colors[j], 'opacity': opacity}); 1210 pies.appendChild(path); 1211 if(angles['angles'].length){ 1212 angle_to_rotate = angle_in_int_accumulate + (sub_angle_in_int*k); 1213 } 1214 else{ 1215 angle_to_rotate = (angle_in_int*j)+(sub_angle_in_int*k); 1216 } 1217 1218 var sectors = document.querySelectorAll('#' + parentDiv + ' .Nwagon_'+chart_type+' .foreground .sector'); 1219 if(sectors.length > 0){ 1220 var sector = sectors[sectors.length-1]; 1221 sector.setAttribute('transform','rotate('+ angle_to_rotate +')'); 1222 } 1223 1224 1225 var tooltip_angle = (Math.PI * (angle_to_rotate-90))/180; 1226 var tooltip_y = (core_circle_radius+max) * Math.sin(tooltip_angle); 1227 var tooltip_x = (core_circle_radius+max) * Math.cos(tooltip_angle);// * Math.cos(angle_to_rotate); 1228 1229 if(angles['values'].length){ 1230 var degree_value = angles['values'][j].toFixed(0); 1231 text_to_add = names[j][k] ? (names[j][k] +' (' + degree_value + '), Value: '+ (radius-core_circle_radius).toFixed(1)) : 'undefiend'; 1232 } 1233 else{ 1234 text_to_add = names[j][k] ? (names[j][k] + ', Value: '+ (radius-core_circle_radius).toFixed(1)) : 'undefiend'; 1235 } 1236 1237 path.onmouseover = Nwagon.showToolTip(tooltip, tooltip_x, tooltip_y, text_to_add, 14, 7, 18); 1238 path.onmouseout = Nwagon.hideToolTip(tooltip); 1239 1240 create_data_li(text_to_add); 1241 } 1242 } 1243 } 1244 }, 1245 1246 drawBackground: function(parentSVG, angles, chart_type, obj_names, obj_values, decrement, max_radius, core_circle_radius, width, height){ 1247 var background = Nwagon.createSvgElem('g', {'class':'background'}); 1248 parentSVG.appendChild(background); 1249 1250 var data = obj_values['values']; 1251 if(data.length) 1252 { 1253 var angle = 360/data.length; 1254 1255 //Draw arch 1256 var draw_bg_circles = function(radius){ 1257 var points_to_draw = 'M0 ' + radius + 'A ' + radius + ' ' + radius + ' 0 0 0 0' + ' -'+radius; 1258 var path = Nwagon.createSvgElem('path', {'d':points_to_draw}); 1259 background.appendChild(path); 1260 1261 points_to_draw = 'M0 ' + radius + 'A ' + radius + ' ' + radius + ' 0 0 1 0' + ' -'+radius; 1262 path = Nwagon.createSvgElem('path', {'d':points_to_draw}); 1263 background.appendChild(path); 1264 }; 1265 1266 if(core_circle_radius > 0){ 1267 draw_bg_circles(core_circle_radius); 1268 } 1269 var radius = max_radius + core_circle_radius; 1270 while (radius > core_circle_radius){ 1271 draw_bg_circles(radius); 1272 radius-= decrement; 1273 } 1274 //Draw lines 1275 var rotate_angle = 0; 1276 for(var j=0; j<data.length; j++) 1277 { 1278 if(angles.length){ 1279 rotate_angle+= angles[j]; 1280 } 1281 else{ 1282 rotate_angle = angle * j; 1283 } 1284 var attributes = {'x1':'0', 'y1':-core_circle_radius, 'x2':'0', 'y2':-(max_radius+core_circle_radius), 'class':'v'}; 1285 var bgStraightLine = Nwagon.createSvgElem('line', attributes); 1286 background.appendChild(bgStraightLine); 1287 1288 bgStraightLine.setAttribute('transform', 'rotate('+ rotate_angle +')'); 1289 1290 var sub_data = data[j]; 1291 if(sub_data){ 1292 var sub_len = sub_data.length; 1293 for (var k = 1; k < sub_len; k++) 1294 { 1295 var inner_rotate_angle = rotate_angle + (angle/sub_len*k);
1296 bgStraightLine = Nwagon.createSvgElem('line', attributes); 1297 background.appendChild(bgStraightLine); 1298 1299 bgStraightLine.setAttribute('transform', 'rotate('+ inner_rotate_angle +')'); 1300 } 1301 } 1302 } 1303 } 1304 1305 var fields_names = obj_values['fields']; 1306 var colorset = obj_values['colorset']; 1307 if(fields_names.length) 1308 { 1309 var fields = Nwagon.createSvgElem('g', {'class':'fields'}); 1310 background.appendChild(fields); 1311 1312 var numOfFields = fields_names.length; 1313 for (var i = 0; i<numOfFields; i++) 1314 { 1315 px = width+20; 1316 py = (30*i) - height ; 1317 1318 attributes = {'x':px, 'y':py, 'width':20, 'height':15, 'fill':colorset[i]}; 1319 var badge = Nwagon.createSvgElem('rect', attributes); 1320 fields.appendChild(badge); 1321 1322 attributes = {'x':px+25, 'y':py+10, 'alignment-baseline':'central'};
1323 var name = Nwagon.createSvgElem('text', attributes); 1324 name.textContent = fields_names[i]; 1325 fields.appendChild(name); 1326 } 1327 } 1328 } 1329 }, 1330 1331 radar: { 1332 1333 drawRadarChart: function(obj){ 1334 1335 var width = obj.width, height = obj.height; 1336 var viewbox = '-' + width/2 + ' -' + height/2 + ' ' + width + ' ' + height; 1337 var svg = Nwagon.createChartArea(obj.chart_div, obj.chartType, viewbox, width, height); 1338 1339 this.drawBackground(svg, obj.legend['names'].length, obj.dataset['bgColor'], CONST_DECREMENT, CONST_MAX_RADIUS); 1340 this.drawLabels(svg, obj.legend, CONST_MAX_RADIUS); 1341 this.drawCoordinates(svg, CONST_DECREMENT, CONST_MAX_RADIUS); 1342 this.drawPolygonForeground(obj.chart_div, svg, obj.legend, obj.dataset); 1343 }, 1344 1345 drawCoordinates: function(parentSVG, decrement, maxRadius){ 1346 1347 var g = Nwagon.createSvgElem('g', {'class':'xAxis'}); 1348 var i = maxRadius, y=0.0, point=0.0; 1349 1350 while (i > 0) 1351 { 1352 point = i+',' + y; 1353 1354 var attributes = {'points': point, 'x':i, 'y':y, 'text-anchor':'middle'}; 1355 var text = Nwagon.createSvgElem('text', attributes); 1356 text.textContent = i.toString(); 1357 g.appendChild(text); 1358 i-=decrement; 1359 } 1360 parentSVG.appendChild(g); 1361 }, 1362 1363 drawLabels: function(parentSVG, legend, maxRadius){ 1364 1365 var labels = Nwagon.createSvgElem('g', {'class':'labels'}); 1366 var hrefs = legend['hrefs'], names = legend['names']; 1367 var numOfRadars = names.length; 1368 var attributes = {}; 1369 1370 for(var index = 0; index < names.length; index++){ 1371 var angle = (Math.PI*2)/numOfRadars; // (2*PI)/numOfRadars 1372 var x = 0 + (maxRadius+12) * Math.cos(((Math.PI*2)/numOfRadars) * (index)); 1373 var y = 0 + (maxRadius+12) * Math.sin(((Math.PI*2)/numOfRadars) * (index)); 1374 var align = (x < 0) ? 'end' : 'start'; 1375 if(x < 1 && x > -1) align = 'middle'; 1376 1377 if(hrefs){ 1378 attributes = {'onclick':'location.href="' + hrefs[index] + '"', 'x':x, 'y':y, 'text-anchor':align, 'class':'chart_label'}; 1379 }else{ 1380 attributes = {'x':x, 'y':y, 'text-anchor':align, 'class':'chart_label'}; 1381 } 1382 var text = Nwagon.createSvgElem('text', attributes); 1383 text.textContent = names[index]; 1384 1385 labels.appendChild(text); 1386 } 1387 parentSVG.appendChild(labels); 1388 }, 1389 1390 drawPie: function(parentGroup, numOfRadars, maxRadius, decrement, bg_color){ 1391 /* Draw outer solid line and then inner dotted lines */ 1392 1393 var angle = (Math.PI*2)/numOfRadars; 1394 var p0='', p1='', p2=''; 1395 var attributes = {}, points =''; 1396 var radius = maxRadius; 1397 1398 var pie = Nwagon.createSvgElem('g', {'class':'pie'}); 1399 1400 while (radius > 0) 1401 { 1402 p0 = radius+',0'; //'100,0'; 1403 p1 = '0,0'; 1404 p2 = (radius*Math.sin(angle)/Math.tan(angle)) + ',' + (-radius*Math.sin(angle)); 1405 1406 if (radius == maxRadius) 1407 { 1408 points = p0 + ' ' + p1 + ' ' + p2; 1409 var lr = Nwagon.createSvgElem('polyline', {'points':points, 'fill': bg_color}); 1410 pie.appendChild(lr); 1411 } 1412 1413 points = p0 + ' ' + p2; 1414 attributes = {'points':points, 'stroke-dasharray':'2px,2px', 'fill': bg_color}; 1415 var la = Nwagon.createSvgElem('polyline', attributes); 1416 1417 pie.appendChild(la); 1418 radius-=decrement; 1419 } 1420 1421 parentGroup.appendChild(pie); 1422 return pie; 1423 1424 }, 1425
1426 drawBackground: function(parentSVG, numOfRadars, bg_color, decrement, maxRadius){ 1427 var bg = bg_color ? bg_color : '#F9F9F9'; 1428 var angle = 360/numOfRadars; 1429 1430 var background = Nwagon.createSvgElem('g', {'class':'background'}); 1431 parentSVG.appendChild(background); 1432 1433 for(var j=1; j<=numOfRadars; j++) 1434 { 1435 var current_pie = this.drawPie(background, numOfRadars, maxRadius, decrement, bg); 1436 current_pie.setAttribute('transform','rotate('+angle * (j-1)+')'); 1437 } 1438 }, 1439 1440 dimmedPie: function(parentGroup, index, length) 1441 { 1442 var angle = (360/length) * index; 1443 var last_pie = this.drawPie(parentGroup, length, CONST_MAX_RADIUS, CONST_DECREMENT); 1444 last_pie.setAttribute('transform','rotate('+angle +')'); 1445 var polylines = last_pie.querySelectorAll('polyline'); 1446 for(var i = 0; i<polylines.length; i++){ 1447 polylines[i].setAttribute('class','dim'); 1448 } 1449 1450 if (((index+1)%length)== 0) 1451 { 1452 this.drawPie(parentGroup, length, CONST_MAX_RADIUS, CONST_DECREMENT); 1453 } 1454 else 1455 { 1456 angle = (360/length) * (index+1); 1457 last_pie = this.drawPie(parentGroup, length, CONST_MAX_RADIUS, CONST_DECREMENT); 1458 last_pie.setAttribute('transform','rotate('+angle +')'); 1459 } 1460 1461 var polylines = last_pie.querySelectorAll('polyline'); 1462 for(var i = 0; i<polylines.length; i++){ 1463 polylines[i].setAttribute('class','dim'); 1464 } 1465 }, 1466 1467 drawPolygonForeground: function(parentDiv, parentSVG, legend, data){ 1468 1469 var dataGroup = data['values']; 1470 var title = data['title']; 1471 var fg_color = data['fgColor'] ? data['fgColor'] : '#30A1CE'; 1472 var istooltipNeeded = (dataGroup.length == 1) ? true : false; 1473 var names = legend['names']; 1474 1475 var ul = document.getElementById(parentDiv).getElementsByTagName('ul')[0]; 1476 if(ul){ 1477 ul.innerHTML = title; 1478 } 1479 1480 for(var i=0; i<dataGroup.length; i++){ 1481 if(ul) 1482 { 1483 var textEl = document.createElement('li'); 1484 textEl.innerHTML = 'Data set number ' + (i+1).toString(); 1485 var innerUL = document.createElement('ul'); 1486 textEl.appendChild(innerUL); 1487 ul.appendChild(textEl); 1488 } 1489 var dataset = dataGroup[i]; 1490 var length = dataset.length; 1491 var coordinate = []; 1492 var angle = (Math.PI/180)*(360/length); 1493 var pointValue = 0.0, px=0.0; py=0, attributes = {}; 1494 var vertexes = [], tooltips =[]; 1495 1496 var foreground = Nwagon.createSvgElem('g', {'class':'foreground'}); 1497 parentSVG.appendChild(foreground); 1498 1499 var polygon = Nwagon.createSvgElem('polyline', {'class':'polygon'}); 1500 foreground.appendChild(polygon); 1501 1502 var tooltip = {}; 1503 if (istooltipNeeded) 1504 { 1505 tooltip = Nwagon.createTooltip(); 1506 } 1507 1508 for(var index =0; index < dataset.length; index++){ 1509 if(innerUL){ 1510 var innerLI = document.createElement('li'); 1511 innerLI.innerHTML = names[index] + ': ' + dataset[index]; 1512 innerUL.appendChild(innerLI); 1513 } 1514 pointValue = dataset[index]; 1515 pointDisplay = dataset[index]; 1516 if (typeof(dataset[index]) != 'number') 1517 { 1518 Nwagon.radar.dimmedPie(foreground, index, length); 1519 pointValue = 0; 1520 pointDisplay = dataset[index]; 1521 } 1522 1523 px = (index == 0) ? pointValue : pointValue*Math.sin(angle*index)/Math.tan(angle*index); 1524 py = (index == 0) ? 0 : pointValue*Math.sin(angle*index); 1525 coordinate.push(px + ',' + py); 1526 1527 attributes = {'cx':px, 'cy':py, 'r':3, 'stroke-width':8, 'stroke':'transparent', 'fill': fg_color};
1528 var vertex = Nwagon.createSvgElem('circle', attributes); 1529 1530 if (istooltipNeeded) 1531 { 1532 vertex.onmouseover = Nwagon.showToolTip(tooltip, px, py, names[index] + ' : ' + pointDisplay, 20, 15, 28); 1533 vertex.onmouseout = Nwagon.hideToolTip(tooltip); 1534 } 1535 foreground.appendChild(vertex); 1536 vertex = null; 1537 } 1538 1539 var coordinates = coordinate.join(' '); 1540 var attributes = {'points':coordinates, 'class':'polygon', 'fill': fg_color, 'stroke':fg_color}; 1541 Nwagon.setAttributes(polygon, attributes); 1542 1543 if (istooltipNeeded) foreground.appendChild(tooltip); 1544 } 1545 } 1546 } 1547}; 1548 1549var Nwagon_ie = { 1550 1551 setStyles: function(obj, styles){ 1552 for (var key in styles) { 1553 if (styles.hasOwnProperty(key)) { 1554 obj.style[key] = styles[key]; 1555 } 1556 } 1557 }, 1558 1559 setAttributes: function(obj, attributes){ 1560 for (var key in attributes) { 1561 if (attributes.hasOwnProperty(key)) { 1562 obj.setAttribute(key, attributes[key]); 1563 } 1564 } 1565 }, 1566 createChartArea: function(id, width, height){ 1567 1568 var chartDiv = document.getElementById(id); 1569 chartDiv.style.cssText = 'width: '+ width+'px; height:'+ height + 'px'; 1570 var textArea = document.createElement('ul'); 1571 textArea.className = 'accessibility'; 1572 chartDiv.appendChild(textArea); 1573 1574 var vml = document.createElement("v:group"); 1575 vml.setAttribute('class', id); 1576 vml.setAttribute("coordsize", width + " " + height); 1577 vml.setAttribute('aria-hidden', 'true'); 1578 vml.style.cssText = 'width: '+ width+'px; height:'+ height + 'px;position:absolute;'; 1579 1580 var rect = document.createElement('v:rect'); 1581 var style_attr = {'width': width + 'px', 'height': height + 'px'}; 1582 Nwagon_ie.setStyles(rect, style_attr); 1583 rect.setAttribute('stroked','true'); 1584 //vml.appendChild(rect); //freesos 1585 chartDiv.appendChild(vml); 1586 return vml; 1587 }, 1588 1589 createTooltip: function(parentCanvas){ 1590 var tip = document.createElement('div'); 1591 var textNode = document.createTextNode(''); 1592 tip.appendChild(textNode); 1593 parentCanvas.appendChild(tip); 1594 return tip; 1595 }, 1596 1597 showToolTip: function(tooltip, px, py, value){ 1598 return function(){ 1599 tooltip.style.cssText = 'display: block; padding: 0 5px 0 5px; background-color:#f9f9f9; border: 1px solid #666; position:absolute; z-index:100'; 1600 tooltip.lastChild.nodeValue = value; 1601 tooltip.style.left = px + 'px'; 1602 tooltip.style.top = (py -15) + 'px'; 1603 tooltip.style.fontSize = '12px'; 1604 } 1605 }, 1606 1607 hideToolTip: function(tooltip){ 1608 return function(){ 1609 tooltip.style.cssText = "display: none"; 1610 } 1611 }, 1612 drawWedges: function(cx, cy, r, fillcolor, start_a, end_a, s_attr){ 1613 var wedge = document.createElement("v:shape"); 1614 var sa = Math.round(start_a * 65535); 1615 var a = -Math.round(end_a * 65536); 1616 var path = "M " + cx + " " + cy + " AE " + cx + " " + cy + " " + r + " " + r + " " + sa + " " + a + " X E"; 1617 1618 attributes = {'path': path, 'fillcolor': fillcolor, 'strokecolor': '#FFFFFF', 'strokeweight':'0px'}; 1619 Nwagon_ie.setAttributes(wedge, attributes); 1620 Nwagon_ie.setStyles(wedge, s_attr); 1621 return wedge; 1622 }, 1623 drawVertex: function(x, y, fill){ 1624 var circle = document.createElement('v:oval'); 1625 circle.setAttribute('fillcolor', fill); 1626 circle.setAttribute('strokecolor', fill); 1627 circle.setAttribute('strokeweight', '1px'); 1628 circle.style.cssText = 'z-index:99; width:6px; height:6px'; 1629 circle.style.top = (y-3) + 'px'; 1630 circle.style.left = (x-3) + 'px'; 1631 1632 return circle; 1633 }, 1634 drawFields_for_circular_type_chart: function(fields, colors, canvas, h){ 1635 var style_attr = {}; 1636 if(fields.length){ 1637 var lx = 5, ly=10; 1638 var field_div = document.createElement('div'); 1639 1640 style_attr = {'width':Math.round(h/2) + 'px', 'height': Math.round(h*(2/3)) + 'px', 'left': h + 'px', 'top': '70px', 'position':'absolute'}; 1641 Nwagon_ie.setStyles(field_div, style_attr); 1642 field_div.className = 'fields_area'; 1643 canvas.appendChild(field_div); 1644 var attributes = {}; 1645 1646 for(var i = 0; i<fields.length; i++){ 1647 var badge = document.createElement("v:rect"); 1648 style_attr = {'width':'20px', 'height': '15px', 'left':'5px', 'top': (ly+i*30) + 'px'}; 1649 Nwagon_ie.setStyles(badge, style_attr); 1650 attributes = {'fillcolor':colors[i], 'strokecolor': '#FFFFFF', 'strokeweight':'1px'}; 1651 Nwagon_ie.setAttributes(badge, attributes); 1652 field_div.appendChild(badge); 1653 1654 var name = document.createElement('div'); 1655 name.appendChild(document.createTextNode(fields[i])); 1656 style_attr = {'position':'absolute', 'left': (lx + 3
16560) + 'px', 'top': (ly + 30*i) + 'px', 'fontSize': '12px'}; 1657 Nwagon_ie.setStyles(name, style_attr); 1658 field_div.appendChild(name); 1659 } 1660 } 1661 }, 1662 column:{ 1663 1664 drawColumnChart: function(obj){ 1665 1666 var width = obj.width, height = obj.height; 1667 var canvas = Nwagon_ie.createChartArea(obj.chart_div, width, height); 1668 1669 var values = obj.dataset['values']; 1670 var left = obj.hasOwnProperty('leftOffsetValue') ? obj.leftOffsetValue : 50; 1671 var bottom = obj.hasOwnProperty('bottomOffsetValue') ? obj.bottomOffsetValue : 80; 1672 1673 var max = obj.highest ? obj.highest : Nwagon.getMax(values); 1674 var fields = obj.dataset['fields']; 1675 var fieldsExist = ((fields && (obj.chartType !='column')) || (obj.chartType =='column' && obj.dataset['colorset'].length == 1)) ; 1676 this.drawBackground(canvas, obj.legend['names'], obj.dataset, obj.increment, max, width, height, left, bottom, fieldsExist); 1677 this.drawColumnForeground(obj.chart_div, canvas, obj.legend, obj.dataset, obj.increment, max, width, height, left, bottom, obj.chartType, fieldsExist); 1678 1679 }, 1680 1681 drawColumnForeground: function(parentDiv, canvas, legend, dataset, increment, max, width, height, left, bottom, chart_type, isFields){ 1682 var names = legend['names']; 1683 var numOfCols = names.length; 1684 var data = dataset['values']; 1685 var chart_title = dataset['title']; 1686 var fields = dataset['fields']; 1687 var right = isFields ? 150 : 0; 1688 var colWidth = Math.floor((width-left-right)/numOfCols); 1689 var x1 = 0, x2 = 0, y1 = 0, y2 = 0, cw = 0; 1690 var yLimit = (Math.ceil(max/increment)+1) * increment; //let's check if it's used in here 1691 var numOfRows = max/increment; 1692 var rowHeight = Math.round((height-bottom)/(numOfRows+1)); 1693 var yRatio = rowHeight/increment; 1694 var colors = []; 1695 var attributes = {}, style_attr={}; 1696 var tooltip = Nwagon_ie.createTooltip(canvas); 1697 var text_to_add = ''; 1698 1699 var drawColumn = function(attr, w, h, x, y, text, tip){ 1700 var column = document.createElement('v:shape'); 1701 Nwagon_ie.setAttributes(column, attr); 1702 style_attr = {'position':'absolute', 'width': w, 'height': h, 'filter':'alpha(opacity=80)'}; 1703 Nwagon_ie.setStyles(column, style_attr); 1704 column.onmouseover = Nwagon_ie.showToolTip(tip, x, y, text); 1705 column.onmouseout = Nwagon_ie.hideToolTip(tip); 1706 return column; 1707 }; 1708 var create_data_list = function(obj){ 1709 var ul = document.getElementById(parentDiv).getElementsByTagName('ul')[0]; 1710 if (ul){ 1711 for (var key in obj){ 1712 if(obj.hasOwnProperty(key)){ 1713 var li = document.createElement('li'); 1714 li.innerHTML = key; 1715 var innerUL = document.createElement('ul'); 1716 li.appendChild(innerUL); 1717 ul.appendChild(li); 1718 var innerList = obj[key]; 1719 for (var k = 0; k< innerList.length; k++){ 1720 var innerLI = document.createElement('li'); 1721 innerLI.innerHTML = innerList[k]; 1722 // console.log('innerList['+k+'] : '+ innerList[k]); 1723 innerUL.appendChild(innerLI); 1724 } 1725 } 1726 } 1727 } 1728 }; 1729 if(chart_type == 'column'){ 1730 var ul = document.getElementById(parentDiv).getElementsByTagName('ul')[0]; 1731 if(ul){ 1732 ul.innerHTML = chart_title; 1733 } 1734 cw = colWidth * 1/5;
1735 colors = Nwagon.column.getColorSetforSingleColumnChart(max, data, dataset['colorset']); 1736 for(var i = 0; i<data.length; i++){ 1737 x1 = left + Math.round(colWidth * (i+0.2)); 1738 x2 = Math.round(left + (colWidth * (i+1)) - cw); 1739 y1 = height - bottom; 1740 y2 = height - bottom - Math.round(yRatio * data[i]); 1741 1742 var path = 'M ' + x1 + ' ' + y1 + ' L ' + x1 + ' ' + y2 + ' L ' + x2 + ' ' + y2 + ' L ' + x2 + ' ' + y1 +' X E'; 1743 attributes = {'path': path, 'strokecolor': colors[i], 'strokeweight':'1px', 'fillcolor': colors[i]}; 1744 text_to_add = data[i].toString(); 1745 var c = drawColumn(attributes, canvas.style.width, canvas.style.height, x1+5, y2+rowHeight, text_to_add, tooltip); 1746 canvas.appendChild(c); 1747 1748 var innerLI = document.createElement('li'); 1749 innerLI.innerHTML = 'Label ' + names[i] + ', Value '+ data[i]; 1750 if(ul){ 1751 ul.appendChild(innerLI); 1752 } 1753 } 1754 } 1755 if(chart_type == 'multi_column'){ 1756 colors = dataset['colorset']; 1757 cw = (3/5*colWidth)/colors.length; 1758 var chart_data = {}; 1759 for ( var k = 0; k<fields.length; k++){ 1760 chart_data[fields[k]] = []; 1761 } 1762 1763 for(var i = 0; i < data.length; i++){ 1764 var one_data = data[i]; 1765 var px = left + Math.round(colWidth * (i+0.2)); 1766 1767 for(var k = 0; k < one_data.length; k++){ 1768 x1 = px + Math.round((k*(cw))); 1769 x2 = px + Math.round((k+1)*cw); 1770 y1 = height - bottom; 1771 y2 = height - bottom - Math.round(yRatio * one_data[k]); 1772 1773 var path = 'M ' + x1 + ' ' + y1 + ' L ' + x1 + ' ' + y2 + ' L ' + x2 + ' ' + y2 + ' L ' + x2 + ' ' + y1 +' X E'; 1774 attributes = {'path': path, 'strokecolor': colors[k], 'strokeweight':'1px', 'fillcolor': colors[k]}; 1775 text_to_add = one_data[k].toString(); 1776 var c = drawColumn(attributes, canvas.style.width, canvas.style.height, x1+5, y2+rowHeight, text_to_add, tooltip); 1777 canvas.appendChild(c); 1778 chart_data[fields[k]].push('Label ' + names[i] + ', Value '+ one_data[k]); 1779 } 1780 } 1781 create_data_list(chart_data); 1782 } 1783 if(chart_type == 'stacked_column'){ 1784 colors = dataset['colorset']; 1785 cw = colWidth * 1/5; 1786 var chart_data = {}; 1787 for ( var k = 0; k<fields.length; k++){ 1788 chart_data[fields[k]] = []; 1789 } 1790 for(var i = 0; i < data.length; i++){ 1791 var one_data = data[i]; 1792 var yValue = height-bottom; 1793 var px = left + Math.round(colWidth * (i+0.2)); 1794 1795 for(var k = 0; k < one_data.length; k++){ 1796 1797 x1 = left + Math.round(colWidth * (i+0.2)); 1798 x2 = Math.round(left + (colWidth * (i+1)) - cw); 1799 y1 = yValue; 1800 y2 = yValue - Math.round(yRatio * one_data[k]); 1801 1802 var path = 'M ' + x1 + ' ' + y1 + ' L ' + x1 + ' ' + y2 + ' L ' + x2 + ' ' + y2 + ' L ' + x2 + ' ' + y1 +' X E'; 1803 attributes = {'path': path, 'strokecolor': colors[k], 'strokeweight':'1px', 'fillcolor': colors[k]}; 1804 text_to_add = one_data[k].toString(); 1805 var c = drawColumn(attributes, canvas.style.width, canvas.style.height, x1+5, y2+rowHeight, text_to_add, tooltip); 1806 canvas.appendChild(c); 1807 1808 chart_data[fields[k]].push('Label ' + names[i] + ', Value '+ one_data[k]); 1809 yValue -=Math.round(yRatio * one_data[k]); 1810 } 1811 } 1812 create_data_list(chart_data); 1813 } 1814 if((fields && (chart_type !='column')) || (chart_type =='column' && dataset['colorset'].length == 1)) { 1815 for(var i = 0; i<fields.length; i++){ 1816 var lx = width - right +30, ly= 30; 1817 var badge = document.createElement("v:rect"); 1818 style_attr = {'position':'absolute', 'width': '20px', 'height':'15px', 'top':(ly+i*30) + 'px', 'left':lx + 'px'}; 1819 Nwagon_ie.setStyles(badge, style_attr); 1820 attributes = {'fillcolor': colors[i], 'strokecolor':'#FFFFFF', 'strokeweight':'1px'}; 1821 Nwagon_ie.setAttributes(badge, attributes); 1822 canvas.appendChild(badge); 1823 1824 var name = document.createElement('div'); 1825 name.appendChild(document.createTextNode(fields[i])); 1826 style_attr = {'position':'absolute', 'top':(ly + 30*i) + 'px', 'left': (lx + 3
18260) + 'px', 'fontSize':'12px'}; 1827 Nwagon_ie.setStyles(name, style_attr); 1828 canvas.appendChild(name); 1829 } 1830 } 1831 }, 1832 1833 drawBackground: function(canvas, names, dataset, increment, max, width, height, left, bottom, isFields){ 1834 var numOfCols = names.length; 1835 var numOfRows = Math.ceil(max/increment); 1836 var right = 0, line_width=0, colWidth = 0; 1837 if(isFields){ 1838 var right = 150; 1839 } 1840 if(numOfCols){ 1841 var colWidth = Math.floor((width-left-right)/numOfCols); 1842 } 1843 var rowHeight = Math.round((height-bottom)/(numOfRows+1)); 1844 var values = dataset['values']; 1845 var attributes = {}, style_attr = {}; 1846 1847 for (var i = 0; i<=values.length; i++){ 1848 var v_line = document.createElement('v:shape'); 1849 var v_height_start = height - bottom; 1850 var v_height_end = height - bottom -(rowHeight*(numOfRows+1)); 1851 var px = left + (colWidth*i); 1852 var v_path = 'M '+ px + ' '+ v_height_start + 'L ' + px +' ' + v_height_end; 1853 1854 attributes = {'path': v_path, 'strokecolor': '#CCC', 'strokeweight':'1px'}; 1855 Nwagon_ie.setAttributes(v_line, attributes); 1856 style_attr = {'position':'absolute', 'width': canvas.style.width, 'height': canvas.style.height}; 1857 Nwagon_ie.setStyles(v_line, style_attr); 1858 canvas.appendChild(v_line); 1859 1860 // draw text as well (x coord) 1861 if(i<values.length){ 1862 var x_label = document.createElement('div'); 1863 x_label.appendChild(document.createTextNode(names[i])); 1864 x_label.setAttribute('class', 'label_ie') 1865 style_attr = {'position':'absolute', 'left': (px + (colWidth/4))+ 'px', 'top': (height - bottom + 15)+ 'px', 'fontSize':'13px'}; 1866 Nwagon_ie.setStyles(x_label, style_attr); 1867 canvas.appendChild(x_label); 1868 } 1869 if(i == values.length){ 1870 line_width = px; 1871 } 1872 } 1873 1874 //Horizontal lines & labels 1875 var count = 0; 1876 for (i = 0; i<=numOfRows; i++){ 1877 var line = document.createElement('v:shape'); 1878 var line_height = height - bottom - (rowHeight * i); 1879 var path = 'M '+ left + ' '+ line_height + 'L ' + line_width +' ' + line_height; 1880 1881 attributes = {'path': path, 'strokecolor': '#CCC', 'strokeweight':'1px'}; 1882 Nwagon_ie.setAttributes(line, attributes); 1883 line.style.position = "absolute"; 1884 line.style.width = canvas.style.width; 1885 line.style.height = canvas.style.height; 1886 canvas.appendChild(line); 1887 1888 // label 1889 var label = document.createElement('div'); 1890 var label_text = (increment*i).toString(); 1891 label.setAttribute('class', 'label_ie') 1892 label.appendChild(document.createTextNode(label_text)); 1893 style_attr = {'position':'absolute', 'right':(width - left +15) + 'px', 'top':line_height - 6 + 'px', 'fontSize':'13px' }; 1894 Nwagon_ie.setStyles(label, style_attr); 1895 canvas.appendChild(label); 1896 } 1897 } 1898 }, 1899 line: { 1900 guide_line: null, 1901 guide_line_max_left: 0, 1902 drawLineChart: function(obj){ 1903 var type = obj.chartType; 1904 var isAreaChart = false, isJira = false; 1905 var width = obj.width, height = obj.height; 1906 var canvas = Nwagon_ie.createChartArea(obj.chart_div, width, height); 1907 var left = 0;//obj.leftOffsetValue ? obj.leftOffsetValue : 50; 1908 var bottom = 0;//obj.bottomOffsetValue ? obj.bottomOffsetValue : 80; 1909 var names = obj.legend['names']; 1910 var fields = obj.dataset['fields']; 1911 var values = obj.dataset['values']; 1912 var max = obj.highest ? obj.highest : Nwagon.getMax(values); 1913 var min = obj.lowest ? obj.lowest : 0; 1914 isAreaChart = (type == 'area'); 1915 isJira = (type == 'jira');
1916 var isGuideNeeded = obj.hasOwnProperty('isGuideLineNeeded') ? obj.isGuideLineNeeded : false; 1917 //this.drawBackground(canvas, names, obj.dataset, obj.increment, max, min, width, height, left, bottom); //freesos 1918 this.drawLineForeground(obj.chart_div, canvas, obj.legend, obj.dataset, obj.increment, max, min, width, height, left, bottom, isAreaChart , isJira, isGuideNeeded); 1919 if(isGuideNeeded && Nwagon_ie.line.guide_line){ 1920 var right = fields ? 150 : 0; 1921 var interval = Math.round(width-left-right)/names.length; 1922 var tool = document.createElement('div'); 1923 canvas.appendChild(tool); 1924 1925 var g = Nwagon_ie.line.guide_line; 1926 var d = document.getElementById(obj.chart_div); 1927 var x_offset = canvas.offsetLeft + canvas.clientLeft; 1928 var y_offset = canvas.offsetTop + canvas.clientTop; 1929 function moveGuideLine(e) { 1930 var xPosition = e.clientX - x_offset; 1931 var yPosition = e.clientY - y_offset; 1932 if((xPosition-left) > 0 ){ 1933 var index = (Math.floor((xPosition-left)/interval)); 1934 if(xPosition > Nwagon_ie.line.guide_line_max_left){ 1935 xPosition = Nwagon_ie.line.guide_line_max_left -left; 1936 } 1937 if(xPosition >= left && (index < names.length)){ 1938 g.style.left = xPosition+'px'; 1939 tool.innerHTML = ''; 1940 tool.style.cssText = 'display: block; float:left; padding: 0 5px 0 5px; background-color:#f9f9f9; border: 1px solid #666; position:absolute; z-index:100'; 1941 tool.style.fontSize = '12px'; 1942 tool.style.left = xPosition + 'px'; 1943 tool.style.top = ( yPosition-(fields.length*14) + document.body.scrollTop )+ 'px'; 1944 for(var i = 0; i<fields.length; i++){ 1945 var s = names[index] + '('+ fields[i] + '): ' + values[index][i]; 1946 var textDiv = document.createElement('div'); 1947 if(textDiv){ 1948 textDiv.innerHTML = s; 1949 tool.appendChild(textDiv); 1950 } 1951 } 1952 } 1953 } 1954 } 1955 function hideTool(e){ 1956 tool.style.cssText = 'display:none'; 1957 } 1958 d.attachEvent('onmousemove', moveGuideLine); 1959 d.attachEvent('onmouseout', hideTool); 1960 } 1961 }, 1962 1963 drawJiraForeground:function(points, colors, canvas, left_off, bottom_off){ 1964 var getSlopeAndAlpha = function(point_1, point_2){ 1965 var values = {}; 1966 var slope; 1967 if((point_2[1] == point_1[1])){ 1968 slope = 0; 1969 } 1970 else{ 1971 slope = (point_2[1]-point_1[1])/(point_2[0]-point_1[0]); 1972 } 1973 values['alpha'] = point_1[1] - (slope * point_1[0]); 1974 values['slope'] = slope; 1975 return values; 1976 }; 1977 var drawPolygons = function(arr1, arr2){ 1978 1979 if(arr1 && arr2){ 1980 var color, first, second, px, py; 1981 var points_to_draw = ''; 1982 1983 var i = 0; 1984 while ( i < arr1.length){ 1985 if(arr1[i][1]< arr2[i][1]){ 1986 first = arr1; 1987 second = arr2; 1988 color = colors[0]; 1989 break; 1990 } 1991 if(arr1[i][1]> arr2[i][1]){ 1992 first = arr2; 1993 second = arr1;
1994 color = colors[1]; 1995 break; 1996 } 1997 i++; 1998 } 1999 var j = 0; 2000 while(j<first.length){ 2001 px = Math.round(first[j][0]); 2002 var y_coord = bottom_off - first[j][1]; 2003 py = Math.round(bottom_off - y_coord); 2004 // py = first[j][1]; 2005 if(j === 0){ 2006 points_to_draw += 'M '+px + ' ' + py; 2007 } 2008 else{ 2009 points_to_draw += ' L '+px + ' ' + py; 2010 } 2011 j++; 2012 } 2013 var k = second.length-1; 2014 while(k >= 0){ 2015 px = Math.round(second[k][0]); 2016 var y_coord = bottom_off - second[k][1]; 2017 py = Math.round(bottom_off - y_coord); 2018 points_to_draw += ' L '+px + ' ' + py; 2019 k--; 2020 } 2021 2022 points_to_draw +=' X E'; 2023 var unlayered = document.createElement('v:shape'); 2024 var attributes = {'path': points_to_draw, 'strokecolor': '#CCC', 'fillcolor':color}; 2025 Nwagon_ie.setAttributes(unlayered, attributes); 2026 var style_attr = {'position':'absolute', 'width': canvas.style.width, 'height': canvas.style.height, 'filter':'alpha(opacity=80)'}; 2027 Nwagon_ie.setStyles(unlayered, style_attr); 2028 canvas.appendChild(unlayered); 2029 } 2030 }; 2031 2032 var layered_points = []; 2033 2034 if(points.length == 2){ 2035 var colorOne = colors[0]; 2036 var colorTwo = colors[1]; 2037 var one = points[0]; 2038 var two = points[1]; 2039 var temp_one = [], temp_two = []; 2040 2041 if(one.length === two.length){ 2042 var length = one.length; 2043 2044 2045 for(var i = 0; i < length; i++){ 2046 temp_one.push(one[i]); 2047 temp_two.push(two[i]); 2048 2049 if((one[i][1] < two[i][1])) layered_points.push(two[i]); 2050 else layered_points.push(one[i]); 2051 2052 if(i !== length-1){ 2053 if( !((one[i][1] > two[i][1]) && (one[i+1][1] > two[i+1][1])) && 2054 !((one[i][1] < two[i][1]) && (one[i+1][1] < two[i+1][1])) && 2055 !((one[i][1] == two[i][1]) || (one[i+1][1] == two[i+1][1])) ) 2056 { 2057 var points_to_push = []; 2058 var equation1 = getSlopeAndAlpha(one[i], one[i+1]); 2059 var equation2 = getSlopeAndAlpha(two[i], two[i+1]); 2060 var slope1 = equation1['slope']; 2061 var slope2 = equation2['slope']; 2062 var alpha1 = equation1['alpha']; 2063 var alpha2 = equation2['alpha']; 2064 2065 var px = (alpha2 - alpha1)/(slope1-slope2) 2066 var py = (px * slope1) + alpha1; 2067 points_to_push.push(px); 2068 points_to_push.push(py); 2069 layered_points.push(points_to_push); 2070 temp_one.push(points_to_push); // for making splicing easier push the cross points twice 2071 temp_one.push(points_to_push); 2072 temp_two.push(points_to_push); 2073 temp_two.push(points_to_push); 2074 } 2075 } 2076 } 2077 } 2078 }
2079 // Draw polygon where two areas are stacked up 2080 if(layered_points.length){ 2081 var points_to_draw = ''; 2082 for (var i = 0; i<layered_points.length; i++){ 2083 var px = Math.round(layered_points[i][0]); 2084 var y_coord = bottom_off - layered_points[i][1]; 2085 var py = Math.round(bottom_off - y_coord); 2086 if(i === 0){ 2087 points_to_draw += 'M '+px + ' ' + py; 2088 } 2089 else{ 2090 points_to_draw += ' L '+px + ' ' + py; 2091 } 2092 } 2093 points_to_draw += ' L '+layered_points[layered_points.length-1][0] + ' ' + bottom_off + ' L '+ left_off + ' '+ bottom_off + ' X E'; 2094 var layered_line = document.createElement('v:shape'); 2095 var attributes = {'path': points_to_draw, 'strokecolor': '#CCC', 'fillcolor':'#FFF'}; 2096 Nwagon_ie.setAttributes(layered_line, attributes); 2097 var style_attr = {'position':'absolute', 'width': canvas.style.width, 'height': canvas.style.height, 'filter':'alpha(opacity=80)'}; 2098 Nwagon_ie.setStyles(layered_line, style_attr); 2099 canvas.appendChild(layered_line); 2100 } 2101 // Draw polygons for non-layered portions 2102 if(temp_one.length === temp_two.length){ 2103 var i = 0; 2104 while(i<temp_one.length){ 2105 2106 if((temp_one[i][1] == temp_two[i][1] ) && (i !=0) || (i == temp_one.length-1)) { 2107 var splice_one = temp_one.splice(i+1, temp_one.length-1); 2108 var splice_two = temp_two.splice(i+1, temp_two.length-1); 2109 2110 drawPolygons(temp_one, temp_two); 2111 2112 temp_one = splice_one; 2113 temp_two = splice_two; 2114 i = 0; 2115 } 2116 i++; 2117 } 2118 } 2119 }, 2120 2121 drawLineForeground: function(parentDiv, canvas, legend, dataset, increment, max, min, width, height, left, bottom, isArea, isJira, guide_line_needed){ 2122 var names = legend['names']; 2123 var colors = dataset['colorset']; 2124 var fields = dataset['fields']; 2125 var values = dataset['values']; 2126 var numOfCols = values.length - 1; 2127 var right = fields ? 150 : 0; 2128 //var colWidth = Math.round((width-left-right)/numOfCols); // freesos 2129 var colWidth = Math.round((width)/numOfCols); 2130 var px = left, py = height-bottom; 2131 var numOfRows = ((max-min)/increment); 2132 var rowHeight = Math.round((height-bottom)/(numOfRows+1)); 2133 var yRatio = 1;//rowHeight/increment; // freesos 2134 var paths = [], polygon_paths = []; 2135 var text_to_add = ''; 2136 var value = values[0]; 2137 var tooltip = Nwagon_ie.createTooltip(canvas); 2138 var style_attr = {}; 2139 var jira_points = []; 2140 2141 for(var k = 0; k<value.length; k++){ 2142 /*var ul = document.getElementById(parentDiv).getElementsByTagName('ul')[0]; 2143 if(ul){ 2144 var textEl = document.createElement('li'); 2145 textEl.innerHTML = fields[k]; 2146 var innerUL = document.createElement('ul'); 2147 textEl.appendChild(innerUL); 2148 ul.appendChild(textEl); 2149 }*/ 2150 var first_y = 0; 2151 var start_point = 0; 2152 var path = ''; 2153 var polygon_path = ''; 2154 var line_points = []; 2155 var x = 0, y = 0; 2156 var rate = numOfRows / height; // freesos 2157 for(var i = 0; i<values.length; i++){ 2158 var point_pair = []; 2159 x = px + (colWidth * i); 2160 y = py - Math.round((values[i][k] - 0.5 - min) * yRatio); 2161 2162 // freesos 2163 y = Math.round(y / rate) + height; 2164 if (y > height) y= height; 2165 // freesos 2166 2167 if(isNaN(y)){ 2168 start_point++; 2169 } 2170 else { 2171 if(i == start_point){ 2172 path += 'M '+x + ' ' + y; 2173 first_y = y; 2174 } 2175 else{ 2176 path += 'L '+x + ' ' + y; 2177 } 2178 point_pair.push(x); 2179 point_pair.push(y);
2180 line_points.push(point_pair); 2181 2182 // freesos 2183 /*var vertex = Nwagon_ie.drawVertex(x, y, colors[k]); 2184 text_to_add = fields ? names[i] + '('+ fields[k] + '): ' + values[i][k].toString() : names[i] + ': ' + values[i][k].toString(); 2185 if(!guide_line_needed){ 2186 vertex.onmouseover = Nwagon_ie.showToolTip(tooltip, x, y, text_to_add); 2187 vertex.onmouseout = Nwagon_ie.hideToolTip(tooltip); 2188 } 2189 canvas.appendChild(vertex); 2190 if(innerUL){ 2191 var innerLI = document.createElement('li'); 2192 innerLI.innerHTML = 'Label ' + names[i] + ', Value '+ values[i][k].toString(); 2193 innerUL.appendChild(innerLI); 2194 }*/ 2195 } 2196 } 2197 paths.push(path); 2198 if(isArea){ 2199 //polygon_path = path + 'L ' + x + ' '+ py +' L '+ px + ' ' + py +' L '+ px + ' ' + y +' X E'; 2200 polygon_path = path + 'L ' + x + ' '+ py +' L '+ px + ' ' + py +' L '+ px + ' ' + height +' X E'; //freesos 2201 polygon_paths.push(polygon_path); 2202 } 2203 jira_points.push(line_points); 2204 } 2205 2206 for(var k = 0; k<value.length; k++){ 2207 2208 var line = document.createElement('v:shape'); 2209 var attributes = {'path': paths[k], 'strokecolor': colors[k], 'strokeweight':'2px'}; 2210 Nwagon_ie.setAttributes(line, attributes); 2211 style_attr = {'position':'absolute', 'width': canvas.style.width, 'height': canvas.style.height}; 2212 Nwagon_ie.setStyles(line, style_attr); 2213 var fill = document.createElement('v:fill'); 2214 fill.setAttribute('on', 'false'); 2215 line.appendChild(fill); 2216 canvas.appendChild(line); 2217 2218 if(isArea){ 2219 var polygon = document.createElement('v:shape'); 2220 attributes = {'path': polygon_paths[k], 'strokecolor': colors[k], 'fillcolor':colors[k]}; 2221 Nwagon_ie.setAttributes(polygon, attributes); 2222 style_attr = {'position':'absolute', 'width': canvas.style.width, 'height': canvas.style.height, 'filter':'alpha(opacity=80)'}; 2223 Nwagon_ie.setStyles(polygon, style_attr); 2224 canvas.appendChild(polygon); 2225 //console.log(polygon); 2226 } 2227 2228 /*if(fields){ 2229 var lx = width - right +30, ly= 30; 2230 var badge = document.createElement("v:rect"); 2231 style_attr = {'position':'absolute', 'width': '20px', 'height': '15px', 'left':lx + 'px', 'top':(ly+k*30) + 'px'}; 2232 Nwagon_ie.setStyles(badge, style_attr); 2233 2234 attributes = {'fillcolor': colors[k], 'strokecolor':'#FFFFFF', 'strokeweight':'1px'}; 2235 Nwagon_ie.setAttributes(badge, attributes); 2236 canvas.appendChild(badge); 2237 2238 var name = document.createElement('div'); 2239 name.appendChild(document.createTextNode(fields[k])); 2240 style_attr = {'position':'absolute', 'left':(lx + 30) + 'px', 'top':(ly + 30*k) + 'px', 'fontSize':'12px'}; 2241 Nwagon_ie.setStyles(name, style_attr); 2242 2243 canvas.appendChild(name); 2244 }*/ 2245 } 2246 if(isJira){ 2247 Nwagon_ie.line.drawJiraForeground(jira_points, colors, canvas, left, height-bottom); 2248 } 2249 if(guide_line_needed){ 2250 Nwagon_ie.line.guide_line = document.createElement('div'); 2251 var x_max = left + (colWidth*numOfCols); 2252 Nwagon_ie.line.guide_line_max_left = x_max; 2253 Nwagon_ie.setStyles(Nwagon_ie.line.guide_line, {'position':'absolute', 'width': '2px', 'height': (height-bottom+5)+'px', 'left':x_max + 'px', 'background':'#4010ad'}); 2254 canvas.appendChild(Nwagon_ie.line.guide_line); 2255 } 2256 }, 2257
2258 drawBackground: function(canvas, names, dataset, increment, max, min, width, height, left, bottom){ 2259 var numOfCols = dataset['values'].length; 2260 var numOfRows = Math.ceil((max-min)/increment); 2261 var right = 0; 2262 var fields = dataset['fields']; 2263 if(fields){ 2264 right = 150; 2265 } 2266 if(numOfCols){ 2267 var colWidth = Math.round((width-left-right)/numOfCols); 2268 } 2269 var rowHeight = Math.round((height-bottom)/(numOfRows+1)); 2270 var values = dataset['values']; 2271 var yRatio = (height-bottom)/100; 2272 var attributes = {}, style_attr = {}; 2273 2274 for (var i = 0; i<values.length; i++){ 2275 var v_line = document.createElement('v:shape'); 2276 var v_height_start = height - bottom + 5; 2277 var v_height_end = (i == 0) ? height - bottom -(rowHeight*(numOfRows+1)) : height - bottom -5; 2278 var px = left + (colWidth*i); 2279 var v_path = 'M '+ px + ' '+ v_height_start + 'L ' + px +' ' + v_height_end; 2280 2281 attributes = {'path': v_path, 'strokecolor': '#CCC', 'strokeweight':'1px'}; 2282 Nwagon_ie.setAttributes(v_line, attributes); 2283 style_attr = {'position':'absolute', 'width': canvas.style.width, 'height': canvas.style.height}; 2284 Nwagon_ie.setStyles(v_line, style_attr); 2285 canvas.appendChild(v_line); 2286 2287 // draw text as well (x coord) 2288 var x_label = document.createElement('div'); 2289 x_label.appendChild(document.createTextNode(names[i])); 2290 style_attr = {'position':'absolute', 'left': px+ 'px', 'top': (height - bottom + 15)+ 'px', 'fontSize': '13px'}; 2291 Nwagon_ie.setStyles(x_label, style_attr); 2292 canvas.appendChild(x_label); 2293 } 2294 2295 //Horizontal lines & labels 2296 var count = 0; 2297 var line_width = width-right+3; 2298 for (i = 0; i<=numOfRows; i++){ 2299 var line = document.createElement('v:shape'); 2300 var line_height = height - bottom - (rowHeight * i); 2301 var path = 'M '+ (left-3) + ' '+ line_height + 'L ' + line_width +' ' + line_height; 2302 2303 attributes = {'path': path, 'strokecolor': '#CCC', 'strokeweight':'1px'}; 2304 Nwagon_ie.setAttributes(line, attributes); 2305 style_attr = {'position':'absolute', 'width': canvas.style.width, 'height': canvas.style.height}; 2306 Nwagon_ie.setStyles(line, style_attr); 2307 var stroke = document.createElement('v:stroke'); 2308 stroke.setAttribute('dashstyle', 'dash'); 2309 line.appendChild(stroke); 2310 canvas.appendChild(line); 2311 2312 // label 2313 var label = document.createElement('div'); 2314 var label_text = ((increment*i) + min).toString(); 2315 label.appendChild(document.createTextNode(label_text)); 2316 2317 style_attr = {'position':'absolute', 'right': (width - left +15) + 'px', 'top': line_height - 3 + 'px', 'fontSize': '13px'}; 2318 Nwagon_ie.setStyles(label, style_attr); 2319 canvas.appendChild(label); 2320 } 2321 } 2322 }, 2323 2324 polar: { 2325 drawPolarChart: function(obj){ 2326 var width = obj.width, height = obj.height; 2327 var values = obj.dataset['values']; 2328 var canvas = Nwagon_ie.createChartArea(obj.chart_div, width, height); 2329 var angles = {'angles':[], 'percent':[], 'values':[]}; 2330 if(obj.chartType == 'polar_pie'){ 2331 var degree_values = obj.dataset['degree_values']; 2332 if(degree_values){ 2333 angles = Nwagon.getAngles(degree_values, angles); 2334 } 2335 } 2336 if(canvas && obj.legend['names'] && obj.dataset){ 2337 this.drawBackground(canvas, angles['angles'], obj.chartType, obj.legend['names'], obj.dataset, obj.increment, obj.max, obj.core_circle_radius, height); 2338 this.drawForeground(canvas, obj.chart_div, angles, obj.chartType, obj.legend, obj.dataset, obj.core_circle_radius, obj.core_circle_value, obj.max, height); 2339 if(obj.dataset['fields']){ 2340 Nwagon_ie.drawFields_for_circular_type_chart(obj.dataset['fields'], obj.dataset['colorset'], canvas, height); 2341 } 2342 } 2343 }, 2344 drawForeground: function(canvas, parentDiv, angles, chart_type, legend, dataset, core_circle_radius, core_value, max, h){ 2345 var ul = document.getElementById(parentDiv).getElementsByTagName('ul')[0]; 2346 var create_data_li = function(text_to_add){ 2347 if(ul){ 2348 var li = document.createElement('li'); 2349 li.innerHTML = text_to_add; 2350 ul.appendChild(li); 2351 } 2352 }; 2353 var cx = Math.round(h/2), cy=Math.round(h/2); 2354 var names = legend['names']; //names' dimension should match dataset['values']'s dimension 2355 var data = dataset['values']; 2356 var colors = dataset['colorset']; 2357 var opacities = dataset['opacity']; 2358 var len = data.length; 2359 var start_angle = 90; 2360 var style_attr = {}; 2361 var opacity = 80; 2362 var angle_accumulate = Math.PI/2; 2363 if(len){ 2364 var angle = Math.round(360/len); 2365 var angle_in_pie = (Math.PI*2/len); 2366 var _text_to_add = ''; 2367 for(var j=0; j<len; j++){ 2368 if(angles['angles'].length){ //polar area chart 2369 angle = angles['angles'][j]; 2370 angle_in_pie = (angles['angles'][j] * Math.PI)/180; 2371 } 2372 var sub_data = data[j]; 2373 var sub_len = sub_data.length; 2374 var sub_angle = angle/sub_len;
2375 var sub_angle_in_pie = angle_in_pie/sub_len; 2376 for(var k = 0; k < sub_len; k++){ 2377 if(opacities.length){ 2378 opacity = Nwagon.getOpacity(opacities, sub_data[k], max) * 100; 2379 } 2380 style_attr = {'cssText':'position:absolute', 'width': canvas.style.width, 'height': canvas.style.height, 'filter': 'alpha(opacity='+ opacity +')' }; 2381 var wedge = Nwagon_ie.drawWedges(cx, cy, sub_data[k]+core_circle_radius, colors[j], start_angle, sub_angle, style_attr); 2382 canvas.appendChild(wedge); 2383 start_angle-=sub_angle; 2384 2385 // draw labels 2386 var label_angle = angle_accumulate + (sub_angle_in_pie/2); 2387 var line_width = max + core_circle_radius + 20; 2388 var x_cord = (cx - 5 - Math.round(line_width * Math.cos(label_angle))); 2389 var y_cord = (h - 5 - cy - Math.round((line_width) * Math.sin(label_angle))); 2390 var label = document.createElement('div'); 2391 label.appendChild(document.createTextNode(names[j][k])); 2392 style_attr = {'position':'absolute', 'left': x_cord + 'px', 'top': y_cord + 'px', 'fontSize': '13px'}; 2393 Nwagon_ie.setStyles(label, style_attr); 2394 canvas.appendChild(label); 2395 _text_to_add = names[j][k] + '('+ sub_data[k] +')'; 2396 angle_accumulate+=sub_angle_in_pie; 2397 create_data_li(_text_to_add); 2398 } 2399 2400 } 2401 if(core_circle_radius > 0){ //draw core circle and value 2402 style_attr = {'cssText':'position:absolute', 'width': canvas.style.width, 'height': canvas.style.height}; 2403 var inner_circle = Nwagon_ie.drawWedges(cx, cy, core_circle_radius, '#FFFFFF', 0, 360, style_attr); 2404 canvas.appendChild(inner_circle); 2405 //TODO: core text 2406 var label = document.createElement('div'); 2407 label.appendChild(document.createTextNode(core_value)); 2408 style_attr = {'cssText':'position:absolute; z-index:100', 'left': cx-(core_circle_radius/2) + 'px', 'top': cy-5 + 'px', 'fontSize': '12px'}; 2409 Nwagon_ie.setStyles(label, style_attr); 2410 canvas.appendChild(label); 2411 } 2412 } 2413 }, 2414 drawBackground: function(canvas, angles, chart_type, obj_names, dataset, increment, max_radius, core_circle_radius, h){ 2415 var cx = Math.round(h/2), cy=Math.round(h/2); 2416 var data = dataset['values']; 2417 var len = data.length; 2418 2419 var draw_bg_circles = function(radius){ 2420 var sa = Math.round(90 * 65535); 2421 var a = -Math.round((360)* 65536); 2422 var circle = document.createElement("v:shape"); 2423 var path = 'AE ' + cx + ' ' + cy + ' ' + radius + ' ' + radius + ' ' + sa + ' ' + a + ' X E'; 2424 var attributes = {'path': path, 'fillcolor': '#FFFFFF', 'strokecolor': '#CCC', 'strokeweight':'1px'}; 2425 Nwagon_ie.setAttributes(circle, attributes); 2426 var style_attr = {'cssText':'position:absolute', 'width': canvas.style.width, 'height': canvas.style.height}; 2427 Nwagon_ie.setStyles(circle, style_attr); 2428 canvas.appendChild(circle); 2429 }; 2430 2431 //draw bg circles and y labels 2432 var r = max_radius + core_circle_radius; 2433 while(r > core_circle_radius){ 2434 draw_bg_circles(r); 2435 var label = document.createElement('div'); 2436 label.appendChild(document.createTextNode((r-core_circle_radius).toString())); 2437 style_attr = {'cssText':'position:absolute; z-index:100', 'left': cx + 'px', 'top': (h-cy-r-10) + 'px', 'fontSize': '12px'}; 2438 Nwagon_ie.setStyles(label, style_attr); 2439 canvas.appendChild(label); 2440 r-=increment; 2441 } 2442 2443 //straight lines 2444 var rotate_angle = 0, tweak_angle = Math.PI/2; //start at 90 degree 2445 if(len){ 2446 var angle = (2*Math.PI)/len; 2447 for(var j=0; j<len; j++) 2448 { 2449 if(angles.length){ // for(polar_pie) 2450 rotate_angle += (angles[j] * Math.PI)/180; 2451 } 2452 else{ 2453 rotate_angle = angle * j; 2454 } 2455 var line_width = max_radius + core_circle_radius; 2456 var line = document.createElement('v:shape'); 2457 var path = 'M '+ cx + ' '+ cy + 'L ' + (cx- Math.round(line_width * Math.cos(rotate_angle + tweak_angle))) +' ' + (h - cy - Math.round((line_width) * Math.sin(rotate_angle+tweak_angle))); 2458 var attributes = {'path': path, 'strokecolor': '#CCC', 'strokeweight':'1px'}; 2459 Nwagon_ie.setAttributes(line, attributes); 2460 style_attr = {'position':'absolute', 'width': canvas.style.width, 'height': canvas.style.height}; 2461 Nwagon_ie.setStyles(line, style_attr); 2462 canvas.appendChild(line); 2463 2464 var sub_data = data[j]; 2465 if(sub_data){ 2466 var sub_len = sub_data.length; 2467 for (var k = 1; k < sub_len; k++) 2468 { 2469 var inner_rotate_angle = rotate_angle + (angle/sub_len*k) +tweak_angle; 2470 2471 var inner_line = document.createElement('v:shape'); 2472 var path = 'M '+ cx + ' '+ cy + 'L ' + (cx- Math.round(line_width * Math.cos(inner_rotate_angle))) +' ' + (h - cy - Math.round((line_width) * Math.sin(inner_rotate_angle))); 2473 var attributes = {'path': path, 'strokecolor': '#CCC', 'strokeweight':'1px'}; 2474 Nwagon_ie.setAttributes(inner_line, attributes); 2475 style_attr = {'position':'absolute', 'width': canvas.style.width, 'height': canvas.style.height}; 2476 Nwagon_ie.setStyles(inner_line, style_attr); 2477 canvas.appendChild(inner_line); 2478 } 2479 } 2480 } 2481 } 2482 } 2483 }, 2484 2485 donut:{ 2486 2487 drawDonutChart: function(obj){ 2488 2489 var width = obj.width, height = obj.height; 2490 var canvas = Nwagon_ie.createChartArea(obj.chart_div, width, height); 2491 var angles = {'angles':[], 'percent':[], 'values':[]}; 2492 var degree_values = obj.dataset['values']; 2493 if(degree_values){ 2494 angles = Nwagon.getAngles(degree_values, angles); 2495 } 2496 this.drawDonut(obj.chart_div, angles, obj.chartType, canvas, obj.dataset, obj.core_circle_radius, obj.donut_width, height); 2497 Nwagon_ie.drawFields_for_circular_type_chart(obj.dataset['fields'], obj.dataset['colorset'], canvas, height); 2498 }, 2499 2500 drawDonut: function(parentDiv, angles, chartType, canvas, data, core_radius, donut_width, h){ 2501 var radius = donut_width + core_radius; 2502 var ul = document.getElementById(parentDiv).getElementsByTagName('ul')[0]; 2503 var create_data_li = function(text_to_add){ 2504 if(ul){ 2505 var li = document.createElement('li'); 2506 li.innerHTML = text_to_add; 2507 ul.appendChild(li); 2508 } 2509 }; 2510 2511 var tooltip = Nwagon_ie.createTooltip(canvas); 2512 var values = data['values']; 2513 var colors = data['colorset']; 2514 var fields = data['fields']; 2515 var angle_int = angles['angles']; 2516 var attributes = {}, style_attr = {};; 2517 var start_angle = 90;
2517 // Tweak the angles so that our pie goes clockwise from 12 o'clock. 2518 var text_to_add = ''; 2519 var cx = Math.round(h/2), cy = Math.round(h/2); 2520 2521 for(var i = 0; i < angle_int.length; i++) { 2522 2523 style_attr = {'cssText':'position:absolute', 'width': canvas.style.width, 'height': canvas.style.height /*,'filter': 'alpha(opacity=80)' */}; 2524 var wedge = Nwagon_ie.drawWedges(cx, cy, radius, colors[i], start_angle, angle_int[i], style_attr); 2525 2526 canvas.appendChild(wedge); 2527 2528 var tooltip_angle = (Math.PI * start_angle)/180; 2529 var tooltip_x = cx + radius * Math.cos(tooltip_angle); 2530 var tooltip_y = cy + radius * Math.sin(tooltip_angle); 2531 var degree_value = angles['values'][i].toFixed(0); 2532 text_to_add = fields[i] ? (fields[i]+ '(' +(angles['percent'][i]*100).toFixed(1) +'%) ' + degree_value) : 'undefiend'; 2533 wedge.onmouseover = Nwagon_ie.showToolTip(tooltip, tooltip_x, tooltip_y, text_to_add); 2534 wedge.onmouseout = Nwagon_ie.hideToolTip(tooltip); 2535 2536 if(chartType == 'donut'){ 2537 style_attr = {'cssText':'position:absolute; z-index:50', 'width': canvas.style.width, 'height': canvas.style.height}; 2538 var wedge2 = Nwagon_ie.drawWedges(cx, cy, core_radius, '#FFFFFF', start_angle, angle_int[i], style_attr); 2539 canvas.appendChild(wedge2); 2540 } 2541 start_angle -= angle_int[i]; 2542 create_data_li(text_to_add); 2543 } 2544 } 2545 }, 2546 2547 radar: { 2548 2549 drawRadarChart: function(obj){ 2550 2551 var width = obj.width, height = obj.height; 2552 var canvas = Nwagon_ie.createChartArea(obj.chart_div, width, height); 2553 2554 this.drawBackground(canvas, obj.legend['names'], obj.dataset['bgColor'], CONST_DECREMENT, CONST_MAX_RADIUS, height, width); 2555 // this.drawLabels(svg, obj.legend, CONST_MAX_RADIUS); 2556 this.drawPolygonForeground(obj.chart_div, canvas, obj.legend, obj.dataset, height, width); 2557 }, 2558 2559 drawBackground: function(canvas, names, bg_color, decrement, maxRadius, h, w){ 2560 var numOfRadars = names.length; 2561 var bg = bg_color ? bg_color : '#F9F9F9'; 2562 var cx = Math.round(w/2), cy = Math.round(h/2); 2563 var sector_angle = (Math.PI*2)/numOfRadars, tweak_angle = Math.PI; //start on 180 degree 2564 var rotate_angle = 0, prev_angle = 0; 2565 var p0= cx + ' '+ cy , p1='', p2=''; 2566 var style_attr = {'position':'absolute', 'width': canvas.style.width, 'height': canvas.style.height}; 2567 var style_label = {}; 2568 2569 var drawline = function(start, end, style, isdashed){ 2570 var line = document.createElement('v:shape'); 2571 var path = 'M '+start+ 'L ' + end; 2572 var attributes = {'path': path, 'strokecolor':'#666', 'strokeweight':'1px'}; 2573 Nwagon_ie.setAttributes(line, attributes); 2574 Nwagon_ie.setStyles(line, style); 2575 if(isdashed){ 2576 var stroke = document.createElement('v:stroke'); 2577 stroke.setAttribute('dashstyle', 'dash'); 2578 line.appendChild(stroke); 2579 } 2580 return line; 2581 }; 2582 var draw_x_coord = function(text_to_add, x, y){ 2583 var label = document.createElement('div'); 2584 label.appendChild(document.createTextNode(text_to_add)); 2585 Nwagon_ie.setStyles(label, {'cssText':'position:absolute; z-index:100', 'left': x + 'px', 'top': (y-5)+ 'px', 'fontSize': '10px'}); 2586 return label; 2587 }; 2588 2589 for(var j= 1 ; j<=numOfRadars; j++){ 2590 var label_location_off = 0; 2591 var radius = maxRadius; 2592 prev_angle = (sector_angle * (j-1)) + tweak_angle; 2593 rotate_angle = (sector_angle * j) + tweak_angle; 2594 var x_off = Math.round((maxRadius+20) * Math.cos(rotate_angle)); 2595 var y_off = Math.round((maxRadius+20) * Math.sin(rotate_angle)); 2596 p1 = (cx- Math.round(maxRadius * Math.cos(rotate_angle))) +' ' + (h - cy - Math.round((maxRadius) * Math.sin(rotate_angle))); 2597 var straight_line = drawline(p0, p1, style_attr, false); 2598 canvas.appendChild(straight_line); 2599 2600 // add labels 2601 var label = document.createElement('div'); 2602 if(j == numOfRadars) label.appendChild(document.createTextNode(names[0])); 2603 else label.appendChild(document.createTextNode(names[j])); 2604 style_label = {'cssText':'position:absolute; z-index:100', 'fontSize': '12px'}; 2605 Nwagon_ie.setStyles(label, style_label); 2606 canvas.appendChild(label); 2607 if(x_off > 0) { 2608 label_location_off = label.clientWidth; 2609 } 2610 if (x_off == 0) { 2611 label_location_off = Math.round(label.clientWidth/2); 2612 } 2613 label.style.left = (cx- x_off - label_location_off) + 'px'; 2614 label.style.top = (h - cy - (y_off+5)) + 'px'; 2615 2616 while(radius>0){ 2617 if(j == 1){ 2618 //draw coordinate labels 2619 var x_coord = draw_x_coord(radius.toString(), (cx + radius), (h-cy)); 2620 canvas.appendChild(x_coord); 2621 } 2622 //draw dotted bg lines && 2623 p1 = (cx- Math.round(radius * Math.cos(rotate_angle))) +' ' + (h - cy - Math.round((radius) * Math.sin(rotate_angle))); 2624 p2 = (cx- Math.round(radius * Math.cos(prev_angle))) +' ' + (h - cy - Math.round((radius) * Math.sin(prev_angle))); 2625 2626 var dashed_line = drawline(p1, p2, style_attr, true); 2627 canvas.appendChild(dashed_line); 2628 radius-=decrement; 2629 } 2630 } 2631 }, 2632 dimmedPie: function(index, len, height, c_x, c_y, a, tweak_a){ 2633 var before = 0, after = 0; 2634 var dimmed_pie = document.createElement('v:shape'); 2635 before = (index == 0) ? len-1 : index-1; 2636 after = (index==len) ? 0 : index + 1; 2637 var gray_pie_path = 'M '+ c_x + ' ' + c_y + 2638 ' L ' + (c_x- Math.round(CONST_MAX_RADIUS * Math.cos((a * before) + tweak_a))) + ' ' + (height - c_y - Math.round((CONST_MAX_RADIUS) * Math.sin((a * before) + tweak_a))) + 2639 ' L ' + (c_x- Math.round(CONST_MAX_RADIUS * Math.cos((a * index) + tweak_a))) + ' ' + (height - c_y - Math.round((CONST_MAX_RADIUS) * Math.sin((a * index) + tweak_a))) + 2640 ' L ' + (c_x- Math.round(CONST_MAX_RADIUS * Math.cos((a * after) + tweak_a))) + ' ' + (height - c_y - Math.round((CONST_MAX_RADIUS) * Math.sin((a * after) + tweak_a))) + 2641 ' X E'; 2642 2643 var attributes = {'path': gray_pie_path, 'strokecolor':'#000000', 'strokeweight':'1px', 'fillcolor':'#000000'}; 2644 Nwagon_ie.setAttributes(dimmed_pie, attributes); 2645 return dimmed_pie; 2646 }, 2647 drawPolygonForeground: function(parentDiv, canvas, legend, data, h, w){ 2648 var style_attr = {'position':'absolute', 'width': canvas.style.width, 'height': canvas.style.height, 'filter': ''}; 2649 var cx = Math.round(w/2), cy = Math.round(h/2); 2650 var dataGroup = data['values']; 2651 var title = data['title']; 2652 var fg_color = data['fgColor'] ? data['fgColor'] : '#30A1CE'; 2653 var istooltipNeeded = (dataGroup.length == 1); 2654 var names = legend['names']; 2655 2656 var radius = 0; 2657 var path = ''; 2658 var ul = document.getElementById(parentDiv).getElementsByTagName('ul')[0]; 2659 if(ul){ 2660 ul.innerHTML = title; 2661 } 2662 if(istooltipNeeded){ 2663 var tooltip = Nwagon_ie.createTooltip(canvas); 2664 } 2665 for(var i = 0; i<dataGroup.length; i++){ 2666 if(ul) 2667 { 2668 var textEl = document.createElement('li'); 2669 textEl.innerHTML = 'Data set number ' + (i+1).toString(); 2670 var innerUL = document.createElement('ul'); 2671 textEl.appendChild(innerUL); 2672 ul.appendChild(textEl); 2673 } 2674 var dataset = dataGroup[i]; 2675 var length = dataset.length; 2676 var coordinate = []; 2677 var angle = (Math.PI*2)/length; 2678 var tweak_angle = Math.PI, point_angle=0; 2679 var p=''; 2680 2681 for (var k = 0; k<dataset.length; k++){ 2682 if(typeof(dataset[k]) != 'number'){ 2683 radius = 0; 2684 var gray_pie = Nwagon_ie.radar.dimmedPie(k, dataset.length, h, cx, cy, angle, tweak_angle); 2685 style_attr.filter = 'alpha(opacity=10)'; 2686 Nwagon_ie.setStyles(gray_pie, style_attr); 2687 canvas.appendChild(gray_pie); 2688 } 2689 else{ 2690 radius = dataset[k]; 2691 } 2692 if(innerUL){ 2693 var innerLI = document.createElement('li'); 2694 innerLI.innerHTML = names[k] + ': ' + dataset[k]; 2695 innerUL.appendChild(innerLI); 2696 } 2697 point_angle = (angle * k) + tweak_angle; 2698 if(k==0){ 2699 p +='M ' + (cx- Math.round(radius * Math.cos(point_angle))) +' ' + (h - cy - Math.round((radius) * Math.sin(point_angle))); 2700 } 2701 else{ 2702 p +=' L ' + (cx- Math.round(radius * Math.cos(point_angle))) +' ' + (h - cy - Math.round((radius) * Math.sin(point_angle))); 2703 } 2704 //draw vertex 2705 var vertex = Nwagon_ie.drawVertex(cx- Math.round(radius * Math.cos(point_angle)), (h - cy - Math.round((radius) * Math.sin(point_angle))), fg_color) ;
2706 text_to_add = names[k] + ': ' + dataset[k]; 2707 if(istooltipNeeded){ 2708 vertex.onmouseover = Nwagon_ie.showToolTip(tooltip, cx- Math.round(radius * Math.cos(point_angle)), (h - cy - Math.round((radius) * Math.sin(point_angle))), text_to_add); 2709 vertex.onmouseout = Nwagon_ie.hideToolTip(tooltip); 2710 } 2711 canvas.appendChild(vertex); 2712 } 2713 p+=' X E'; 2714 2715 var line = document.createElement('v:shape'); 2716 var attributes = {'path': p, 'strokecolor':fg_color, 'strokeweight':'1px', 'fillcolor':fg_color}; 2717 Nwagon_ie.setAttributes(line, attributes); 2718 style_attr.filter = 'alpha(opacity=80)'; 2719 Nwagon_ie.setStyles(line, style_attr); 2720 canvas.appendChild(line); 2721 } 2722 } 2723 } 2724}; 2725
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.