Dynamic Chart

by Gopinath Kaliappan

HTML

<table 
   width="100%" border="0" cellpadding="0" cellspacing="0">
   <tbody>
      <tr>
         <td align="center">
            <table 
               width="100%" 
               border="0" 
               cellpadding="0" 
               cellspacing="0" 
               style="max-width:700px"
               >
               <tbody>
                  <tr>
                     <td align="center">
                        <table 
                           width="90%" 
                           height="240" 
                           border="0" 
                           cellpadding="0" 
                           cellspacing="0" 
                           class="wrap90" 
                           style="table-layout:fixed"
                           >
                           <tbody>
                              <tr>
                                 <td valign="bottom">
                                    <!--[if (gte mso 9)|(IE)]> 
                                    <table width="168" align="center" cellpadding="0" cellspacing="0" border="0">
                                       <tr>
                                          <td>
                                             <![endif]--> 
                                             <table width="100%" border="0" cellpadding="0" cellspacing="0" style="max-width:168px" align="center">
                                                <tbody>
                                                   <tr>
                                                      <td valign="bottom" align="center" width="50%" style="width:50%">
                                                         <table width="100%" border="0" cellpadding="0" cellspacing="0" style="width:100%" align="left">
                                                            <tbody>
                                                               <tr>
                                                                  <td>
                                     ...

CSS

.bar {
	-moz-animation: animate-bar 3s linear;
	-webkit-animation: animate-bar 3s linear;
	-ms-animation: animate-bar 3s linear;
	-o-animation: animate-bar 3s linear;
	animation: animate-bar 3s linear
}

@-moz-keyframes animate-bar {
	0% {
		width: 0
	}
}

@-webkit-keyframes animate-bar {
	0% {
		width: 0
	}
}

@-ms-keyframes animate-bar {
	0% {
		width: 0
	}
}

@-o-keyframes animate-bar {
	0% {
		width: 0
	}
}

@keyframes animate-bar {
	0% {
		width: 0
	}
}

.animate {
	-webkit-animation: animate-height;
	-moz-animation: animate-height;
	animation: animate-height;
	animation-duration: 3s;
	-webkit-animation-duration: 3s;
	-moz-animation-duration: 3s;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards
}

@-webkit-keyframes animate-height {
	0% {
		height: 0
	}
	100% {
		visibility: visible
	}
}

@-moz-keyframes animate-height {
	0% {
		height: 0
	}
	100% {
		visibility: visible
	}
}

@keyframes animate-height {
	0% {
		height: 0
	}
	100% {
		visibility: visible
	}
}