| OLD | NEW |
| (Empty) |
| 1 <!doctype html> | |
| 2 <SCRIPT src='../ChartNew.js'></script> | |
| 3 <SCRIPT> | |
| 4 defCanvasWidth=1400; | |
| 5 defCanvasHeight=800; | |
| 6 var mydata1 = { | |
| 7 labels : ["January","February","March","April","May","June","July"], | |
| 8 datasets : [ | |
| 9 { | |
| 10 fillColor : "rgba(220,220,220,0.5)", | |
| 11 strokeColor : "rgba(220,220,220,1)", | |
| 12 pointColor : "rgba(220,220,220,1)", | |
| 13 pointStrokeColor : "#fff", | |
| 14 data : [0.65,0.59,0.90,0.81,0.56,0.55,0.40], | |
| 15 title : "pFirst data" | |
| 16 }, | |
| 17 { | |
| 18 fillColor : "rgba(151,187,205,0.5)", | |
| 19 strokeColor : "rgba(151,187,205,1)", | |
| 20 pointColor : "rgba(151,187,205,1)", | |
| 21 pointStrokeColor : "#fff", | |
| 22 data : [0.28,0.48,0.40,0.19,0.96,0.27,1.00], | |
| 23 title : "pSecond data" | |
| 24 } | |
| 25 ] | |
| 26 } | |
| 27 var mydata2 = [ | |
| 28 { | |
| 29 value : 30, | |
| 30 color: "#D97041", | |
| 31 title : "data1" | |
| 32 }, | |
| 33 { | |
| 34 value : 90, | |
| 35 color: "#C7604C", | |
| 36 title : "data2" | |
| 37 }, | |
| 38 { | |
| 39 value : 24, | |
| 40 color: "#21323D", | |
| 41 title : "data3" | |
| 42 }, | |
| 43 { | |
| 44 value : 58, | |
| 45 color: "#9D9B7F", | |
| 46 title : "data4" | |
| 47 }, | |
| 48 { | |
| 49 value : 82, | |
| 50 color: "#7D4F6D", | |
| 51 title : "data5" | |
| 52 }, | |
| 53 { | |
| 54 value : 8, | |
| 55 color: "#584A5E", | |
| 56 title : "data6" | |
| 57 } | |
| 58 ] | |
| 59 var opt1 = { | |
| 60 multiGraph : true, | |
| 61 canvasBorders : true, | |
| 62 canvasBordersWidth : 3, | |
| 63 canvasBordersColor : "black", | |
| 64 graphTitle : "Pie", | |
| 65 legend : true, | |
| 66 inGraphDataShow : true, | |
| 67 annotateDisplay : true, | |
| 68 graphTitleFontSize: 18, | |
| 69 spaceTop : 30, | |
| 70 spaceBottom : (defCanvasHeight-30)/2, | |
| 71 spaceRight : defCanvasWidth/2, | |
| 72 crossText : ["Multiple graph in a single Canvas"], | |
| 73 crossTextIter : ["first"], | |
| 74 crossTextRelativePosX : [-2], | |
| 75 crossTextRelativePosY : [0], | |
| 76 crossTextPosY : [20], | |
| 77 crossTextFontSize : [20], | |
| 78 crossTextFontColor : ["black"] | |
| 79 } | |
| 80 var opt2 = { | |
| 81 multiGraph : true, | |
| 82 canvasBorders : true, | |
| 83 canvasBordersWidth : 3, | |
| 84 canvasBordersColor : "black", | |
| 85 graphTitle : "Doughnut", | |
| 86 legend : true, | |
| 87 inGraphDataShow : true, | |
| 88 annotateDisplay : true, | |
| 89 graphTitleFontSize: 18, | |
| 90 spaceTop : 30, | |
| 91 spaceBottom : (defCanvasHeight-30)/2, | |
| 92 spaceLeft : defCanvasWidth/2 | |
| 93 } | |
| 94 var opt3 = { | |
| 95 multiGraph : true, | |
| 96 canvasBorders : true, | |
| 97 canvasBordersWidth : 3, | |
| 98 canvasBordersColor : "black", | |
| 99 graphTitle : "Line", | |
| 100 legend : true, | |
| 101 inGraphDataShow : true, | |
| 102 annotateDisplay : true, | |
| 103 graphTitleFontSize: 18, | |
| 104 spaceTop : 30 +(defCanvasHeight-30)/2, | |
| 105 spaceRight : defCanvasWidth/2 | |
| 106 } | |
| 107 var opt4 = { | |
| 108 multiGraph : true, | |
| 109 canvasBorders : true, | |
| 110 canvasBordersWidth : 3, | |
| 111 canvasBordersColor : "black", | |
| 112 graphTitle : "Bar", | |
| 113 legend : true, | |
| 114 inGraphDataShow : true, | |
| 115 annotateDisplay : true, | |
| 116 graphTitleFontSize: 18, | |
| 117 spaceTop : 30 +(defCanvasHeight-30)/2, | |
| 118 spaceLeft : defCanvasWidth/2, | |
| 119 } | |
| 120 </SCRIPT> | |
| 121 <html> | |
| 122 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> | |
| 123 <head> | |
| 124 <title>Demo ChartNew.js</title> | |
| 125 </head> | |
| 126 <body> | |
| 127 <center> | |
| 128 <FONT SIZE=6><B>Demo of ChartNew.js !</B></FONT> <BR> | |
| 129 <script> | |
| 130 var ctx; | |
| 131 document.write("<canvas id=\"canvas_Multigraph\" height=\""+defCanvasHeight+
"\" width=\""+defCanvasWidth+"\"></canvas>"); | |
| 132 window.onload = function() { | |
| 133 var myGraph = new Chart(document.getElementById("canvas_Multigraph").getCon
text("2d")) | |
| 134 myGraph.Pie(mydata2,opt1,myGraph); | |
| 135 myGraph.Doughnut(mydata2,opt2,myGraph); | |
| 136 myGraph.Line(mydata1,opt3,myGraph); | |
| 137 myGraph.Bar(mydata1,opt4,myGraph); | |
| 138 } | |
| 139 </script> | |
| 140 </body> | |
| 141 </html> | |
| OLD | NEW |