Post
Ask Question

Working With Pie Chart in HTML5

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 HyperText 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 an HTML editor such as Notepad.
  • Open start->Notepad.
  • The name of the editor is "HTML."
notepad.gif
 
Step 2: Add a Folder on Desktop.
  • Right-click on desktop.
  • New->add folder.
  • Name of the folder is own choice there is "Tom".
folder.gif
 
Step 3: Open Visual Studio.
  • Go to file -> New->Projects.
  • Open an ASP. NET Web Application.
  • Name of "default.aspx".
new application.gif
 
openapplication.gif
 
Step 4: Add an 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".
html.gif
 
Step 5: Create a design view of the pie chart page.
 
Code
  1. <body>  
  2.     <h1>Design a pie Chart</h1>  
  3.     <table>  
  4.         <tbody>  
  5.             <tr>  
  6.                 <th scope="row">.NET Framework</th>  
  7.                 <td>30%</td>  
  8.             </tr>  
  9.             <tr>  
  10.                 <th scope="row">Csharp</th>  
  11.                 <td>15%</td>  
  12.             </tr>  
  13.             <tr>  
  14.                 <th scope="row">ASP.NET</th>  
  15.                 <td>15%</td>  
  16.             </tr>  
  17.             <tr>  
  18.                 <th scope="row">ADO.NET</th>  
  19.                 <td>10%</td>  
  20.             </tr>  
  21.             <tr>  
  22.                 <th scope="row">WPF</th>  
  23.                 <td>10%</td>  
  24.             </tr>  
  25.             <tr>  
  26.                 <th scope="row">WCF</th>  
  27.                 <td>5%</td>  
  28.             </tr>  
  29.             <tr>  
  30.                 <th scope="row">WFF</th>  
  31.                 <td>5%</td>  
  32.             </tr>  
  33.             <tr>  
  34.                 <th scope="row">Web Service</th>  
  35.                 <td>4%</td>  
  36.             </tr>  
  37.             <tr>  
  38.                 <th scope="row">Remoting</th>  
  39.                 <td>3%</td>  
  40.             </tr>  
  41.             <tr>  
  42.                 <th scope="row">sliverlight</th>  
  43.                 <td>2%</td>  
  44.             </tr>  
  45.         </tbody>  
  46.     </table>  
  47.     <div id="holder"></div>  
  48. </body>  
design.gif
 
Step 6 : Now some CSS and js files are used in the application.
  • Color.css: The CSS file helps set text alignment, position, font -size, and background color feature of the pie chart page.
  • Color.js : Color.js is a Javascript file that provides a moving functionality of every part of a pie chart page.
  • Color1.js : Color1.js is a Javascript file that helps to do a partition according to the pixel of a pie chart page.
  • Color2.js :  Color2.js is a Javascript file that helps set a color in a pie chart table.
  • Used all above file in an application.
Code 
  1. <link rel="stylesheet" href="Color.css" media="screen"/>  
  2. <script type="text/javascript" src="Scripts/Color.js"></script>  
  3. <script type="text/javascript" src="Scripts/color1.js"></script>  
  4. <script type="text/javascript" src="Scripts/color2.js"></script>  
Step 7 : The complete code of a pie chart application.
  1. <html>  
  2.     <head>  
  3.         <title> Pie Chart application </title>  
  4.         <link rel="stylesheet" href="Color.css" media="screen"/>  
  5.         <script type="text/javascript" src="Scripts/Color.js"></script>  
  6.         <script type="text/javascript" src="Scripts/color1.js"></script>  
  7.         <script type="text/javascript" src="Scripts/color2.js"></script>  
  8.         <style  type="text/css" media="screen">  
  9.   #holder  
  10.       {  
  11.         margin: -450px 0 0 -450px;  
  12.         width: 1000px;  
  13.         height: 1000px;  
  14.             }  
  15.   </style>  
  16.     </head>  
  17.     <body>  
  18.         <h1>Design a pie Chart</h1>  
  19.         <table>  
  20.             <tbody>  
  21.                 <tr>  
  22.                     <th scope="row">.NET Framework</th>  
  23.                     <td>30%</td>  
  24.                 </tr>  
  25.                 <tr>  
  26.                     <th scope="row">Csharp</th>  
  27.                     <td>15%</td>  
  28.                 </tr>  
  29.                 <tr>  
  30.                     <th scope="row">ASP.NET</th>  
  31.                     <td>15%</td>  
  32.                 </tr>  
  33.                 <tr>  
  34.                     <th scope="row">ADO.NET</th>  
  35.                     <td>10%</td>  
  36.                 </tr>  
  37.                 <tr>  
  38.                     <th scope="row">WPF</th>  
  39.                     <td>10%</td>  
  40.                 </tr>  
  41.                 <tr>  
  42.                     <th scope="row">WCF</th>  
  43.                     <td>5%</td>  
  44.                 </tr>  
  45.                 <tr>  
  46.                     <th scope="row">WFF</th>  
  47.                     <td>5%</td>  
  48.                 </tr>  
  49.                 <tr>  
  50.                     <th scope="row">Web Service</th>  
  51.                     <td>4%</td>  
  52.                 </tr>  
  53.                 <tr>  
  54.                     <th scope="row">Remoting</th>  
  55.                     <td>3%</td>  
  56.                 </tr>  
  57.                 <tr>  
  58.                     <th scope="row">sliverlight</th>  
  59.                     <td>2%</td>  
  60.                 </tr>  
  61.             </tbody>  
  62.         </table>  
  63.         <div id="holder"></div>  
  64.     </body>  
  65. </html>  
Step 8 : Press Ctrl+F5 to run the code in a browser.
 
Output
 
 output2.gif
 
 output1.gif
 
Resources

Similar Articles