Chart Animation Script
Animated Chart script generator allows you to create a bar graph table of the data given to it. This is a graph and chart animated javascript which can be incorparated into any webpages. Just input the data of the involved elements, the animated script will chart out an XY Graph.
Features
- The Chart animation generator is compatible with all main browsers.
- This script will dymanically draw the graph from the given values.
- It automatically scales the axes.
- Bar colors, fonts, chart colors, can be easily customised.
Preview
Downloads
<!-- Script by hscripts.com -->
<!-- More scripts @www.hscripts.com -->
<html>
<head>
<script type="text/javascript" src="hchart-animation/animation.js">
</script>
</head>
<body onload="calculate_height()">
<table border=0 style='color: #3D366F;font-family: Verdana, Arial, Georgia, serif;font-size:13px;'>
<tr><td colspan=3 align="center">Enter the stats values</td></tr>
<tr><td><br></td></tr>
<tr><td>Firefox :<input id="text1" type="text" size="4" value="50"></td>
<td align=right>IE:<input id="text2" type="text" size="4" value="70"></td><td></td></tr>
<tr><td>Mozilla :<input id="text3" type="text" size="4" value="100"></td>
<td align=right>Opera :<input id="text4" type="text" size="4" value="30"></td><td></td></tr>
<tr><td><br></td></tr>
<tr>
<td>
<table id="tabhei" style='height:150;width:100;'>
<tr><td>
<table cellspacing=0 style='color: #3D366F;font-family: Verdana, Arial, Georgia, serif;font-size:13px;'><tr>
<td valign="top">150</td>
<td rowspan=3 valign="top"><img src="hchart-animation/line.gif" height=150></td>
</tr>
<tr>
<td align=right valign="middle">75</td>
</tr>
<tr>
<td align=right valign="bottom">0</td>
</tr>
</table>
</td>
<td valign=bottom>
<table id="main">
<tr>
<td valign='bottom'><img id='green' src='hchart-animation/green.gif' style='height:0px;width:15;'><span style='position:absolute; top:"0px";left:0px;font-size:11px;font-weight:bold;color:black;' id='span1'></span></td>
<td valign="bottom"><img id='blue' src='hchart-animation/blue.gif' style='height:0px;width:15;'><span style='position:absolute; top:"0px";left:0px;font-size:11px;font-weight:bold;color:black;' id='span2'></span></td>
<td valign="bottom"><img id='gray' src='hchart-animation/gray.gif' style='height:0px;width:15;'><span style='position:absolute; top:"0px";left:0px;font-size:11px;font-weight:bold;color:black;' id='span3'></span></td>
<td valign="bottom"><img id='red' src='hchart-animation/red.gif' style='height:0px;width:15;'><span style='position:absolute; top:"0px";left:0px;font-size:11px;font-weight:bold;color:black;' id='span4'></span></td>
</tr>
</table>
</td>
<td valign="bottom"><div align=center style="font-size: 10px; color:green;" id="dumdiv">
<a href="https://www.hscripts.com" id="dum" style="text-decoration:none; color: green;">H</a>
</div>
<script language="javascript">document.onload = ctck();</script>
</td></tr>
</table>
</td>
<td></td>
<td>
<table style='color: #3D366F;font-family: Verdana, Arial, Georgia, serif;font-size:13px;'>
<tr><td><img src="hchart-animation/green.gif" height=5px width=5px align=absmiddle> - denotes Firefox</td></tr>
<tr><td><img src="hchart-animation/blue.gif" height=5px width=5px align=absmiddle> - denotes IE</td></tr>
<tr><td><img src="hchart-animation/gray.gif" height=5px width=5px align=absmiddle> - denotes Mozilla</td></tr>
<tr><td><img src="hchart-animation/red.gif" height=5px width=5px align=absmiddle> - denotes Opera</td></tr>
</table>
</td>
</tr>
</table> <br> <input type="button" value="Calculate" onclick="calculate_height()"> </body> </html>
<!-- Script by hscripts.com -->
<!-- More scripts @www.hscripts.com -->
<html>
<head>
<script type="text/javascript" src="hchart-animation/animation.js">
</script>
</head>
<body onload="calculate_height()">
<table border=0 style='color: #3D366F;font-family: Verdana, Arial, Georgia, serif;font-size:13px;'>
<tr><td colspan=3 align="center">Enter the stats values</td></tr>
<tr><td><br></td></tr>
<tr><td>Firefox :<input id="text1" type="text" size="4" value="50"></td>
<td align=right>IE:<input id="text2" type="text" size="4" value="70"></td><td></td></tr>
<tr><td>Mozilla :<input id="text3" type="text" size="4" value="100"></td>
<td align=right>Opera :<input id="text4" type="text" size="4" value="30"></td><td></td></tr>
<tr><td><br></td></tr>
<tr>
<td>
<table id="tabhei" style='height:150;width:100;'>
<tr><td>
<table cellspacing=0 style='color: #3D366F;font-family: Verdana, Arial, Georgia, serif;font-size:13px;'><tr>
<td valign="top">150</td>
<td rowspan=3 valign="top"><img src="hchart-animation/line.gif" height=150></td>
</tr>
<tr>
<td align=right valign="middle">75</td>
</tr>
<tr>
<td align=right valign="bottom">0</td>
</tr>
</table>
</td>
<td valign=bottom>
<table id="main">
<tr>
<td valign='bottom'><img id='green' src='hchart-animation/green.gif' style='height:0px;width:15;'><span style='position:absolute; top:"0px";left:0px;font-size:11px;font-weight:bold;color:black;' id='span1'></span></td>
<td valign="bottom"><img id='blue' src='hchart-animation/blue.gif' style='height:0px;width:15;'><span style='position:absolute; top:"0px";left:0px;font-size:11px;font-weight:bold;color:black;' id='span2'></span></td>
<td valign="bottom"><img id='gray' src='hchart-animation/gray.gif' style='height:0px;width:15;'><span style='position:absolute; top:"0px";left:0px;font-size:11px;font-weight:bold;color:black;' id='span3'></span></td>
<td valign="bottom"><img id='red' src='hchart-animation/red.gif' style='height:0px;width:15;'><span style='position:absolute; top:"0px";left:0px;font-size:11px;font-weight:bold;color:black;' id='span4'></span></td>
</tr>
</table>
</td>
<td valign="bottom"><div align=center style="font-size: 10px; color:green;" id="dumdiv">
<a href="https://www.hscripts.com" id="dum" style="text-decoration:none; color: green;">H</a>
</div>
<script language="javascript">document.onload = ctck();</script>
</td></tr>
</table>
</td>
<td></td>
<td>
<table style='color: #3D366F;font-family: Verdana, Arial, Georgia, serif;font-size:13px;'>
<tr><td><img src="hchart-animation/green.gif" height=5px width=5px align=absmiddle> - denotes Firefox</td></tr>
<tr><td><img src="hchart-animation/blue.gif" height=5px width=5px align=absmiddle> - denotes IE</td></tr>
<tr><td><img src="hchart-animation/gray.gif" height=5px width=5px align=absmiddle> - denotes Mozilla</td></tr>
<tr><td><img src="hchart-animation/red.gif" height=5px width=5px align=absmiddle> - denotes Opera</td></tr>
</table>
</td>
</tr>
</table> <br> <input type="button" value="Calculate" onclick="calculate_height()"> </body> </html>
<!-- Script by hscripts.com -->
- Release Date - 02-03-2009
- Downloads : version 1.0 - chart animation
- Get free version without ©copyright link for just $10/-
- For customization of this script or any script development, mail to support@hscripts.com
Usage
- Download chart animation.
- You will get animation.js file and images.
- If you want to animate the chart, just copy the above code and paste into your web page.
- If you want to change the stats values, change the textbox values as your wish.
- With this generator you can catch the viewers attention by making animated charts colourfully and meaningfully.
License
- Click Here for detailed license information.
