Working With Pie Chart in HTML5

Manish Singh
Jan 31, 2012
16.7k
0
0
Article

Introduction

This is a simple application for beginners that shows how to create a Pie Chart using HTML 5 and CSS tools. We know that HTML 5 is the advanced version of HTML. Basically HTML 5 can be used to develop 3D applications. This article is intended to help with the use of HTML5 tools to develop a simple pie chart application. We know that HTML is Hyper Text Markup Language and is used to display data in a browser. CSS is the acronym for Cascading Style Sheet that is used for design. CSS defines how HTML elements are to be displayed. Styles are normally saved in external .css files. Normally HTML is saved with a .html file extension. I hope this article helps beginners understand how to create a pie chart application using HTML 5 tools.

Step 1 : First Open a HTML editor such as Notepad.

Open start->Notepad.

The name of editor is "HTML".

Step 2 : Add a Folder on Desktop.

Right-click on desktop.

New->add folder.

Name of folder is own choice there is "Tom".

Step 3 : Open Visual Studio.

Go to file -> New->Projects.

Open an ASP. NET Web Application.

Name of "default.aspx".

Step 4 : Add a HTML file to your web application.

Right-click on Solution Explorer.

Add->add new item->HTML form.

The Name of the HTML form is "pie.html".

Step 5 : Create a design view of the pie chart page.

Code

<body>
<h1>Design a pie Chart</h1>
<table>
<tbody>
<tr>
<th scope="row">.NET Framework</th>
<td>30%</td>
</tr>
<tr>
<th scope="row">Csharp</th>
<td>15%</td>
</tr>
<tr>
<th scope="row">ASP.NET</th>
<td>15%</td>
</tr>
<tr>
<th scope="row">ADO.NET</th>
<td>10%</td>
</tr>
<tr>
<th scope="row">WPF</th>
<td>10%</td>
</tr>
<tr>
<th scope="row">WCF</th>
<td>5%</td>
</tr>
<tr>
<th scope="row">WFF</th>
<td>5%</td>
</tr>
<tr>
<th scope="row">Web Service</th>
<td>4%</td>
</tr>
<tr>
<th scope="row">Remoting</th>
<td>3%</td>
</tr>
<tr>
<th scope="row">sliverlight</th>
<td>2%</td>
</tr>
</tbody>
</table>
<div id="holder"></div>
</body>

Step 6 : Now some css and js files are used in the application.

Color.css : The css file helps set a text alignignment, position, font -size and background color feature of pie chart page.

Color.js : Color.js is a Java script file that provides a moving functionality of a every part of a pie chart page.

Color1.js : Color1.js is a Java script file that helps to do a partition according to the pixel of a pie chart page.

Color2.js : Color2.js is a Java script file that helps set a color in a pie chart table.

Used all above file in an application.

Code

   <link rel="stylesheet" href="Color.css" media="screen"/>
   <script type="text/javascript" src="Scripts/Color.js"></script>
   <script type="text/javascript" src="Scripts/color1.js"></script>
   <script type="text/javascript" src="Scripts/color2.js"></script>

Step 7 : The complete code of a pie chart application.

<html>
<head>
<title> Pie Chart application </title>
<link rel="stylesheet" href="Color.css" media="screen"/>
  <script type="text/javascript" src="Scripts/Color.js"></script>
  <script type="text/javascript" src="Scripts/color1.js"></script>
<script type="text/javascript" src="Scripts/color2.js"></script>
  <style type="text/css" media="screen">
  #holder
      {
        margin: -450px 0 0 -450px;
        width: 1000px;
        height: 1000px;
            }
  </style>
</head>
<body>
  <h1>Design a pie Chart</h1>
  <table>
<tbody>
<tr>
<th scope="row">.NET Framework</th>
<td>30%</td>
</tr>
<tr>
<th scope="row">Csharp</th>
<td>15%</td>
</tr>
<tr>
<th scope="row">ASP.NET</th>
<td>15%</td>
</tr>
<tr>
<th scope="row">ADO.NET</th>
<td>10%</td>
</tr>
<tr>
<th scope="row">WPF</th>
<td>10%</td>
</tr>
<tr>
<th scope="row">WCF</th>
<td>5%</td>
</tr>
<tr>
<th scope="row">WFF</th>
<td>5%</td>
</tr>
<tr>
<th scope="row">Web Service</th>
<td>4%</td>
</tr>
<tr>
<th scope="row">Remoting</th>
<td>3%</td>
</tr>
<tr>
<th scope="row">sliverlight</th>
<td>2%</td>
</tr>
</tbody>
</table>
<div id="holder"></div>
</body>
</html>

Step 8 : Press Ctrl+F5 to run the code in a browser.