polar-area.html 997 B

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