Introduction

I hope you have read my first two articles in this series that explain the loading of a Bar Chart, Pie Chart, and Doughnut Chart. Please see the following links.
Now we will explain a client-side Doughnut Chart widget in HTML5.
Background
Please download the necessary files here http://www.chartjs.org/.
Using the code
A simple HTML
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title> Polar Area Chart Using Chart.js</title>
  5. </head>
  6. <body></body>
  7. </html>
Included JavaScript file
  1. <script src="Chart.js"></script>
Call the Chart Function
  1. window.onload = function () {
  2. var canvasObject = document.getElementById("myChart").getContext("2d");
  3. window.myPolarArea = new Chart(canvasObject).PolarArea(polarChartData, {
  4. responsive: true
  5. });
  6. }
Here we are loading the chart in myChart.
As you can see in the preceding code, polarChartData is the data we will load into the chart.
  1. var polarChartData = [
  2. {
  3. value: 200,
  4. color: "#F7464A",
  5. highlight: "#FF5A5E",
  6. label: "Monday"
  7. },
  8. {
  9. value: 50,
  10. color: "#46BFBD",
  11. highlight: "#5AD3D1",
  12. label: "Tuesday"
  13. },
  14. {
  15. value: 150,
  16. color: "#FDB45C",
  17. highlight: "#FFC870",
  18. label: "Wednesday"
  19. },
  20. {
  21. value: 20,
  22. color: "#949FB1",
  23. highlight: "#A8B3C5",
  24. label: "Saturday"
  25. },
  26. {
  27. value: 400,
  28. color: "#4D5360",
  29. highlight: "#616774",
  30. label: "Sunday"
  31. }
  33. ];
Properties
Here you can change the properties as you want.
Complete HTML
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>Doughnut Chart Using Chart.js</title>
  5. <script src="Chart.js"></script>
  6. <script>
  7. var polarChartData = [
  8. {
  9. value: 200,
  10. color: "#F7464A",
  11. highlight: "#FF5A5E",
  12. label: "Monday"
  13. },
  14. {
  15. value: 50,
  16. color: "#46BFBD",
  17. highlight: "#5AD3D1",
  18. label: "Tuesday"
  19. },
  20. {
  21. value: 150,
  22. color: "#FDB45C",
  23. highlight: "#FFC870",
  24. label: "Wednesday"
  25. },
  26. {
  27. value: 20,
  28. color: "#949FB1",
  29. highlight: "#A8B3C5",
  30. label: "Saturday"
  31. },
  32. {
  33. value: 400,
  34. color: "#4D5360",
  35. highlight: "#616774",
  36. label: "Sunday"
  37. }
  39. ];
  41. window.onload = function () {
  42. var canvasObject = document.getElementById("myChart").getContext("2d");
  43. window.myPolarArea = new Chart(canvasObject).PolarArea(polarChartData, {
  44. responsive: true
  45. });
  46. }
  48. </script>
  49. </head>
  50. <body>
  51. <div>
  52. Polar Area Chart @ <a href="www.sibeeshpassion.com">Sibeesh Passion</a>
  53. <canvas id="myChart"></canvas>
  54. </div>
  55. </body>
  56. </html>

Conclusion

I hope you can now create your own chart.
Output
Output