HTML 5

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.   
  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>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.     ];  
  40.     window.onload = function () {  
  41.         var canvasObject = document.getElementById("myChart").getContext("2d");  
  42.         window.myPie = new Chart(canvasObject).Pie(pieChartData);  
  43.           
  44.     }  
  45.   
  46.     </script>  
  47. </head>  
  48. <body>  
  49.     <div>  
  50.         <canvas id="myChart"></canvas>  
  51.     </div>  
  52. </body>  
  53. </html>  
Conclusion

I hope you can now create your own chart.

Output

 

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs