Doughnut Chart – Sibeesh Passion https://mail.sibeeshpassion.com My passion towards life Fri, 17 Jul 2015 12:47:57 +0000 en-US hourly 1 https://wordpress.org/?v=6.9.4 /wp-content/uploads/2017/04/Sibeesh_Passion_Logo_Small.png Doughnut Chart – Sibeesh Passion https://mail.sibeeshpassion.com 32 32 Client-Side Chart Widget in HTML5: Part 4 (Doughnut Chart) https://mail.sibeeshpassion.com/client-side-chart-widget-in-html5-part-4-doughnut-chart/ https://mail.sibeeshpassion.com/client-side-chart-widget-in-html5-part-4-doughnut-chart/#disqus_thread Thu, 29 Jan 2015 19:52:26 +0000 https://sibeeshpassion.com/?p=1081 Introduction

I hope you have read my first two articles in this series that explains 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.     }
  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.                 }
  39.         ];
  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.         }
  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

]]> https://mail.sibeeshpassion.com/client-side-chart-widget-in-html5-part-4-doughnut-chart/feed/ 0