| <!doctype html> |
| <html> |
| <head> |
| <title>Doughnut Chart</title> |
| <script src="../Chart.js"></script> |
| <style> |
| body{ |
| padding: 0; |
| margin: 0; |
| } |
| #canvas-holder{ |
| width:30%; |
| } |
| </style> |
| </head> |
| <body> |
| <div id="canvas-holder"> |
| <canvas id="chart-area" width="500" height="500"/> |
| </div> |
| |
| |
| <script> |
| |
| var doughnutData = [ |
| { |
| value: 300, |
| color:"#F7464A", |
| highlight: "#FF5A5E", |
| label: "Red" |
| }, |
| { |
| value: 50, |
| color: "#46BFBD", |
| highlight: "#5AD3D1", |
| label: "Green" |
| }, |
| { |
| value: 100, |
| color: "#FDB45C", |
| highlight: "#FFC870", |
| label: "Yellow" |
| }, |
| { |
| value: 40, |
| color: "#949FB1", |
| highlight: "#A8B3C5", |
| label: "Grey" |
| }, |
| { |
| value: 120, |
| color: "#4D5360", |
| highlight: "#616774", |
| label: "Dark Grey" |
| } |
| |
| ]; |
| |
| window.onload = function(){ |
| var ctx = document.getElementById("chart-area").getContext("2d"); |
| window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive : true}); |
| }; |
| |
| |
| |
| </script> |
| </body> |
| </html> |