OLD | NEW |
| (Empty) |
1 <!doctype html> | |
2 | |
3 <SCRIPT src='..\ChartNew.js'></script> | |
4 <SCRIPT src='..\Add-ins\stats.js'></script> | |
5 | |
6 <SCRIPT> | |
7 | |
8 defCanvasWidth=1200; | |
9 defCanvasHeight=600; | |
10 | |
11 var mydata1 = { | |
12 labels : ["January","February","March","April","May","June"], | |
13 datasets : [ | |
14 { | |
15 fillColor : "rgba(220,220,220,0.5)", | |
16 strokeColor : "rgba(220,220,220,1)", | |
17 pointColor : "rgba(220,220,220,1)", | |
18 pointStrokeColor : "#fff", | |
19 data : [7,10,15,15,13,8], | |
20 title : "Europe" | |
21 }, | |
22 { | |
23 fillColor : "rgba(151,187,205,0.5)", | |
24 strokeColor : "rgba(151,187,205,1)", | |
25 pointColor : "rgba(151,187,205,1)", | |
26 pointStrokeColor : "#fff", | |
27 data : [10,13,12,15,8,15], | |
28 title : "North-America" | |
29 }, | |
30 { | |
31 fillColor : "rgba(187,151,205,0.5)", | |
32 strokeColor : "rgba(187,151,205,1)", | |
33 pointColor : "rgba(187,151,205,1)", | |
34 pointStrokeColor : "#fff", | |
35 data : [11,14,13,12,15,18], | |
36 title : "South-America" | |
37 }, | |
38 { | |
39 fillColor : "rgba(151,187,151,0.5)", | |
40 strokeColor : "rgba(151,187,151,1)", | |
41 pointColor : "rgba(151,187,151,1)", | |
42 pointStrokeColor : "#fff", | |
43 data : [12,16,10,5,7,11], | |
44 title : "Asia" | |
45 }, | |
46 { | |
47 type : "Line", | |
48 fillColor : "rgba(0,220,0,0.5)", | |
49 strokeColor : "rgba(0,220,0,1)", | |
50 pointColor : "rgba(0,220,0,1)", | |
51 pointStrokeColor : "#fff", | |
52 data : ["#data_mean#","#data_mean#","#data_mean#","#data
_mean#","#data_mean#","#data_mean#"], | |
53 title : "Mean Value of the month" | |
54 }, | |
55 { | |
56 type : "Line", | |
57 fillColor : "rgba(0,0,220,0.5)", | |
58 strokeColor : "rgba(0,0,220,1)", | |
59 pointColor : "rgba(0,0,220,1)", | |
60 pointStrokeColor : "#fff", | |
61 data : ["#mean#","#mean#","#mean#","#mean#","#mean#","#m
ean#"], | |
62 title : "Mean Value (<%=roundToNumber(#mean#,-2)%>)" | |
63 } | |
64 ] | |
65 } | |
66 | |
67 var statOptions = { | |
68 canvasBorders : true, | |
69 canvasBordersWidth : 3, | |
70 canvasBordersColor : "black", | |
71 scaleXGridLinesStep : 9999, | |
72 graphTitle : "Stats sample usage", | |
73 graphTitleFontFamily : "'Arial'", | |
74 graphTitleFontSize : 24, | |
75 graphTitleFontStyle : "bold", | |
76 graphTitleFontColor : "#666", | |
77 yAxisMinimumInterval : 1, | |
78 annotateDisplay : true, | |
79 annotateLabel: "<%= v1 + ' : ' + v3%>", | |
80 legend : true, | |
81 barValueSpacing : 30, | |
82 footNoteFontSize : 15, | |
83 animationLeftToRight : true, | |
84 animationEasing : "linear", | |
85 animationSteps : 200, | |
86 footNote : "1st Quarter Mean : <%=roundToNumber((#DATA_MEAN(0)#+#DATA_MEAN
(1)#+#DATA_MEAN(2)#)/3,-2)%> - 2nd Quarter Mean : <%=roundToNumber((#DATA_MEAN(3
)#+#DATA_MEAN(4)#+#DATA_MEAN(5)#)/3,-2) %>" | |
87 } | |
88 | |
89 function roundToNumber(num, place) { | |
90 var newval=1*num; | |
91 | |
92 if(typeof(newval)=="number"){ | |
93 if(place<=0){ | |
94 var roundVal=-place; | |
95 newval= +(Math.round(newval + "e+" + roundVal) + "e-" + roundVal); | |
96 } | |
97 else { | |
98 var roundVal=place; | |
99 var divval= "1e+"+roundVal; | |
100 newval= +(Math.round(newval/divval))*divval; | |
101 } | |
102 } | |
103 return(newval); | |
104 } ; | |
105 | |
106 </SCRIPT> | |
107 | |
108 <html> | |
109 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> | |
110 <head> | |
111 <title>Demo ChartNew.js</title> | |
112 | |
113 </head> | |
114 <body> | |
115 | |
116 <script> | |
117 | |
118 stats(mydata1,statOptions); | |
119 | |
120 document.write("<canvas id=\"canvas_bar\" height=\""+defCanvasHeight+"\" width=\
""+defCanvasWidth+"\"></canvas>"); | |
121 | |
122 window.onload = function() { | |
123 var myBar = new Chart(document.getElementById("canvas_bar").getContext("2d")
).Bar(mydata1,statOptions); | |
124 } | |
125 </script> | |
126 </body> | |
127 </html> | |
OLD | NEW |