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 <SCRIPT src='../Add-ins/format.js'></script> |
| 5 <SCRIPT src='../Add-ins/gradientColor.js'></script> |
| 6 |
| 7 <SCRIPT> |
| 8 |
| 9 |
| 10 |
| 11 var charJSPersonnalDefaultOptions = { decimalSeparator : "," , thousandSeparator
: ".", roundNumber : "none", graphTitleFontSize: 2 }; |
| 12 |
| 13 defCanvasWidth=600; |
| 14 defCanvasHeight=300; |
| 15 |
| 16 |
| 17 |
| 18 |
| 19 |
| 20 var BarLineData = { |
| 21 labels : ["January","February","March","April","May","June","July"], |
| 22 datasets : [ |
| 23 { |
| 24 type: "Line", |
| 25 fill: false, |
| 26 strokeColor : "rgb(230, 14, 14)", |
| 27 pointColor : "rgb(205, 151, 155)", |
| 28 pointStrokeColor : "#f56691", |
| 29 pointDotStrokeWidth : 1, |
| 30 data : [0.30,0.44,0.42,0.19,0.90,0.37,1.20], |
| 31 // data : [-0.30,-0.44,-0.42,-0.19,-0.90,-0.37,-1.20], |
| 32 // data : [-0.30,0.44,-0.42,0.19,-0.90,-0.37,1.20], |
| 33 // data : [,,0.4,0.19,,0.37,0.4], |
| 34 // data : [0,0,0,0,0,0,0], |
| 35 // data : [0,,,0,,0,0], |
| 36 title : "line 1", |
| 37 axis : 1 |
| 38 }, |
| 39 { |
| 40 fillColor : gradientColor, |
| 41 gradientColors : ["#00FFFF 50%","green","yellow"], |
| 42 strokeColor : "rgba(220,220,220,1)", |
| 43 pointColor : "rgba(220,220,220,1)", |
| 44 pointDotStrokeWidth : 1, |
| 45 pointStrokeColor : "blue", |
| 46 // data : [0.30,0.44,0.42,0.19,0.90,0.37,1.20], |
| 47 data : [-0.30,-0.44,-0.42,-0.19,-0.90,-0.37,-1.20], |
| 48 // data : [-0.30,0.44,-0.42,0.19,-0.90,-0.37,1.20], |
| 49 // data : [,,0.4,0.19,,0.37,0.4], |
| 50 // data : [0,0,0,0,0,0,0], |
| 51 // data : [0,,,0,,0,0], |
| 52 title : "Bar 1" |
| 53 }, |
| 54 { |
| 55 fillColor : "rgba(151,187,205,0.5)", |
| 56 strokeColor : "rgba(151,187,205,1)", |
| 57 pointColor : "rgba(151,187,205,1)", |
| 58 pointDotStrokeWidth : 1, |
| 59 pointStrokeColor : "#fff", |
| 60 data : [0.28,0.48,0.40,0.19,0.96,0.27,1.00], |
| 61 title : "Bar 2" |
| 62 }, |
| 63 { |
| 64 type: "Line", |
| 65 fill: false, |
| 66 fillColor : "rgba(151, 205, 172, 0.5)", |
| 67 strokeColor : "rgb(87, 147, 106)", |
| 68 pointColor : "rgb(151, 205, 172)", |
| 69 pointDotStrokeWidth : 1, |
| 70 pointStrokeColor : "#fff", |
| 71 data : [0.42,0.58,0.44,0.22,0.84,0.17,0.70], |
| 72 title : "Line 3", |
| 73 axis : 1 |
| 74 } |
| 75 ] |
| 76 } |
| 77 |
| 78 |
| 79 |
| 80 |
| 81 |
| 82 </SCRIPT> |
| 83 |
| 84 |
| 85 <html> |
| 86 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> |
| 87 <head> |
| 88 <title>Demo ChartNew.js</title> |
| 89 </head> |
| 90 <body> |
| 91 |
| 92 <center> |
| 93 <FONT SIZE=6><B>Demo of ChartNew.js !</B></FONT> <BR> |
| 94 <canvas id="canvas_Line" height="600" width="800"></canvas> |
| 95 <script> |
| 96 var opts= {animation : false,legend : true,annotateDisplay:true,inGraphDataSho
w : true, datasetFill : false,legendBlockSize :40, legendPosX : 4, legendPosY :
2, barValueSpacing : 10}; |
| 97 |
| 98 window.onload = function() { |
| 99 var bar = new Chart(document.getElementById("canvas_Line").getContext("2
d")).Bar(BarLineData,opts); |
| 100 |
| 101 } |
| 102 </script> |
| 103 </body> |
| 104 </html> |
OLD | NEW |