%PDF- %PDF-
Direktori : /home/tojsat/public_html/ydx/huseyineski/assets/chart-master/samples/ |
Current File : /home/tojsat/public_html/ydx/huseyineski/assets/chart-master/samples/sixup.html |
<!doctype html> <html> <head> <title>Doughnut Chart</title> <script src="../Chart.js"></script> <meta name = "viewport" content = "initial-scale = 1, user-scalable = no"> <style> canvas{ float: left; } </style> </head> <body> <div style="width:600px;height:600px;"> <canvas id="doughnut" height="300" width="200"></canvas> <canvas id="line" height="300" width="200"></canvas> <canvas id="polarArea" height="300" width="200"></canvas> <canvas id="bar" height="300" width="200"></canvas> <canvas id="pie" height="300" width="200"></canvas> <canvas id="radar" height="300" width="200"></canvas> </div> <script> var doughnutData = [ { value: 30, color:"#F7464A" }, { value : 50, color : "#46BFBD" }, { value : 100, color : "#FDB45C" }, { value : 40, color : "#949FB1" }, { value : 120, color : "#4D5360" } ]; var lineChartData = { labels : ["","","","","","",""], datasets : [ { fillColor : "rgba(220,220,220,0.5)", strokeColor : "rgba(220,220,220,1)", pointColor : "rgba(220,220,220,1)", pointStrokeColor : "#fff", data : [65,59,90,81,56,55,40] }, { fillColor : "rgba(151,187,205,0.5)", strokeColor : "rgba(151,187,205,1)", pointColor : "rgba(151,187,205,1)", pointStrokeColor : "#fff", data : [28,48,40,19,96,27,100] } ] }; var pieData = [ { value: 30, color:"#F38630" }, { value : 50, color : "#E0E4CC" }, { value : 100, color : "#69D2E7" } ]; var barChartData = { labels : ["January","February","March","April","May","June","July"], datasets : [ { fillColor : "rgba(220,220,220,0.5)", strokeColor : "rgba(220,220,220,1)", data : [65,59,90,81,56,55,40] }, { fillColor : "rgba(151,187,205,0.5)", strokeColor : "rgba(151,187,205,1)", data : [28,48,40,19,96,27,100] } ] }; var chartData = [ { value : Math.random(), color: "#D97041" }, { value : Math.random(), color: "#C7604C" }, { value : Math.random(), color: "#21323D" }, { value : Math.random(), color: "#9D9B7F" }, { value : Math.random(), color: "#7D4F6D" }, { value : Math.random(), color: "#584A5E" } ]; var radarChartData = { labels : ["","","","","","",""], datasets : [ { fillColor : "rgba(220,220,220,0.5)", strokeColor : "rgba(220,220,220,1)", pointColor : "rgba(220,220,220,1)", pointStrokeColor : "#fff", data : [65,59,90,81,56,55,40] }, { fillColor : "rgba(151,187,205,0.5)", strokeColor : "rgba(151,187,205,1)", pointColor : "rgba(151,187,205,1)", pointStrokeColor : "#fff", data : [28,48,40,19,96,27,100] } ] }; new Chart(document.getElementById("doughnut").getContext("2d")).Doughnut(doughnutData); new Chart(document.getElementById("line").getContext("2d")).Line(lineChartData); new Chart(document.getElementById("radar").getContext("2d")).Radar(radarChartData); new Chart(document.getElementById("polarArea").getContext("2d")).PolarArea(chartData); new Chart(document.getElementById("bar").getContext("2d")).Bar(barChartData); new Chart(document.getElementById("pie").getContext("2d")).Pie(pieData); </script> </body> </html>