| 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=800; | |
| 12 defCanvasHeight=600; | |
| 13 | |
| 14 | |
| 15 var mydata2 = [ | |
| 16 { | |
| 17 value : 30, | |
| 18 color: "#D97041", | |
| 19 title : "data1" | |
| 20 }, | |
| 21 { | |
| 22 value : 90, | |
| 23 color: "#C7604C", | |
| 24 title : "data2" | |
| 25 }, | |
| 26 { | |
| 27 value : 24, | |
| 28 color: "#21323D", | |
| 29 title : "data3" | |
| 30 }, | |
| 31 { | |
| 32 value : 58, | |
| 33 color: "#9D9B7F", | |
| 34 title : "data4" | |
| 35 }, | |
| 36 { | |
| 37 value : 82, | |
| 38 color: "#7D4F6D", | |
| 39 title : "data5" | |
| 40 }, | |
| 41 { | |
| 42 value : 8, | |
| 43 color: "#584A5E", | |
| 44 title : "data6" | |
| 45 } | |
| 46 ] | |
| 47 | |
| 48 var smyley_1=new Image(); | |
| 49 smyley_1.src="smiley_150x150.jpg"; | |
| 50 var smyley_2=new Image(); | |
| 51 smyley_2.src="smiley_75x75.jpg"; | |
| 52 | |
| 53 | |
| 54 var crossImage1 = { | |
| 55 inGraphDataShow : true, | |
| 56 graphTitle : "Graph Title", | |
| 57 graphSubTitle : "Graph Sub Title", | |
| 58 footNote : "Footnote for the graph", | |
| 59 legend : true, | |
| 60 crossImage : [smyley_1,smyley_2,smyley_2,smyley_2,smyley_2], | |
| 61 crossImageRelativePosX : [2,0,0,4,4], | |
| 62 crossImageRelativePosY : [2,0,4,0,4], | |
| 63 crossImageAlign : ["center","left","left","right","right"], | |
| 64 crossImageBaseline : ["middle","top","bottom","top","bottom"], | |
| 65 | |
| 66 | |
| 67 crossImageIter : ["all"], | |
| 68 crossImageOverlay : [false] | |
| 69 } | |
| 70 | |
| 71 var background_img=new Image(); | |
| 72 background_img.src="background_800x600.jpg"; | |
| 73 | |
| 74 var crossImage2 = { | |
| 75 inGraphDataShow : true, | |
| 76 canvasBorders : true, | |
| 77 canvasBordersWidth : 3, | |
| 78 canvasBordersColor : "black", | |
| 79 graphTitle : "Graph Title", | |
| 80 graphSubTitle : "Graph Sub Title", | |
| 81 footNote : "Footnote for the graph", | |
| 82 legend : true, | |
| 83 animation : false, | |
| 84 crossImage : [background_img], | |
| 85 crossImageIter : ["background"], | |
| 86 crossImageOverlay : [false] | |
| 87 } | |
| 88 | |
| 89 | |
| 90 | |
| 91 | |
| 92 | |
| 93 </SCRIPT> | |
| 94 | |
| 95 | |
| 96 <html> | |
| 97 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> | |
| 98 <head> | |
| 99 <title>Demo ChartNew.js</title> | |
| 100 | |
| 101 </head> | |
| 102 <body> | |
| 103 | |
| 104 <!div id="divCursor" style="position:absolute"> <!/div> | |
| 105 | |
| 106 <center> | |
| 107 <FONT SIZE=6><B>Demo of ChartNew.js !</B></FONT> <BR> | |
| 108 | |
| 109 <script> | |
| 110 | |
| 111 | |
| 112 document.write("<canvas id=\"canvas_doughnut1\" height=\""+defCanvasHeight
+"\" width=\""+defCanvasWidth+"\"></canvas>"); | |
| 113 document.write("<canvas id=\"canvas_doughnut2\" height=\""+defCanvasHeight
+"\" width=\""+defCanvasWidth+"\"></canvas>"); | |
| 114 | |
| 115 | |
| 116 window.onload = function() { | |
| 117 | |
| 118 | |
| 119 var myLine = new Chart(document.getElementById("canvas_doughnut1").getContex
t("2d")).Doughnut(mydata2,crossImage1); | |
| 120 var myLine = new Chart(document.getElementById("canvas_doughnut2").getContex
t("2d")).Doughnut(mydata2,crossImage2); | |
| 121 | |
| 122 } | |
| 123 | |
| 124 </script> | |
| 125 </body> | |
| 126 </html> | |
| OLD | NEW |