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
