Post
Ask Question

Client-Side Chart Widget in HTML5: Part 4 (Doughnut Chart)

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 from 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>Doughnut 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.myDoughnut = new Chart(canvasObject).Doughnut(doughnutChartData, {  
  4.     responsive: true  
  5.     });  
  6. } 
Here we are loading the chart into the myChart.
 
As you can see in the preceding code, doughnutChartData is the data we will load into the chart.
  1. var doughnutChartData = [  
  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.     }  
  32.   
  33. ];  
Properties
  • value
  • color
  • highlight
  • label
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 doughnutChartData = [  
  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.                 }  
  38.   
  39.         ];  
  40.   
  41.         window.onload = function () {  
  42.             var canvasObject = document.getElementById("myChart").getContext("2d");  
  43.             window.myDoughnut = new Chart(canvasObject).Doughnut(doughnutChartData, {  
  44.                 responsive: true  
  45.             });  
  46.         }  
  47.   
  48.     </script>  
  49. </head>  
  50. <body>  
  51.     <div>  
  52.         Doughnut 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
 


Similar Articles