Animated Chart Script Download Free Javascript Graph Generator

About

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

a) The Chart animation generator is compatible with all main browsers.
b) This script will dymanically draw the graph from the given values.
c) It automatically scales the axes.
d) Bar colors, fonts, chart colors, can be easily customised.

Preview

Enter the stats values

Firefox :

IE:

Mozilla :

Opera :

150
75
0

- denotes Firefox

- denotes IE

- denotes Mozilla

- denotes Opera

Code

 <!-- Script by hscripts.com -->
 <!-- Copyright of HIOXINDIA -->
 <!-- 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 -->

Downloads version 1.0 - chart animation

Release Date - 02-03-2009

Get free version without ©copyright link for just 5

For customization of this script or any script development, contact us at support@hscripts.com

Usage

a) Download chart animation.
b) You will get animation.js file and images.
c) If you want to animate the chart, just copy the above code and paste into your web page.
d) If you want to change the stats values, change the textbox values as your wish.
e) With this generator you can catch the viewers attention by making animated charts colourfully and meaningfully.

License

- This javascript (misspelled as java script)/HTML code 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.

Chart Animation Script