Step 1 : First open a HTML editor such as Notepad.
- Open start->Notepad.
- The name of editor is "chart".
Step 2 : Create a Folder on a desktop.
- Right-click on desktop->new->Folder.
- Name of folder is "demo".
Step 3 : Open Visual Studio.
- Go to file -> New->Projects.
- Crete an ASP. NET Web Application.
- Name of "interactive.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 "slide.html".
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 a interactive chart body.
Code
body
{
background: #fff;
color:Green;
font: 100.1% Verdana;
}
#holder
{
height:500px;
left: 70%;
margin: 0 0 0 -420px;
position:relative;
top: 1;
width: 540px;
}
#copy
{
bottom: 0;
font-size: .9em;
position:relative;
right: 3em;
text-align:right;
}
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.
<link rel="stylesheet" href="R1.css" media="screen"/>
<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
function drawPath()
{
var p = [];
for (var j = 1, jj = X.length; j < jj; j++)
{
p.push(X[j], Y[j]);
}
p = ["M", X[0], Y[0], "R"].concat(p);
var subaddon = "L" + (ptx - 10) + "," + (ctx - 10) + ",50," + (ctx - 10) + "z";
path.attr({ path: p });
sub.attr({ path: p + subaddon });
}
Step 8 : In this step we define a function to set a color, blankets and buttons of an interactive chart application.
Code
var p = [["M"].concat(translate(0, values[0]))],
color = "hsb(100°, 2, 2)",
X = [],
Y = [],
blankets = r.set(),
buttons = r.set(),
w = (ptx - 60) / values.length,
isDrag = -1,
start = null,
sub = r.path().attr({ stroke: "none", fill: [90, color, color].join("-"), opacity: 0 }),
path = r.path().attr({ stroke: color, "stroke-width": 2 })
Step 9 : Press Ctrl+ F5 to run the code; the output is shown below.
Resources
Here is some useful resources