Post
Ask Question

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

<!DOCTYPE html>  
<html xmlns="http://www.w3.org/1999/xhtml">  
   <head>  
       <title>Pie Chart Using Chart.js</title>  
   </head>  
   <body>
   </body>  
</html>

Included JavaScript file

<script src="Chart.js"></script>

Call the Chart Function

window.onload = function () {  
    var canvasObject = document.getElementById("myChart").getContext("2d");  
    window.myPie = new Chart(canvasObject).Pie(pieChartData);   
}

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.

var pieChartData = [
    {
        value: 600,
        color: "#F7464A",
        highlight: "#FF5A5E",
        label: "Monday"
    },
    {
        value: 150,
        color: "#46BFBD",
        highlight: "#5AD3D1",
        label: "Tuesday"
    },
    {
        value: 100,
        color: "#FDB45C",
        highlight: "#FFC870",
        label: "Wednesday"
    },
    {
        value: 400,
        color: "#949FB1",
        highlight: "#A8B3C5",
        label: "Thursday"
    },
    {
        value: 120,
        color: "#4D5360",
        highlight: "#616774",
        label: "Friday"
    }
];

Properties

  • value
  • color
  • highlight
  • label

Here you can change the properties as you want.

Complete HTML

<!DOCTYPE html>  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <title>Pie Chart Using Chart.js</title>  
    <script src="Chart.js"></script>  
    <script>  
        var pieChartData = [  
            {  
                value: 600,  
                color: "#F7464A",  
                highlight: "#FF5A5E",  
                label: "Monday"  
            },  
            {  
                value: 150,  
                color: "#46BFBD",  
                highlight: "#5AD3D1",  
                label: "Tuesday"  
            },  
            {  
                value: 100,  
                color: "#FDB45C",  
                highlight: "#FFC870",  
                label: "Wednesday"  
            },  
            {  
                value: 400,  
                color: "#949FB1",  
                highlight: "#A8B3C5",  
                label: "Thursday"  
            },  
            {  
                value: 120,  
                color: "#4D5360",  
                highlight: "#616774",  
                label: "Friday"  
            }  
        ];  
        window.onload = function () {  
            var canvasObject = document.getElementById("myChart").getContext("2d");  
            window.myPie = new Chart(canvasObject).Pie(pieChartData);  
        }  
    </script>  
</head>  
<body>  
    <div>  
        <canvas id="myChart"></canvas>  
    </div>  
</body>  
</html>

Conclusion

I hope you can now create your own chart.

Output

Output


Similar Articles