Post
Ask Question

Create Interactive Chart Using a HTML 5

Introduction

 
This is a simple application for beginners that shows how to create interactive charts 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 interactive chat applications. CSS is the acronym for Cascading Style Sheet that is used for design. CSS defines how HTML elements are to be displayed. Canvas is an important tag of an HTML 5 that is used to show the image and text in an HTML 5 application. I hope this article helps to create interactive chart applications using HTML 5 and CSS tools.
 
Step 1: First open an HTML editor such as Notepad.
  • Open start->Notepad.
  • The name of the editor is "chart".
wakakakakak.gif
 
Step 2: Create a Folder on a desktop. 
  • Right-click on desktop->new->Folder.
  • The name of the folder is "demo".
folder.gif
 
Step 3: Open Visual Studio.
  • Go to file -> New->Projects.
  • Create an ASP. NET Web Application.
  • Name of "interactive.aspx".
new.gif
 
webapplication.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 "slide.html".
html.gif
 
Step 5: Now in this step we add a CSS file that sets all properties of an interactive chart body. Through CSS we set color, size and font properties of an interactive chart body.
 
Code
  1. body  
  2. {  
  3.     background: #fff;  
  4.     color:Green;  
  5.     font: 100.1% Verdana;  
  6. }  
  7. #holder  
  8. {  
  9.     height:500px;  
  10.     left: 70%;  
  11.     margin: 0 0 0 -420px;  
  12.     position:relative;  
  13.     top: 1;  
  14.     width: 540px;  
  15. }  
  16. #copy  
  17. {  
  18.     bottom: 0;  
  19.     font-size: .9em;  
  20.     position:relative;  
  21.     right: 3em;  
  22.     text-align:right;  
  23. } 
Step 6 : Add a JavaScript file to the application. The P1.js file provides the functionality of moving interactive chart. Set a R1.css that sets color, size and font properties of an interactive chart body.
 
body.gif
 
  1. <link rel="stylesheet" href="R1.css" media="screen"/>  
  2. <script type="text/javascript" src="Scripts/P1.js"></script>  
Step 7: Now in this step we define a draw path function. In the function we define a path alignment of an interactive chart application.
 
Code
  1. function drawPath()  
  2. {  
  3.      var p = [];  
  4.      for (var j = 1, jj = X.length; j < jj; j++)  
  5. {  
  6.      p.push(X[j], Y[j]);  
  7.           }  
  8.      p = ["M", X[0], Y[0], "R"].concat(p);  
  9.      var subaddon = "L" + (ptx - 10) + "," + (ctx - 10) + ",50," + (ctx - 10) + "z";  
  10.      path.attr({ path: p });  
  11.      sub.attr({ path: p + subaddon });  
  12.    } 
Step 8: In this step, we define a function to set a color, blankets, and buttons of an interactive chart application.
 
Code
  1. var p = [["M"].concat(translate(0, values[0]))],  
  2.     color = "hsb(100°, 2, 2)",  
  3.     X = [],  
  4.     Y = [],  
  5.     blankets = r.set(),  
  6.     buttons = r.set(),  
  7.     w = (ptx - 60) / values.length,  
  8.     isDrag = -1,  
  9.     start = null,  
  10.     sub = r.path().attr({ stroke: "none", fill: [90, color, color].join("-"), opacity: 0 }),  
  11.     path = r.path().attr({ stroke: color, "stroke-width": 2 }) 
Step 9: Press Ctrl+ F5 to run the code; the output is shown below.
 
1.gif
3.gif
 
4.gif
2.gif
Resources
 
Here are some useful resources


Similar Articles