HTML 5

Client Side Chart Widget in HTML5: Part 5 (Polar Area 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 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.     }    
  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 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.                 }    
  38.     
  39.         ];    
  40.     
  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.         }    
  47.     
  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
 

Up Next
    Ebook Download
    View all
    Learn
    View all
    Membership not found