OLD | NEW |
(Empty) | |
| 1 <!doctype html> |
| 2 |
| 3 <!--[if lte IE 8]><SCRIPT src='source/excanvas.js'></script><![endif]--><SCRIPT
src='../ChartNew.js'></script> |
| 4 |
| 5 <SCRIPT> |
| 6 |
| 7 |
| 8 |
| 9 var charJSPersonnalDefaultOptions = { decimalSeparator : "," , thousandSeparator
: ".", roundNumber : "none", graphTitleFontSize: 2 }; |
| 10 |
| 11 defCanvasWidth=600; |
| 12 defCanvasHeight=300; |
| 13 |
| 14 |
| 15 |
| 16 |
| 17 |
| 18 var BarData = { |
| 19 labels : ["January","February","March","April","May","June","July"], |
| 20 datasets : [ |
| 21 { |
| 22 strokeColor : "rgba(220,220,220,1)", |
| 23 pointColor : "rgba(220,220,220,1)", |
| 24 pointDotStrokeWidth : 1, |
| 25 pointStrokeColor : "blue", |
| 26 data : [10,20,30,24,32,18,15], |
| 27 title : "Bar 1" |
| 28 }, |
| 29 { |
| 30 fillColor : "rgba(151,187,205,0.5)", |
| 31 strokeColor : "rgba(151,187,205,1)", |
| 32 pointColor : "rgba(151,187,205,1)", |
| 33 pointDotStrokeWidth : 1, |
| 34 pointStrokeColor : "#fff", |
| 35 data : [0,1,0,2,25,0,4], |
| 36 title : "Bar 2" |
| 37 } |
| 38 ] |
| 39 } |
| 40 |
| 41 |
| 42 |
| 43 |
| 44 |
| 45 </SCRIPT> |
| 46 |
| 47 |
| 48 <html> |
| 49 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> |
| 50 <head> |
| 51 <title>Issue 205</title> |
| 52 </head> |
| 53 <body> |
| 54 |
| 55 <center> |
| 56 <FONT SIZE=6><B>Demo of ChartNew.js !</B></FONT> <BR> |
| 57 <canvas id="canvas_Bar1" height="300" width="400"></canvas> |
| 58 <canvas id="canvas_Bar2" height="300" width="400"></canvas> |
| 59 <canvas id="canvas_Bar3" height="300" width="400"></canvas> |
| 60 <canvas id="canvas_Bar4" height="300" width="400"></canvas> |
| 61 <script> |
| 62 |
| 63 var opts1= { |
| 64 animation : false, |
| 65 legend : true, |
| 66 inGraphDataShow : true, |
| 67 datasetFill : false, |
| 68 inGraphDataYPosition: 3, |
| 69 inGraphDataVAlign: "top", |
| 70 inGraphDataPaddingY: -3, |
| 71 graphTitleFontSize: 18, |
| 72 graphTitle : "With default value for inGraphData options" |
| 73 }; |
| 74 |
| 75 var opts2= { |
| 76 animation : false, |
| 77 legend : true, |
| 78 inGraphDataShow : true, |
| 79 datasetFill : false, |
| 80 inGraphDataYPosition: [3,3], |
| 81 inGraphDataVAlign: ["top","bottom"], |
| 82 inGraphDataPaddingY: [-3,3], |
| 83 graphTitle : "Solution 1" |
| 84 }; |
| 85 |
| 86 var opts3= { |
| 87 animation : false, |
| 88 legend : true, |
| 89 inGraphDataShow : true, |
| 90 datasetFill : false, |
| 91 inGraphDataYPosition: [3,3], |
| 92 inGraphDataVAlign: ["top","bottom"], |
| 93 inGraphDataPaddingY: [-3,3], |
| 94 inGraphDataTmpl: "<%=(v3 > 0 ? v3 : '')%>", |
| 95 graphTitle : "Solution 2 (0 not displayed)" |
| 96 }; |
| 97 |
| 98 function computeInGraphVAlign(area, ctx, data,statData, posi,posj,othervars) { |
| 99 if(posi==1 && 1*data.datasets[posi].data[posj]<6) return("bottom"); |
| 100 else return("top"); |
| 101 } |
| 102 |
| 103 function computeInGraphPaddingY(area, ctx, data,statData, posi,posj,othervars) { |
| 104 if(posi==1 && 1*data.datasets[posi].data[posj]<6) return(3); |
| 105 else return(-3); |
| 106 } |
| 107 |
| 108 var opts4= { |
| 109 animation : false, |
| 110 legend : true, |
| 111 inGraphDataShow : true, |
| 112 datasetFill : false, |
| 113 inGraphDataYPosition: 3, |
| 114 inGraphDataVAlign: computeInGraphVAlign, |
| 115 inGraphDataPaddingY: computeInGraphPaddingY, |
| 116 inGraphDataTmpl: "<%=(v3 > 0 ? v3 : '')%>", |
| 117 graphTitleFontSize: 18, |
| 118 graphTitle : "Solution 3 - some options through a function" |
| 119 }; |
| 120 |
| 121 |
| 122 |
| 123 window.onload = function() { |
| 124 var bar1 = new Chart(document.getElementById("canvas_Bar1").getContext("
2d")).StackedBar(BarData,opts1); |
| 125 var bar2 = new Chart(document.getElementById("canvas_Bar2").getContext("
2d")).StackedBar(BarData,opts2); |
| 126 var bar3 = new Chart(document.getElementById("canvas_Bar3").getContext("
2d")).StackedBar(BarData,opts3); |
| 127 var bar4 = new Chart(document.getElementById("canvas_Bar4").getContext("
2d")).StackedBar(BarData,opts4); |
| 128 |
| 129 } |
| 130 </script> |
| 131 </body> |
| 132 </html> |
OLD | NEW |