Client-Side Chart Widget in HTML 5: Part 2 (Pie Chart)

Introduction

Hi all, I hope you are fine. I hope you have read my first part of this series that explains about loading the Bar Chart. Today we will explain a client-side Pie Chart widget in HTML5.

Background

As you need, you need to download the files. Please download the necessary files from here.

Using the code

A simple HTML

  1. <!DOCTYPE html>
  2. <html xmlns=“http://www.w3.org/1999/xhtml”>
  3.    <head>
  4.        <title>Pie 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.myPie = new Chart(canvasObject).Pie(pieChartData);
  4.     }

Here we are loading the chart in myChart.

As you can see in the preceding code, pieChartData is the data we will load into the chart.

  1. var pieChartData = [
  2.                 {
  3.                     value: 600,
  4.                     color: “#F7464A”,
  5.                     highlight: “#FF5A5E”,
  6.                     label: “Monday”
  7.                 },
  8.                 {
  9.                     value: 150,
  10.                     color: “#46BFBD”,
  11.                     highlight: “#5AD3D1”,
  12.                     label: “Tuesday”
  13.                 },
  14.                 {
  15.                     value: 100,
  16.                     color: “#FDB45C”,
  17.                     highlight: “#FFC870”,
  18.                     label: “Wednesday”
  19.                 },
  20.                 {
  21.                     value: 400,
  22.                     color: “#949FB1”,
  23.                     highlight: “#A8B3C5”,
  24.                     label: “Thursday”
  25.                 },
  26.                 {
  27.                     value: 120,
  28.                     color: “#4D5360”,
  29.                     highlight: “#616774”,
  30.                     label: “Friday”
  31.                 }
  32.     ];

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>Pie Chart Using Chart.js</title>
  5.     <script src=“Chart.js”></script>
  6.     <script>
  7.     var pieChartData = [
  8.                 {
  9.                     value: 600,
  10.                     color: “#F7464A”,
  11.                     highlight: “#FF5A5E”,
  12.                     label: “Monday”
  13.                 },
  14.                 {
  15.                     value: 150,
  16.                     color: “#46BFBD”,
  17.                     highlight: “#5AD3D1”,
  18.                     label: “Tuesday”
  19.                 },
  20.                 {
  21.                     value: 100,
  22.                     color: “#FDB45C”,
  23.                     highlight: “#FFC870”,
  24.                     label: “Wednesday”
  25.                 },
  26.                 {
  27.                     value: 400,
  28.                     color: “#949FB1”,
  29.                     highlight: “#A8B3C5”,
  30.                     label: “Thursday”
  31.                 },
  32.                 {
  33.                     value: 120,
  34.                     color: “#4D5360”,
  35.                     highlight: “#616774”,
  36.                     label: “Friday”
  37.                 }
  38.     ];
  39.     window.onload = function () {
  40.         var canvasObject = document.getElementById(“myChart”).getContext(“2d”);
  41.         window.myPie = new Chart(canvasObject).Pie(pieChartData);
  42.     }
  43.     </script>
  44. </head>
  45. <body>
  46.     <div>
  47.         <canvas id=“myChart”></canvas>
  48.     </div>
  49. </body>
  50. </html>

Conclusion

I hope you can now create your own chart.

Output

 

Leave a Reply

Your email address will not be published. Required fields are marked *

Serverless 360