| OLD | NEW |
| (Empty) |
| 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> | |
| 2 <html> | |
| 3 <head> | |
| 4 <meta http-equiv="content-type" content="text/html; charset=windows-1250"> | |
| 5 <meta name="generator" content="PSPad editor, www.pspad.com"> | |
| 6 <title></title> | |
| 7 <!--[if lte IE 8]><SCRIPT src='source/excanvas.js'></script><![endif]--><SCRIP
T src='../ChartNew.js'></script> | |
| 8 <SCRIPT src='../Add-ins/gradientcolor.js'></script> | |
| 9 | |
| 10 </head> | |
| 11 <body> | |
| 12 <canvas id="mycanvas_bar" height="600" width="800"></canvas> | |
| 13 <canvas id="mycanvas_stackedbar" height="600" width="800"></canvas> | |
| 14 <canvas id="mycanvas_horizontalbar" height="600" width="800"></canvas> | |
| 15 <canvas id="mycanvas_horizontalstackedbar" height="600" width="800"></canvas> | |
| 16 <canvas id="mycanvas_pie" height="600" width="800"></canvas> | |
| 17 <canvas id="mycanvas_doughnut" height="600" width="800"></canvas> | |
| 18 <canvas id="mycanvas_polararea" height="600" width="800"></canvas> | |
| 19 <canvas id="mycanvas_line" height="600" width="800"></canvas> | |
| 20 <canvas id="mycanvas_radar" height="600" width="800"></canvas> | |
| 21 <script> | |
| 22 var BarLineData = { | |
| 23 labels : ["January","February","March","April","May","June","July"], | |
| 24 // labels : ["January"], | |
| 25 datasets : [ | |
| 26 { | |
| 27 fillColor : gradientColor, | |
| 28 gradientColors : ["#00FFFF 50%","green","yellow"], | |
| 29 strokeColor : "rgba(220,220,220,1)", | |
| 30 pointColor : "rgba(220,220,220,1)", | |
| 31 pointStrokeColor : "#fff", | |
| 32 data : [0.7,0.6,0.30,0.4,0.5,0.2,0.15], | |
| 33 // data : [0.7], | |
| 34 title : "Bar 1" | |
| 35 }, | |
| 36 { | |
| 37 fillColor : gradientColor, | |
| 38 gradientColors: ["red","yellow","blue"], | |
| 39 strokeColor : "rgba(151,187,205,1)", | |
| 40 pointColor : "rgba(151,187,205,1)", | |
| 41 pointStrokeColor : "#fff", | |
| 42 data : [0,0.5,0.1,0.7,1,0.8,1], | |
| 43 // data : [1], | |
| 44 title : "Bar 2" | |
| 45 }, | |
| 46 ] | |
| 47 } | |
| 48 | |
| 49 var HorizontalBarLineData = { | |
| 50 labels : ["January","February","March","April","May","June","July"], | |
| 51 datasets : [ | |
| 52 { | |
| 53 fillColor : gradientColor, | |
| 54 gradientColors : ["#00FFFF 50%","green","yellow"], | |
| 55 strokeColor : "rgba(220,220,220,1)", | |
| 56 pointColor : "rgba(220,220,220,1)", | |
| 57 pointStrokeColor : "#fff", | |
| 58 data : [0.7,0.6,0.30,0.4,0.5,0.2,0.15], | |
| 59 title : "Bar 1" | |
| 60 }, | |
| 61 { | |
| 62 fillColor : gradientColor, | |
| 63 gradientColors: ["red","yellow","blue"], | |
| 64 strokeColor : "rgba(151,187,205,1)", | |
| 65 pointColor : "rgba(151,187,205,1)", | |
| 66 pointStrokeColor : "#fff", | |
| 67 data : [1,1,1,1,1,1,0.3], | |
| 68 title : "Bar 2" | |
| 69 }, | |
| 70 ] | |
| 71 } | |
| 72 | |
| 73 var pieData = [ | |
| 74 { | |
| 75 value : 30, | |
| 76 color: gradientColor, | |
| 77 gradientColors: ["#00FFFF 50%","green","yellow"], | |
| 78 title : "data1" | |
| 79 }, | |
| 80 { | |
| 81 value : 90, | |
| 82 color: gradientColor, | |
| 83 gradientColors : ["red","yellow","blue"], | |
| 84 title : "data2" | |
| 85 }, | |
| 86 { | |
| 87 value : 24, | |
| 88 color: gradientColor, | |
| 89 gradientColors : ["#DC2424","#4A569D"], | |
| 90 title : "data3" | |
| 91 }, | |
| 92 { | |
| 93 value : 58, | |
| 94 color: gradientColor, | |
| 95 gradientColors : ["#24C6DC","#514A9D"], | |
| 96 title : "data4" | |
| 97 }, | |
| 98 { | |
| 99 value : 82, | |
| 100 color: gradientColor, | |
| 101 gradientColors : ["#085078","#85D8CE"], | |
| 102 title : "data5" | |
| 103 }, | |
| 104 { | |
| 105 value : 8, | |
| 106 color: gradientColor, | |
| 107 gradientColors : ["#3D7EAA","#FFE47A"], | |
| 108 title : "data6" | |
| 109 } | |
| 110 ]; | |
| 111 | |
| 112 | |
| 113 var opts= { | |
| 114 animation:false, | |
| 115 legendBlockSize : 40, | |
| 116 // legendFontSize : 40, | |
| 117 legend: true | |
| 118 }; | |
| 119 | |
| 120 window.onload = function() { | |
| 121 var myBar = new Chart(document.getElementById("mycanvas_bar").getContext("
2d")).Bar(BarLineData,opts); | |
| 122 var myStackedBar = new Chart(document.getElementById("mycanvas_stackedbar"
).getContext("2d")).StackedBar(BarLineData,opts); | |
| 123 var myHorizontalBar = new Chart(document.getElementById("mycanvas_horizont
albar").getContext("2d")).HorizontalBar(HorizontalBarLineData,opts); | |
| 124 var myHorizontalStackedBar = new Chart(document.getElementById("mycanvas_h
orizontalstackedbar").getContext("2d")).HorizontalStackedBar(HorizontalBarLineDa
ta,opts); | |
| 125 var myPie = new Chart(document.getElementById("mycanvas_pie").getContext("
2d")).Pie(pieData,opts); | |
| 126 var myDoughnut = new Chart(document.getElementById("mycanvas_doughnut").ge
tContext("2d")).Doughnut(pieData,opts); | |
| 127 var mypolararea = new Chart(document.getElementById("mycanvas_polararea").
getContext("2d")).PolarArea(pieData,opts); | |
| 128 var myline = new Chart(document.getElementById("mycanvas_line").getContext
("2d")).Line(BarLineData,opts); | |
| 129 var myradar = new Chart(document.getElementById("mycanvas_radar").getConte
xt("2d")).Radar(BarLineData,opts); | |
| 130 } | |
| 131 </script> | |
| 132 | |
| 133 </body> | |
| 134 </html> | |
| OLD | NEW |