1// Name: AreaChart.AreaChart.debug.js 2// Assembly: AjaxControlToolkit 3// Version: 4.1.7.1213 4// FileVersion: 4.1.7.1213 5Type.registerNamespace("Sys.Extended.UI"); 6 7Sys.Extended.UI.AreaChart = function (element) { 8 Sys.Extended.UI.AreaChart.initializeBase(this, [element]); 9 var id = this.get_id(); 10 id = id.replace("_ctl00", ""); 11 this._parentDiv = document.getElementById(id + "__ParentDiv"); 12 13 this._chartWidth = '300'; 14 this._chartHeight = '300'; 15 this._chartTitle = ''; 16 this._categoriesAxis = ''; 17 this._series = null; 18 this._chartType = Sys.Extended.UI.AreaChartType.Basic; 19 this._theme = 'AreaChart'; 20 this._valueAxisLines = 9; 21 this._chartTitleColor = ''; 22 this._valueAxisLineColor = ''; 23 this._categoryAxisLineColor = ''; 24 this._baseLineColor = ''; 25 26 this.yMax = 0; 27 this.yMin = 0; 28 this.roundedTickRange = 0; 29 this.startX = 0; 30 this.startY = 0; 31 this.endX = 0; 32 this.endY = 0; 33 this.xInterval = 0; 34 this.yInterval = 0; 35 this.arrXAxis; 36 this.arrXAxisLength = 0; 37 this.charLength = 3.5; 38 this.arrCombinedData = null; 39} 40 41Sys.Extended.UI.AreaChart.prototype = { 42 43 initialize: function () { 44 Sys.Extended.UI.AreaChart.callBaseMethod(this, "initialize"); 45 46 if (!document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image", "1.1")) { 47 throw 'Current version of browser does not support SVG.' 48 } 49 50 if (this._valueAxisLines == 0) { 51 this._valueAxisLines = 9; 52 } 53 54 this.generateAreaChart(); 55 }, 56 57 dispose: function () { 58 Sys.Extended.UI.AreaChart.callBaseMethod(this, "dispose"); 59 }, 60 61 generateAreaChart: function () { 62 this.arrXAxis = this._categoriesAxis.split(','); 63 this.arrXAxisLength = this.arrXAxis.length; 64 65 this.calculateMinMaxValues(); 66 this.calculateInterval(); 67 this.calculateValueAxis(); 68 69 var svgContents = this.initializeSVG(); 70 svgContents = svgContents + String.format('<text x="{0}" y="{1}" id="ChartTitle" style="fill:{3}">{2}</text>', parseInt(this._chartWidth) / 2 - (this._chartTitle.length * this.charLength), parseInt(this._chartHeight) * 5 / 100, this._chartTitle, this._chartTitleColor); 71 72 svgContents = svgContents + this.drawBackgroundHorizontalLines(); 73 svgContents = svgContents + this.drawBackgroundVerticalLines(); 74 svgContents = svgContents + this.drawBaseLines(); 75 svgContents = svgContents + this.drawLegendArea(); 76 svgContents = svgContents + this.drawAxisValues(); 77 this._parentDiv.innerHTML = svgContents; 78 this.drawAreas(); 79 }, 80 81 calculateInterval: function () { 82 this.startX = (this._chartWidth * 10 / 100) + 0.5; 83 this.endX = parseInt(this._chartWidth) - 4.5; 84 85 if (this.yMin >= 0) 86 this.startY = Math.round(parseInt(this._chartHeight) - (parseInt(this._chartHeight) * 24 / 100)) + 0.5; 87 else 88 this.startY = Math.round(parseInt(this._chartHeight) - (parseInt(this._chartHeight) * 12 / 100)) / 2 + 0.5; 89 90 this.yInterval = this.startY / (this._valueAxisLines + 1); 91 }, 92 93 calculateMinMaxValues: function () { 94 var seriesMax; 95 var seriesMin; 96 var arrData; 97 if (this._chartType == Sys.Extended.UI.AreaChartType.Basic) { 98 for (var i = 0; i < this._series.length; i++) { 99 arrData = this._series[i].Data; 100 seriesMax = Math.max.apply(null, arrData); 101 seriesMin = Math.min.apply(null, arrData); 102 if (i == 0) { 103 this.yMax = seriesMax; 104 this.yMin = seriesMin; 105 } 106 else { 107 if (seriesMax > this.yMax) 108 this.yMax = seriesMax; 109 if (seriesMin < this.yMin) 110 this.yMin = seriesMin; 111 } 112 } 113 } 114 else { 115 for (var i = 0; i < this._series.length; i++) { 116 arrData = new Array(); 117 for (var j = 0; j < this._series[i].Data.length; j++) { 118 arrData[j] = this._series[i].Data[j]; 119 } 120 if (this.arrCombinedData == null) 121 this.arrCombinedData = arrData; 122 else { 123 for (j = 0; j < arrData.length; j++) { 124 this.arrCombinedData[j] = parseFloat(this.arrCombinedData[j]) + parseFloat(arrData[j]); 125 } 126 } 127 } 128 129 for (var i = 0; i < this._series.length; i++) { 130 seriesMin = Math.min.apply(null, this._series[i].Data); 131 if (i == 0) { 132 this.yMin = seriesMin; 133 } 134 else { 135 if (seriesMin < this.yMin) 136 this.yMin = seriesMin; 137 } 138 } 139 140 this.yMax = Math.max.apply(null, this.arrCombinedData); 141 } 142 143 if (this.yMin < 0) { 144 this._valueAxisLines = Math.round(this._valueAxisLines / 2); 145 } 146 }, 147 148 calculateValueAxis: function () { 149 var range; 150 var unroundedTickSize; 151 var x; 152 var pow10x; 153 154 if (this.yMin >= 0) { 155 range = this.yMax; 156 } 157 else { 158 range = this.yMax > Math.abs(this.yMin) ? this.yMax : Math.abs(this.yMin); 159 } 160 161 unroundedTickSize = range / (this._valueAxisLines - 1); 162 if (unroundedTickSize < 1) { 163 this.roundedTickRange = unroundedTickSize.toFixed(1); 164 } 165 else { 166 x = Math.ceil((Math.log(unroundedTickSize) / Math.log(10))
166- 1); 167 pow10x = Math.pow(10, x); 168 this.roundedTickRange = Math.ceil(unroundedTickSize / pow10x) * pow10x; 169 } 170 this.startX = this.startX + (this.roundedTickRange * 10 * this._valueAxisLines / 10).toString().length * this.charLength; 171 }, 172 173 drawBackgroundHorizontalLines: function () { 174 var horizontalLineContents = ''; 175 for (var i = 1; i <= this._valueAxisLines; i++) { 176 horizontalLineContents = horizontalLineContents + String.format('<path d="M{0} {2} {1} {2}" id="HorizontalLine" style="stroke:{3}"></path>', this.startX, this.endX, this.startY - (this.yInterval * i), this._categoryAxisLineColor); 177 } 178 179 if (this.yMin < 0) { 180 for (var i = 1; i <= this._valueAxisLines; i++) { 181 horizontalLineContents = horizontalLineContents + String.format('<path d="M{0} {2} {1} {2}" id="HorizontalLine" style="stroke:{3}"></path>', this.startX, this.endX, this.startY + (this.yInterval * i), this._categoryAxisLineColor); 182 } 183 } 184 return horizontalLineContents; 185 }, 186 187 drawBackgroundVerticalLines: function () { 188 var verticalLineContents = ''; 189 this.xInterval = Math.round((parseInt(this._chartWidth) - this.startX) / this.arrXAxisLength); 190 191 for (var i = 0; i < this.arrXAxisLength; i++) { 192 verticalLineContents = verticalLineContents + String.format('<path id="VerticalLine" d="M{0} {1} {0} {2}" style="stroke:{3}"></path>', ((parseInt(this._chartWidth) - 5) - (this.xInterval * i)), (this.startY - (this.yInterval * this._valueAxisLines)), this.startY, this._valueAxisLineColor); 193 } 194 195 if (this.yMin < 0) { 196 for (var i = 0; i < this.arrXAxisLength; i++) { 197 verticalLineContents = verticalLineContents + String.format('<path id="VerticalLine" d="M{0} {1} {0} {2}" style="stroke:{3}"></path>', ((parseInt(this._chartWidth) - 5) - (this.xInterval * i)), (this.startY + (this.yInterval * this._valueAxisLines)), this.startY, this._valueAxisLineColor); 198 } 199 } 200 return verticalLineContents; 201 }, 202 203 drawBaseLines: function () { 204 var baseLineContents = ''; 205 206 baseLineContents = baseLineContents + String.format('<path d="M{0} {1} {2} {1}" id="BaseLine" style="stroke:{3}"></path>', this.startX, this.startY, this.endX, this._baseLineColor); 207 baseLineContents = baseLineContents + String.format('<path d="M{0} {1} {0} {2}" id="BaseLine" style="stroke:{3}"></path>', this.startX, (this.startY - (this.yInterval * this._valueAxisLines)), this.startY, this._baseLineColor); 208 baseLineContents = baseLineContents + String.format('<path d="M{0} {1} {0} {2}" id="BaseLine" style="stroke:{3}"></path>', this.startX, this.startY, this.startY + 4, this._baseLineColor); 209 210 for (var i = 0; i < this.arrXAxisLength; i++) { 211 baseLineContents = baseLineContents + String.format('<path d="M{0} {1} {0} {2}" id="BaseLine" style="stroke:{3}"></path>', ((parseInt(this._chartWidth) - 5) - (this.xInterval * i)), this.startY, this.startY + 4, this._baseLineColor); 212 } 213 214 for (var i = 0; i <= this._valueAxisLines; i++) { 215 baseLineContents = baseLineContents + String.format('<path d="M{0} {2} {1} {2}" id="BaseLine" style="stroke:{3}"></path>', this.startX - 4, this.startX, this.startY - (this.yInterval * i), this._baseLineColor); 216 } 217 218 if (this.yMin < 0) { 219 baseLineContents = baseLineContents + String.format('<path d="M{0} {1} {0} {2}" id="BaseLine" style="stroke:{3}"></path>', this.startX, (this.startY + (this.yInterval * this._valueAxisLines)), this.startY, this._baseLineColor); 220 for (var i = 1; i <= this._valueAxisLines; i++) { 221 baseLineContents = baseLineContents + String.format('<path d="M{0} {2} {1} {2}" id="BaseLine" style="stroke:{3}"></path>', this.startX - 4, this.startX, this.startY + (this.yInterval * i), this._baseLineColor); 222 } 223 } 224 return baseLineContents; 225 }, 226 227 drawLegendArea: function () { 228 var legendContents = '';
229 var legendAreaStartHeight = (parseInt(this._chartHeight) * 82 / 100) + 5; 230 var legendBoxWidth = 7.5; 231 var legendBoxHeight = 7.5; 232 var spaceInLegendContents = 5; 233 234 var legendCharLength = 0; 235 for (var i = 0; i < this._series.length; i++) { 236 legendCharLength = legendCharLength + this._series[i].Name.length; 237 } 238 var legendAreaWidth = Math.round((legendCharLength * 5) / 2) + Math.round((legendBoxWidth + (spaceInLegendContents * 2)) * this._series.length); 239 var isLegendNextLine = false; 240 if (legendAreaWidth > parseInt(this._chartWidth) / 2) { 241 legendAreaWidth = legendAreaWidth / 2; 242 isLegendNextLine = true; 243 } 244 245 legendContents = legendContents + '<g>'; 246 legendContents = legendContents + String.format('<path d="M{0} {1} {2} {1} {2} {3} {0} {3} z" id="LegendArea" stroke=""></path>', parseInt(this._chartWidth) * 50 / 100 - (legendAreaWidth / 2), legendAreaStartHeight, Math.round(parseInt(this._chartWidth) * 50 / 100 + (legendCharLength * 5)) + Math.round((legendBoxWidth + (spaceInLegendContents * 2)) * this._series.length), Math.round(parseInt(this._chartHeight) * 97.5 / 100)); 247 248 var startText = parseInt(this._chartWidth) * 40 / 100 - (legendAreaWidth / 2) + legendBoxWidth + spaceInLegendContents; 249 var nextStartText = startText; 250 var startLegend = parseInt(this._chartWidth) * 40 / 100 - (legendAreaWidth / 2); 251 var nextStartLegend = startLegend; 252 253 for (var i = 0; i < this._series.length; i++) { 254 if (isLegendNextLine && i == Math.round(this._series.length / 2)) { 255 startText = parseInt(this._chartWidth) * 40 / 100 - (legendAreaWidth / 2) + legendBoxWidth + spaceInLegendContents; 256 nextStartText = startText; 257 startLegend = parseInt(this._chartWidth) * 40 / 100 - (legendAreaWidth / 2); 258 nextStartLegend = startLegend; 259 legendAreaStartHeight = (parseInt(this._chartHeight) * 89 / 100) + 5; 260 isLegendNextLine = false; 261 } 262 startLegend = nextStartLegend; 263 startText = nextStartText; 264 legendContents = legendContents + String.format('<path d="M{0} {1} {2} {1} {2} {3} {0} {3} z" id="Legend{4}" style="fill:{5}"></path>', startLegend, legendAreaStartHeight + legendBoxHeight, startLegend + legendBoxWidth, legendAreaStartHeight + 15, i + 1, this._series[i].AreaColor); 265 legendContents = legendContents + String.format('<text x="{0}" y="{1}" id="LegendText">{2}</text>', startText, legendAreaStartHeight + 15, this._series[i].Name); 266 if (this._series[i].Name.length > 10) { 267 nextStartLegend = startLegend + (this._series[i].Name.length * 5) + legendBoxWidth + (spaceInLegendContents * 2); 268 nextStartText = startText + (this._series[i].Name.length * 5) + legendBoxWidth + (spaceInLegendContents * 2); 269 } 270 else { 271 nextStartLegend = nextStartLegend + (this._series[i].Name.length * 6) + legendBoxWidth + (spaceInLegendContents * 2); 272 nextStartText = nextStartText + (this._series[i].Name.length * 6) + legendBoxWidth + (spaceInLegendContents * 2); 273 } 274 } 275 legendContents = legendContents + '</g>'; 276 return legendContents; 277 }, 278 279 drawAxisValues: function () { 280 var axisContents = ''; 281 var textLength = 0; 282 for (var i = 0; i < this.arrXAxisLength; i++) { 283 textLength = (this.arrXAxis[i].toString().length * 10 * i / 10).toString().length * 5.5; 284 axisContents = axisContents + String.format('<text id="SeriesAxis" x="{0}" y="{1}" fill-opacity="1">{2}</text>', Math.round(this.startX + (this.xInterval * 10 * i / 10) + (this.xInterval * 50 / 100) - textLength), this.startY + Math.round(this.yInterval * 65 / 100), this.arrXAxis[i]); 285 } 286 287 for (var i = 0; i <= this._valueAxisLines; i++) { 288 textLength = (this.roundedTickRange * 10 * i / 10).toString().length * 5.5; 289 axisContents = axisContents + String.format('<text id="ValueAxis" x="{0}" y="{1}">{2}</text>', this.startX - textLength -15, this.startY - (this.yInterval * 10 * i / 10) + 3.5, this.roundedTickRange * 10 * i / 10); 290 } 291 292 if (this.yMin < 0) { 293 for (var i = 1; i <= this._valueAxisLines; i++) { 294 textLength = (this.roundedTickRange * 10 * i / 10).toString().length * 5.5; 295 axisContents = axisContents + String.format('<text id="ValueAxis" x="{0}" y="{1}">-{2}</text>', this.startX - textLength - 19, this.startY + (this.yInterval * 10 * i / 10), this.roundedTickRange * 10 * i / 10); 296 } 297 } 298 299 return axisContents; 300 }, 301 302 initializeSVG: function () {
303 var svgContents = String.format('<?xml-stylesheet type="text/css" href="{0}.css"?>', this._theme); 304 svgContents = svgContents + String.format('<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="{0}" height="{1}" style="position: relative; display: block;">', this._chartWidth, this._chartHeight); 305 svgContents = svgContents + '<defs>'; 306 svgContents = svgContents + '<linearGradient gradientTransform="rotate(0)">'; 307 svgContents = svgContents + '<stop offset="0%" id="LinearGradient1"></stop>'; 308 svgContents = svgContents + '<stop offset="25%" id="LinearGradient2"></stop>'; 309 svgContents = svgContents + '<stop offset="100%" id="LinearGradient3"></stop></linearGradient>'; 310 svgContents = svgContents + '</defs>'; 311 312 svgContents = svgContents + String.format('<path fill="none" stroke-opacity="1" fill-opacity="1" stroke-linejoin="round" stroke-linecap="square" d="M5 {0} {1} {0} {1} {2} 5 {2} z"></path>', parseInt(this._chartHeight) * 1 / 10 + 5, parseInt(this._chartWidth) - 5, parseInt(this._chartHeight) - parseInt(this._chartHeight) * 1 / 10); 313 svgContents = svgContents + String.format('<path id="ChartBackGround" stroke="" d="M0 0 {0} 0 {0} {1} 0 {1} z"></path>', this._chartWidth, this._chartHeight); 314 svgContents = svgContents + String.format('<path fill="#ffffff" stroke-opacity="1" fill-opacity="0" stroke-linejoin="round" stroke-linecap="square" stroke="" d="M5 {0} {1} {0} {1} {2} 5 {2} z"></path>', parseInt(this._chartHeight) * 1 / 10 + 5, parseInt(this._chartWidth) - 5, parseInt(this._chartHeight) - parseInt(this._chartHeight) * 1 / 10); 315 316 return svgContents; 317 }, 318 319 drawAreas: function () { 320 var areaContents = ''; 321 var yVal = new Array(); 322 var lastStartX = new Array(); 323 var lastStartY = new Array(); 324 325 var areaPath = new Array(); 326 327 328 329 for (var i = 0; i < this.arrXAxisLength; i++) { 330 for (var j = 0; j < this._series.length; j++) { 331 yVal[j] = 0; 332 if (this._chartType == Sys.Extended.UI.AreaChartType.Stacked) { 333 for (var k = 0; k <= j; k++) { 334 yVal[j] = parseFloat(yVal[j]) + parseFloat(this._series[k].Data[i]); 335 } 336 } else { 337 yVal[j] = parseFloat(this._series[j].Data[i]); 338 } 339 340 if (i == 0) { 341 areaPath[j] = String.format('{0} {1} {0} {2} ', this.startX + (this.xInterval / 2), this.startY, this.startY - Math.round(yVal[j] * (this.yInterval / this.roundedTickRange))); 342 } 343 else if (i == this.arrXAxisLength - 1) { 344 areaPath[j] = areaPath[j] + String.format('{0} {1} {2} {3} {2} {4} ', lastStartX[j], lastStartY[j], this.startX + (this.xInterval * i) + (this.xInterval / 2), this.startY - Math.round(yVal[j] * (this.yInterval / this.roundedTickRange)), this.startY); 345 } 346 else { 347 areaPath[j] = areaPath[j] + String.format('{0} {1} ', this.startX + (this.xInterval * i) + (this.xInterval / 2), this.startY - Math.round(yVal[j] * (this.yInterval / this.roundedTickRange))); 348 } 349 350 if (yVal[j] > 0) 351 areaContents = areaContents + String.format('<text id="LegendText" x="{0}" y="{1}">{2}</text>', this.startX + (this.xInterval * i) + (this.xInterval * 50 / 100) - yVal[j].toString().length * this.charLength, this.startY - Math.round(yVal[j] * (this.yInterval / this.roundedTickRange)) - 7.5, yVal[j]); 352 else 353 areaContents = areaContents + String.format('<text id="LegendText" x="{0}" y="{1}">{2}</text>', this.startX + (this.xInterval * i) + (this.xInterval * 50 / 100) - yVal[j].toString().length * this.charLength, this.startY - Math.round(yVal[j] * (this.yInterval / this.roundedTickRange)) + 7.5, yVal[j]); 354 355 lastStartX[j] = this.startX + (this.xInterval * i) + (this.xInterval / 2); 356 lastStartY[j] = this.startY - Math.round(yVal[j] * (this.yInterval / this.roundedTickRange)); 357 } 358 } 359 this._parentDiv.innerHTML = this._parentDiv.innerHTML + areaContents; 360 var svgContentsBeforeAnimation = this._parentDiv.innerHTML; 361 this.drawArea(this, areaPath, 0); 362 363 }, 364 365 drawArea: function (me, areaPath, seriesIndex) { 366 me._parentDiv.innerHTML = me._parentDiv.innerHTML.replace('</svg>', '') + String.format('<g><path id="AreaPath{1}" d="M{0} z" style="fill:{2};stroke:{2}"></path></g></svg>', areaPath[seriesIndex], seriesIndex + 1, me._series[seriesIndex].AreaColor); 367 368 seriesIndex++; 369 if (seriesIndex < me._series.length) { 370 setTimeout(function () { 371 me.drawArea(me, areaPath, seriesIndex); 372 }, 400); 373 } 374 }, 375 376 377 378 379 380 381 382 383 get_chartWidth: function () { 384 return this._chartWidth; 385 }, 386 set_chartWidth: function (value) { 387 this._chartWidth = value; 388 }, 389
390 get_chartHeight: function () { 391 return this._chartHeight; 392 }, 393 set_chartHeight: function (value) { 394 this._chartHeight = value; 395 }, 396 397 get_chartTitle: function () { 398 return this._chartTitle; 399 }, 400 set_chartTitle: function (value) { 401 this._chartTitle = value; 402 }, 403 404 get_categoriesAxis: function () { 405 return this._categoriesAxis; 406 }, 407 set_categoriesAxis: function (value) { 408 this._categoriesAxis = value; 409 }, 410 411 get_ClientSeries: function () { 412 return this._series; 413 }, 414 set_ClientSeries: function (value) { 415 this._series = value; 416 }, 417 418 get_chartType: function () { 419 return this._chartType; 420 }, 421 set_chartType: function (value) { 422 this._chartType = value; 423 }, 424 425 get_theme: function () { 426 return this._theme; 427 }, 428 set_theme: function (value) { 429 this._theme = value; 430 }, 431 432 get_valueAxisLines: function () { 433 return this._valueAxisLines; 434 }, 435 set_valueAxisLines: function (value) { 436 this._valueAxisLines = value; 437 }, 438 439 get_chartTitleColor: function () { 440 return this._chartTitleColor; 441 }, 442 set_chartTitleColor: function (value) { 443 this._chartTitleColor = value; 444 }, 445 446 get_valueAxisLineColor: function () { 447 return this._valueAxisLineColor; 448 }, 449 set_valueAxisLineColor: function (value) { 450 this._valueAxisLineColor = value; 451 }, 452 453 get_categoryAxisLineColor: function () { 454 return this._categoryAxisLineColor; 455 }, 456 set_categoryAxisLineColor: function (value) { 457 this._categoryAxisLineColor = value; 458 }, 459 460 get_baseLineColor: function () { 461 return this._baseLineColor; 462 }, 463 set_baseLineColor: function (value) { 464 this._baseLineColor = value; 465 } 466}; 467 468Sys.Extended.UI.AreaChart.registerClass("Sys.Extended.UI.AreaChart", Sys.Extended.UI.ControlBase); 469Sys.registerComponent(Sys.Extended.UI.AreaChart, { name: 'AreaChart', parameters: [{ name: 'ClientSeries', type: 'AreaChartSeries[]'}] }); 470 471Sys.Extended.UI.AreaChartType = function () { 472 /// <summary> 473 /// Type of Area Chart 474 /// </summary> 475 /// <field name="Basic" type="Number" integer="true" /> 476 /// <field name="Stacked" type="Number" integer="true" /> 477 throw Error.invalidOperation(); 478} 479Sys.Extended.UI.AreaChartType.prototype = { 480 Basic: 0, 481 Stacked: 1 482} 483 484Sys.Extended.UI.AreaChartType.registerEnum("Sys.Extended.UI.AreaChartType", false);
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.