doughnut.html 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Doughnut Chart</title>
  5. <script src="../Chart.js"></script>
  6. <style>
  7. body{
  8. padding: 0;
  9. margin: 0;
  10. }
  11. #canvas-holder{
  12. width:30%;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <div id="canvas-holder">
  18. <canvas id="chart-area" width="500" height="500"/>
  19. </div>
  20. <script>
  21. var doughnutData = [
  22. {
  23. value: 300,
  24. color:"#F7464A",
  25. highlight: "#FF5A5E",
  26. label: "Red"
  27. },
  28. {
  29. value: 50,
  30. color: "#46BFBD",
  31. highlight: "#5AD3D1",
  32. label: "Green"
  33. },
  34. {
  35. value: 100,
  36. color: "#FDB45C",
  37. highlight: "#FFC870",
  38. label: "Yellow"
  39. },
  40. {
  41. value: 40,
  42. color: "#949FB1",
  43. highlight: "#A8B3C5",
  44. label: "Grey"
  45. },
  46. {
  47. value: 120,
  48. color: "#4D5360",
  49. highlight: "#616774",
  50. label: "Dark Grey"
  51. }
  52. ];
  53. window.onload = function(){
  54. var ctx = document.getElementById("chart-area").getContext("2d");
  55. window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive : true});
  56. };
  57. </script>
  58. </body>
  59. </html>