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 |