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.


  • 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.



<!-- Script by -->
<!-- More scripts -->
<script type="text/javascript" src="hchart-animation/animation.js">
<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>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>
<table id="tabhei" style='height:150;width:100;'>
<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>
<td align=right valign="middle">75</td>
<td align=right valign="bottom">0</td>
<td valign=bottom>
<table id="main">
<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>
<td valign="bottom"><div align=center style="font-size: 10px; color:green;" id="dumdiv">
<a href="" id="dum" style="text-decoration:none; color: green;">H</a>
<script language="javascript">document.onload = ctck();</script>
<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> <br> <input type="button" value="Calculate" onclick="calculate_height()"> </body> </html>
<!-- Script by -->
  • 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


  • 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.


Related Scripts

Free Javascript Scripts

Ask Questions

Ask Question