| OLD | NEW |
| (Empty) |
| 1 <!doctype html> | |
| 2 | |
| 3 | |
| 4 | |
| 5 | |
| 6 <!--[if lte IE 8]><SCRIPT src='source/excanvas.js'></script><![endif]--><SCRIPT
src='ChartNew.js'></script> | |
| 7 | |
| 8 | |
| 9 <SCRIPT> | |
| 10 | |
| 11 defCanvasWidth=1200; | |
| 12 defCanvasHeight=600; | |
| 13 | |
| 14 var radarChartData = { | |
| 15 labels : ["Concentration","Flexibility","Dedication","Designing","Coding
","Organizing","TeamWork"], | |
| 16 datasets : [ | |
| 17 | |
| 18 { | |
| 19 fillColor : "rgba(17, 163, 71, 0.8)", | |
| 20 strokeColor : "rgba(151,187,205,1)", | |
| 21 pointColor : "rgba(151,187,205,1)", | |
| 22 pointStrokeColor : "#fff", | |
| 23 data : [58,58,100,59,66,67,84] | |
| 24 } | |
| 25 ] | |
| 26 | |
| 27 } | |
| 28 var optionschart = { | |
| 29 scaleOverlay : false, | |
| 30 scaleOverride : true, | |
| 31 scaleSteps : 25, | |
| 32 scaleStepWidth : 4, | |
| 33 scaleStartValue : 0, | |
| 34 annotateDisplay : true, | |
| 35 savePng : true | |
| 36 // scaleShowLabels : true, | |
| 37 } | |
| 38 | |
| 39 var mydata1 = { | |
| 40 labels : ["January","February","March","April","May","June","July"], | |
| 41 datasets : [ | |
| 42 { | |
| 43 fillColor : "rgba(220,220,220,0.5)", | |
| 44 strokeColor : "rgba(220,220,220,1)", | |
| 45 pointColor : "rgba(220,220,220,1)", | |
| 46 pointStrokeColor : "#fff", | |
| 47 data : [0.65,0.59,0.90,0.81,0.56,0.55,0.40], | |
| 48 title : "pFirst data" | |
| 49 }, | |
| 50 { | |
| 51 fillColor : "rgba(151,187,205,0.5)", | |
| 52 strokeColor : "rgba(151,187,205,1)", | |
| 53 pointColor : "rgba(151,187,205,1)", | |
| 54 pointStrokeColor : "#fff", | |
| 55 data : [0.28,0.48,0.40,0.19,0.96,0.27,1.00], | |
| 56 title : "pSecond data" | |
| 57 } | |
| 58 ] | |
| 59 } | |
| 60 | |
| 61 | |
| 62 var mydata2 = [ | |
| 63 { | |
| 64 value : 30, | |
| 65 color: "#D97041", | |
| 66 title : "data1" | |
| 67 }, | |
| 68 { | |
| 69 value : 90, | |
| 70 color: "#C7604C", | |
| 71 title : "data2" | |
| 72 }, | |
| 73 { | |
| 74 value : 24, | |
| 75 color: "#21323D", | |
| 76 title : "data3" | |
| 77 }, | |
| 78 { | |
| 79 value : 58, | |
| 80 color: "#9D9B7F", | |
| 81 title : "data4" | |
| 82 }, | |
| 83 { | |
| 84 value : 82, | |
| 85 color: "#7D4F6D", | |
| 86 title : "data5" | |
| 87 }, | |
| 88 { | |
| 89 value : 8, | |
| 90 color: "#584A5E", | |
| 91 title : "data6" | |
| 92 } | |
| 93 ] | |
| 94 | |
| 95 | |
| 96 var mydata3 = [ | |
| 97 { | |
| 98 value : 70, | |
| 99 color: "rgba(151,187,205,1)", | |
| 100 title : "data1" | |
| 101 } | |
| 102 ] | |
| 103 | |
| 104 var mydata4 = [ | |
| 105 { | |
| 106 value : 70, | |
| 107 color: "rgba(151,187,205,1)", | |
| 108 title : "data1" | |
| 109 }, | |
| 110 { | |
| 111 value : 30, | |
| 112 color: "rgba(220,220,220,1)", | |
| 113 title : "data1" | |
| 114 } | |
| 115 ] | |
| 116 | |
| 117 var mydatan1 = { | |
| 118 labels : ["January","February","March","April","May","June","July"], | |
| 119 datasets : [ | |
| 120 { | |
| 121 fillColor : "rgba(220,220,220,0.5)", | |
| 122 strokeColor : "rgba(220,220,220,1)", | |
| 123 pointColor : "rgba(220,220,220,1)", | |
| 124 pointStrokeColor : "#fff", | |
| 125 data : [-65,-59,-90,-81,-56,-55,-40], | |
| 126 title : "First data" | |
| 127 }, | |
| 128 { | |
| 129 fillColor : "rgba(151,187,205,0.5)", | |
| 130 strokeColor : "rgba(151,187,205,1)", | |
| 131 pointColor : "rgba(151,187,205,1)", | |
| 132 pointStrokeColor : "#fff", | |
| 133 data : [-28,-48,-40,-19,-96,-27,-100], | |
| 134 title : "Second data" | |
| 135 } | |
| 136 ] | |
| 137 } | |
| 138 | |
| 139 var mydatan1b = { | |
| 140 labels : ["January","February","March","April","May","June","July"], | |
| 141 datasets : [ | |
| 142 { | |
| 143 fillColor : "rgba(220,220,220,0.5)", | |
| 144 strokeColor : "rgba(220,220,220,1)", | |
| 145 pointColor : "rgba(220,220,220,1)", | |
| 146 pointStrokeColor : "#fff", | |
| 147 data : [-565,-559,-590,-581,-556,-555,-540], | |
| 148 title : "First data" | |
| 149 }, | |
| 150 { | |
| 151 fillColor : "rgba(151,187,205,0.5)", | |
| 152 strokeColor : "rgba(151,187,205,1)", | |
| 153 pointColor : "rgba(151,187,205,1)", | |
| 154 pointStrokeColor : "#fff", | |
| 155 data : [-528,-548,-540,-519,-596,-527,-580], | |
| 156 title : "Second data" | |
| 157 } | |
| 158 ] | |
| 159 } | |
| 160 | |
| 161 var mydatam1 = { | |
| 162 labels : ["January","February","March","April","May","June","July"], | |
| 163 datasets : [ | |
| 164 { | |
| 165 fillColor : "rgba(220,220,220,0.5)", | |
| 166 strokeColor : "rgba(220,220,220,1)", | |
| 167 pointColor : "rgba(220,220,220,1)", | |
| 168 pointStrokeColor : "#fff", | |
| 169 data : [65,-59,90,-81,-56,55,40], | |
| 170 title : "First data" | |
| 171 }, | |
| 172 { | |
| 173 fillColor : "rgba(151,187,205,0.5)", | |
| 174 strokeColor : "rgba(151,187,205,1)", | |
| 175 pointColor : "rgba(151,187,205,1)", | |
| 176 pointStrokeColor : "#fff", | |
| 177 data : [-28,-48,40,19,-96,27,-80], | |
| 178 title : "Second data" | |
| 179 } | |
| 180 ] | |
| 181 } | |
| 182 | |
| 183 var mydata1b = { | |
| 184 labels : ["January","February","March","April","May","June","July"], | |
| 185 datasets : [ | |
| 186 { | |
| 187 fillColor : "rgba(220,220,220,0.5)", | |
| 188 strokeColor : "rgba(220,220,220,1)", | |
| 189 pointColor : "rgba(220,220,220,1)", | |
| 190 pointStrokeColor : "#fff", | |
| 191 data : [565,559,590,581,556,555,540], | |
| 192 title : "First data" | |
| 193 }, | |
| 194 { | |
| 195 fillColor : "rgba(151,187,205,0.5)", | |
| 196 strokeColor : "rgba(151,187,205,1)", | |
| 197 pointColor : "rgba(151,187,205,1)", | |
| 198 pointStrokeColor : "#fff", | |
| 199 data : [528,548,540,519,596,527,580], | |
| 200 title : "Second data" | |
| 201 } | |
| 202 ] | |
| 203 } | |
| 204 | |
| 205 var mydatan2 = [ | |
| 206 { | |
| 207 value : -30, | |
| 208 color: "#D97041", | |
| 209 title : "data1" | |
| 210 }, | |
| 211 { | |
| 212 value : -90, | |
| 213 color: "#C7604C", | |
| 214 title : "data2" | |
| 215 }, | |
| 216 { | |
| 217 value : -24, | |
| 218 color: "#21323D", | |
| 219 title : "data3" | |
| 220 }, | |
| 221 { | |
| 222 value : -58, | |
| 223 color: "#9D9B7F", | |
| 224 title : "data4" | |
| 225 }, | |
| 226 { | |
| 227 value : -82, | |
| 228 color: "#7D4F6D", | |
| 229 title : "data5" | |
| 230 }, | |
| 231 { | |
| 232 value : -8, | |
| 233 color: "#584A5E", | |
| 234 title : "data6" | |
| 235 } | |
| 236 ] | |
| 237 | |
| 238 | |
| 239 var mydatan3 = [ | |
| 240 { | |
| 241 value : -70, | |
| 242 color: "rgba(151,187,205,1)", | |
| 243 title : "data1" | |
| 244 } | |
| 245 ] | |
| 246 | |
| 247 var mydatan4 = [ | |
| 248 { | |
| 249 value : -70, | |
| 250 color: "rgba(151,187,205,1)", | |
| 251 title : "data1" | |
| 252 }, | |
| 253 { | |
| 254 value : -30, | |
| 255 color: "rgba(220,220,220,1)", | |
| 256 title : "data1" | |
| 257 } | |
| 258 ] | |
| 259 | |
| 260 var mydatam2 = [ | |
| 261 { | |
| 262 value : -30, | |
| 263 color: "#D97041", | |
| 264 title : "data1" | |
| 265 }, | |
| 266 { | |
| 267 value : 90, | |
| 268 color: "#C7604C", | |
| 269 title : "data2" | |
| 270 }, | |
| 271 { | |
| 272 value : -24, | |
| 273 color: "#21323D", | |
| 274 title : "data3" | |
| 275 }, | |
| 276 { | |
| 277 value : 58, | |
| 278 color: "#9D9B7F", | |
| 279 title : "data4" | |
| 280 }, | |
| 281 { | |
| 282 value : -82, | |
| 283 color: "#7D4F6D", | |
| 284 title : "data5" | |
| 285 }, | |
| 286 { | |
| 287 value : -8, | |
| 288 color: "#584A5E", | |
| 289 title : "data6" | |
| 290 } | |
| 291 ] | |
| 292 | |
| 293 | |
| 294 var mydatam3 = [ | |
| 295 { | |
| 296 value : -70, | |
| 297 color: "rgba(151,187,205,1)", | |
| 298 title : "data1" | |
| 299 } | |
| 300 ] | |
| 301 | |
| 302 var mydatam4 = [ | |
| 303 { | |
| 304 value : -70, | |
| 305 color: "rgba(151,187,205,1)", | |
| 306 title : "data1" | |
| 307 }, | |
| 308 { | |
| 309 value : 30, | |
| 310 color: "rgba(220,220,220,1)", | |
| 311 title : "data1" | |
| 312 } | |
| 313 ] | |
| 314 | |
| 315 | |
| 316 var allopts = { | |
| 317 //Boolean - If we show the scale above the chart data -> Default val
ue Changed | |
| 318 scaleOverlay : true, | |
| 319 //Boolean - If we want to override with a hard coded scale | |
| 320 scaleOverride : false, | |
| 321 //** Required if scaleOverride is true ** | |
| 322 //Number - The number of steps in a hard coded scale | |
| 323 scaleSteps : null, | |
| 324 //Number - The value jump in the hard coded scale | |
| 325 scaleStepWidth : null, | |
| 326 //Number - The scale starting value | |
| 327 scaleStartValue : null, | |
| 328 //String - Colour of the scale line | |
| 329 scaleLineColor : "rgba(0,0,0,.1)", | |
| 330 //Number - Pixel width of the scale line | |
| 331 scaleLineWidth : 1, | |
| 332 //Boolean - Whether to show labels on the scale | |
| 333 scaleShowLabels : true, | |
| 334 //Interpolated JS string - can access value | |
| 335 scaleLabel : "<%=value%>", | |
| 336 //String - Scale label font declaration for the scale label | |
| 337 scaleFontFamily : "'Arial'", | |
| 338 //Number - Scale label font size in pixels | |
| 339 scaleFontSize : 12, | |
| 340 //String - Scale label font weight style | |
| 341 scaleFontStyle : "normal", | |
| 342 //String - Scale label font colour | |
| 343 scaleFontColor : "#666", | |
| 344 ///Boolean - Whether grid lines are shown across the chart | |
| 345 scaleShowGridLines : true, | |
| 346 //String - Colour of the grid lines | |
| 347 scaleGridLineColor : "rgba(0,0,0,.05)", | |
| 348 //Number - Width of the grid lines | |
| 349 scaleGridLineWidth : 1, | |
| 350 //Boolean - Whether the line is curved between points -> Default value C
hanged | |
| 351 bezierCurve : false, | |
| 352 //Boolean - Whether to show a dot for each point -> Default value Change
d | |
| 353 pointDot : false, | |
| 354 //Number - Radius of each point dot in pixels | |
| 355 pointDotRadius : 3, | |
| 356 //Number - Pixel width of point dot stroke | |
| 357 pointDotStrokeWidth : 1, | |
| 358 //Boolean - Whether to show a stroke for datasets | |
| 359 datasetStroke : true, | |
| 360 //Number - Pixel width of dataset stroke | |
| 361 datasetStrokeWidth : 2, | |
| 362 //Boolean - Whether to fill the dataset with a colour | |
| 363 datasetFill : true, | |
| 364 //Boolean - Whether to animate the chart -> Default value ch
anged | |
| 365 animation : false, | |
| 366 //Number - Number of animation steps | |
| 367 animationSteps : 60, | |
| 368 //String - Animation easing effect | |
| 369 animationEasing : "easeOutQuart", | |
| 370 //Function - Fires when the animation is complete | |
| 371 onAnimationComplete : null, | |
| 372 canvasBorders : true, | |
| 373 canvasBordersWidth : 30, | |
| 374 canvasBordersColor : "black", | |
| 375 yAxisLeft : true, | |
| 376 yAxisRight : true, | |
| 377 yAxisLabel : "Y axis", | |
| 378 yAxisFontFamily : "'Arial'", | |
| 379 yAxisFontSize : 50, | |
| 380 yAxisFontStyle : "normal", | |
| 381 yAxisFontColor : "#666", | |
| 382 xAxisLabel : "", | |
| 383 xAxisFontFamily : "'Arial'", | |
| 384 xAxisFontSize : 16, | |
| 385 xAxisFontStyle : "normal", | |
| 386 xAxisFontColor : "#666", | |
| 387 yAxisUnit : "UNIT", | |
| 388 yAxisUnitFontFamily : "'Arial'", | |
| 389 yAxisUnitFontSize : 12, | |
| 390 yAxisUnitFontStyle : "normal", | |
| 391 yAxisUnitFontColor : "#666", | |
| 392 graphTitle : "", | |
| 393 graphTitleFontFamily : "'Arial'", | |
| 394 graphTitleFontSize : 24, | |
| 395 graphTitleFontStyle : "bold", | |
| 396 graphTitleFontColor : "#666", | |
| 397 graphSubTitle : "", | |
| 398 graphSubTitleFontFamily : "'Arial'", | |
| 399 graphSubTitleFontSize : 18, | |
| 400 graphSubTitleFontStyle : "normal", | |
| 401 graphSubTitleFontColor : "#666", | |
| 402 footNote : "Footnote", | |
| 403 footNoteFontFamily : "'Arial'", | |
| 404 footNoteFontSize : 50, | |
| 405 footNoteFontStyle : "bold", | |
| 406 footNoteFontColor : "#666", | |
| 407 legend : true, | |
| 408 legendFontFamily : "'Arial'", | |
| 409 legendFontSize : 18, | |
| 410 legendFontStyle : "normal", | |
| 411 legendFontColor : "#666", | |
| 412 legendBlockSize : 30, | |
| 413 legendBorders : true, | |
| 414 legendBordersWidth : 30, | |
| 415 legendBordersColor : "#666", | |
| 416 // ADDED PARAMETERS | |
| 417 graphMin : "DEFAULT", | |
| 418 graphMax : "DEFAULT" | |
| 419 | |
| 420 } | |
| 421 | |
| 422 var noopts = { | |
| 423 nooptions : "", | |
| 424 yAxisRight : true, | |
| 425 scaleTickSizeLeft : 0, | |
| 426 scaleTickSizeRight : 0, | |
| 427 scaleTickSizeBottom : 0, | |
| 428 scaleTickSizeTop : 1 | |
| 429 | |
| 430 | |
| 431 } | |
| 432 | |
| 433 var onlyborderopts = { | |
| 434 canvasBorders : true, | |
| 435 canvasBordersWidth : 3, | |
| 436 canvasBordersColor : "black" | |
| 437 | |
| 438 } | |
| 439 | |
| 440 var nooptions = { } | |
| 441 | |
| 442 var newopts = { | |
| 443 inGraphDataShow : true, | |
| 444 datasetFill : true, | |
| 445 scaleLabel: "<%=value%>", | |
| 446 scaleTickSizeRight : 5, | |
| 447 scaleTickSizeLeft : 5, | |
| 448 scaleTickSizeBottom : 5, | |
| 449 scaleTickSizeTop : 5, | |
| 450 scaleFontSize : 16, | |
| 451 canvasBorders : true, | |
| 452 canvasBordersWidth : 3, | |
| 453 canvasBordersColor : "black", | |
| 454 graphTitle : "Graph Title", | |
| 455 graphTitleFontFamily : "'Arial'", | |
| 456 graphTitleFontSize : 24, | |
| 457 graphTitleFontStyle : "bold", | |
| 458 graphTitleFontColor : "#666", | |
| 459 graphSubTitle : "Graph Sub Title", | |
| 460 graphSubTitleFontFamily : "'Arial'", | |
| 461 graphSubTitleFontSize : 18, | |
| 462 graphSubTitleFontStyle : "normal", | |
| 463 graphSubTitleFontColor : "#666", | |
| 464 footNote : "Footnote for the graph", | |
| 465 footNoteFontFamily : "'Arial'", | |
| 466 footNoteFontSize : 8, | |
| 467 footNoteFontStyle : "bold", | |
| 468 footNoteFontColor : "#666", | |
| 469 legend : true, | |
| 470 legendFontFamily : "'Arial'", | |
| 471 legendFontSize : 12, | |
| 472 legendFontStyle : "normal", | |
| 473 legendFontColor : "#666", | |
| 474 legendBlockSize : 15, | |
| 475 legendBorders : true, | |
| 476 legendBordersWidth : 1, | |
| 477 legendBordersColors : "#666", | |
| 478 yAxisLeft : true, | |
| 479 yAxisRight : false, | |
| 480 xAxisBottom : true, | |
| 481 xAxisTop : false, | |
| 482 yAxisLabel : "Y Axis Label", | |
| 483 yAxisFontFamily : "'Arial'", | |
| 484 yAxisFontSize : 16, | |
| 485 yAxisFontStyle : "normal", | |
| 486 yAxisFontColor : "#666", | |
| 487 xAxisLabel : "pX Axis Label", | |
| 488 xAxisFontFamily : "'Arial'", | |
| 489 xAxisFontSize : 16, | |
| 490 xAxisFontStyle : "normal", | |
| 491 xAxisFontColor : "#666", | |
| 492 yAxisUnit : "Y Unit", | |
| 493 yAxisUnitFontFamily : "'Arial'", | |
| 494 yAxisUnitFontSize : 8, | |
| 495 yAxisUnitFontStyle : "normal", | |
| 496 yAxisUnitFontColor : "#666", | |
| 497 annotateDisplay : true, | |
| 498 spaceTop : 0, | |
| 499 spaceBottom : 0, | |
| 500 spaceLeft : 0, | |
| 501 spaceRight : 0, | |
| 502 logarithmic: false, | |
| 503 // showYAxisMin : false, | |
| 504 rotateLabels : "smart", | |
| 505 xAxisSpaceOver : 0, | |
| 506 xAxisSpaceUnder : 0, | |
| 507 xAxisLabelSpaceAfter : 0, | |
| 508 xAxisLabelSpaceBefore : 0, | |
| 509 legendBordersSpaceBefore : 0, | |
| 510 legendBordersSpaceAfter : 0, | |
| 511 footNoteSpaceBefore : 0, | |
| 512 footNoteSpaceAfter : 0, | |
| 513 startAngle : 0, | |
| 514 dynamicDisplay : true | |
| 515 } | |
| 516 | |
| 517 | |
| 518 | |
| 519 var crosstxt1 = { | |
| 520 crossText : ["Up left","up center","up right","mid left","mid center","mid
right","down left","down center","down right"], | |
| 521 crossTextOverlay : [true], | |
| 522 crossTextFontFamily : ["'Arial'"], | |
| 523 crossTextFontSize : [20], | |
| 524 crossTextFontColor : ["black"], | |
| 525 crossTextFontStyle : ["italic"], | |
| 526 crossTextRelativePosX : [0,-2,4,0,-2,4,0,-2,4], | |
| 527 crossTextRelativePosY : [0,0,0,-2,-2,-2,4,4,4], | |
| 528 crossTextBaseline: ["default"], | |
| 529 crossTextAlign : ["default"], | |
| 530 crossTextPosX : [0,0,0,0,0,0,0,0,0], | |
| 531 crossTextPosY : [0,0,0,0,0,0,0,0,0], | |
| 532 crossTextAngle : [0], | |
| 533 canvasBorders : true, | |
| 534 canvasBordersWidth : 3, | |
| 535 canvasBordersColor : "black", | |
| 536 graphTitle : "Draw text through the graph", | |
| 537 graphTitleFontFamily : "'Arial'", | |
| 538 graphTitleFontSize : 24, | |
| 539 graphTitleFontStyle : "bold", | |
| 540 graphTitleFontColor : "#666", | |
| 541 dynamicDisplay : true | |
| 542 } | |
| 543 | |
| 544 var crosstxt2 = { | |
| 545 crossText : ["Up left","up center","up right","mid left","mid center","mid
right","down left","down center","down right"], | |
| 546 crossTextOverlay : [true], | |
| 547 crossTextFontFamily : ["'Arial'"], | |
| 548 crossTextFontSize : [20], | |
| 549 crossTextFontColor : ["black"], | |
| 550 crossTextFontStyle : ["italic"], | |
| 551 crossTextRelativePosX : [1,2,3,1,2,3,1,2,3], | |
| 552 crossTextRelativePosY : [1,1,1,2,2,2,3,3,3], | |
| 553 crossTextBaseline: ["default"], | |
| 554 crossTextAlign : ["default"], | |
| 555 crossTextPosX : [0,0,0,0,0,0,0,0,0], | |
| 556 crossTextPosY : [0,0,0,0,0,0,0,0,0], | |
| 557 crossTextAngle : [0], | |
| 558 canvasBorders : true, | |
| 559 canvasBordersWidth : 3, | |
| 560 canvasBordersColor : "black", | |
| 561 graphTitle : "Draw text through the graph", | |
| 562 graphTitleFontFamily : "'Arial'", | |
| 563 graphTitleFontSize : 24, | |
| 564 graphTitleFontStyle : "bold", | |
| 565 graphTitleFontColor : "#666", | |
| 566 footNote : " " , | |
| 567 spaceTop : 30, | |
| 568 spaceBottom : 30, | |
| 569 spaceLeft : 30, | |
| 570 spaceRight : 30, | |
| 571 dynamicDisplay : true | |
| 572 } | |
| 573 | |
| 574 function dispPct(numtxt,valtxt,ctx,config,posX,posY,borderX,borderY,overlay,data
,animPC){ | |
| 575 // alert("INIT"); | |
| 576 return(Math.round(100*animPC)); | |
| 577 } | |
| 578 | |
| 579 var crosstxt3 = { | |
| 580 animationEasing : "linear", | |
| 581 crossText : ["%call function..."], | |
| 582 crossTextOverlay : [true], | |
| 583 crossTextFontSize : [50], | |
| 584 crossTextFontColor : ["black"], | |
| 585 crossTextRelativePosX : [2], | |
| 586 crossTextRelativePosY : [2], | |
| 587 crossTextFunction : dispPct, | |
| 588 graphTitle : "Draw text through the graph", | |
| 589 graphTitleFontFamily : "'Arial'", | |
| 590 graphTitleFontSize : 24, | |
| 591 graphTitleFontStyle : "bold", | |
| 592 graphTitleFontColor : "#666", | |
| 593 canvasBorders : true, | |
| 594 canvasBordersWidth : 3, | |
| 595 canvasBordersColor : "black", | |
| 596 spaceTop : 30, | |
| 597 spaceBottom : 30, | |
| 598 spaceLeft : 30, | |
| 599 spaceRight : 30, | |
| 600 startAngle : 180, | |
| 601 dynamicDisplay : true | |
| 602 } | |
| 603 | |
| 604 function dispPct2(numtxt,valtxt,ctx,config,posX,posY,borderX,borderY,overlay,dat
a,animPC){ | |
| 605 // alert("INIT"); | |
| 606 return(Math.round(animPC*data[0].value)); | |
| 607 } | |
| 608 | |
| 609 var crosstxt4 = { | |
| 610 animationEasing : "linear", | |
| 611 crossText : ["%call function..."], | |
| 612 crossTextOverlay : [true], | |
| 613 crossTextFontSize : [50], | |
| 614 crossTextFontColor : ["black"], | |
| 615 crossTextRelativePosX : [2], | |
| 616 crossTextRelativePosY : [2], | |
| 617 crossTextFunction : dispPct2, | |
| 618 canvasBorders : true, | |
| 619 canvasBordersWidth : 3, | |
| 620 canvasBordersColor : "black", | |
| 621 graphTitle : "Draw text through the graph", | |
| 622 graphTitleFontFamily : "'Arial'", | |
| 623 graphTitleFontSize : 24, | |
| 624 graphTitleFontStyle : "bold", | |
| 625 graphTitleFontColor : "#666", | |
| 626 spaceTop : 30, | |
| 627 spaceBottom : 30, | |
| 628 spaceLeft : 30, | |
| 629 spaceRight : 30, | |
| 630 startAngle : 180, | |
| 631 dynamicDisplay : true | |
| 632 } | |
| 633 | |
| 634 | |
| 635 | |
| 636 </SCRIPT> | |
| 637 | |
| 638 | |
| 639 <html> | |
| 640 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> | |
| 641 <head> | |
| 642 <title>Demo ChartNew.js</title> | |
| 643 | |
| 644 </head> | |
| 645 <body> | |
| 646 | |
| 647 <!div id="divCursor" style="position:absolute"> <!/div> | |
| 648 | |
| 649 <center> | |
| 650 <FONT SIZE=6><B>Demo of ChartNew.js !</B></FONT> <BR> | |
| 651 | |
| 652 <script> | |
| 653 | |
| 654 | |
| 655 document.write("<canvas id=\"canvas_radar\" height=\""+defCanvasHeight+"\"
width=\""+defCanvasWidth+"\"></canvas>"); | |
| 656 document.write("<canvas id=\"canvas_line\" height=\""+defCanvasHeight+"\"
width=\""+defCanvasWidth+"\"></canvas>"); | |
| 657 document.write("<canvas id=\"canvas_bar\" height=\""+defCanvasHeight+"\" w
idth=\""+defCanvasWidth+"\"></canvas>"); | |
| 658 document.write("<canvas id=\"canvas_stackedbar\" height=\""+defCanvasHeigh
t+"\" width=\""+defCanvasWidth+"\"></canvas>"); | |
| 659 document.write("<canvas id=\"canvas_horizontalbar\" height=\""+defCanvasHe
ight+"\" width=\""+defCanvasWidth+"\"></canvas>"); | |
| 660 document.write("<canvas id=\"canvas_horizontalstackedbar\" height=\""+defC
anvasHeight+"\" width=\""+defCanvasWidth+"\"></canvas>"); | |
| 661 document.write("<canvas id=\"canvas_polararea\" height=\""+defCanvasHeight
+"\" width=\""+defCanvasWidth+"\"></canvas>"); | |
| 662 document.write("<canvas id=\"canvas_pie\" height=\""+defCanvasHeight+"\" w
idth=\""+defCanvasWidth+"\"></canvas>"); | |
| 663 document.write("<canvas id=\"canvas_doughnut\" height=\""+defCanvasHeight+
"\" width=\""+defCanvasWidth+"\"></canvas>"); | |
| 664 document.write("<canvas id=\"canvas_doughnut2\" height=\""+defCanvasHeight
+"\" width=\""+defCanvasWidth+"\"></canvas>"); | |
| 665 document.write("<canvas id=\"canvas_doughnut3\" height=\""+defCanvasHeight
+"\" width=\""+defCanvasWidth+"\"></canvas>"); | |
| 666 document.write("<canvas id=\"canvas_pie_with_text_1\" height=\""+defCanvas
Height+"\" width=\""+defCanvasWidth+"\"></canvas>"); | |
| 667 document.write("<canvas id=\"canvas_pie_with_text_2\" height=\""+defCanvas
Height+"\" width=\""+defCanvasWidth+"\"></canvas>"); | |
| 668 | |
| 669 | |
| 670 setopts=allopts; | |
| 671 setopts=onlyborderopts; | |
| 672 setopts=noopts; | |
| 673 setopts=newopts; | |
| 674 // setopts=nooptions; | |
| 675 | |
| 676 | |
| 677 window.onload = function() { | |
| 678 | |
| 679 | |
| 680 if(1==1) { | |
| 681 var myLine = new Chart(document.getElementById("canvas_line").getContext("2d
")).Line(mydata1,setopts); | |
| 682 var myLine = new Chart(document.getElementById("canvas_bar").getContext("2d"
)).Bar(mydata1,setopts); | |
| 683 var myLine = new Chart(document.getElementById("canvas_stackedbar").getConte
xt("2d")).StackedBar(mydata1,setopts); | |
| 684 var myLine = new Chart(document.getElementById("canvas_horizontalbar").getCo
ntext("2d")).HorizontalBar(mydata1,setopts); | |
| 685 var myLine = new Chart(document.getElementById("canvas_horizontalstackedbar"
).getContext("2d")).HorizontalStackedBar(mydata1,setopts); | |
| 686 var myLine = new Chart(document.getElementById("canvas_radar").getContext("2
d")).Radar(mydata1,setopts); | |
| 687 | |
| 688 | |
| 689 var myLine = new Chart(document.getElementById("canvas_polararea").getContex
t("2d")).PolarArea(mydata2,setopts); | |
| 690 var myLine = new Chart(document.getElementById("canvas_pie").getContext("2d"
)).Pie(mydata2,setopts); | |
| 691 var myLine = new Chart(document.getElementById("canvas_doughnut").getContext
("2d")).Doughnut(mydata2,setopts); | |
| 692 var myLine = new Chart(document.getElementById("canvas_doughnut2").getContex
t("2d")).Doughnut(mydata3,crosstxt3); | |
| 693 var myLine = new Chart(document.getElementById("canvas_doughnut3").getContex
t("2d")).Doughnut(mydata4,crosstxt4); | |
| 694 var myLine = new Chart(document.getElementById("canvas_pie_with_text_1").get
Context("2d")).Pie(mydata2,crosstxt1); | |
| 695 var myLine = new Chart(document.getElementById("canvas_pie_with_text_2").get
Context("2d")).Pie(mydata2,crosstxt2); | |
| 696 } | |
| 697 | |
| 698 } | |
| 699 | |
| 700 </script> | |
| 701 </body> | |
| 702 </html> | |
| OLD | NEW |