| 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 |