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="http://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 $5/-
  • 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

  • The javascript (misspelled as java script) is given under GPL License.
  • i.e. Free use for those who use it as it is.
  • Free, if your modification does not remove our copyright information and links.
  • Detailed License information can be found here.
  • You can purchase the script if your requirements does not meet GPL License terms.

Related Scripts

Free Javascript Scripts