如何添加更多酒吧到這個動畫jQuery，CSS和HTML條形圖

我想在我的web應用程序中使用graph explained in this website。我想用它來顯示我公司每個部門的一些月度統計數據。所以在圖例中我可以列出分區名稱（我有7個分區）。現在我想在圖中創建7個小節，但是我一直無法做到這一點。任何人都可以告訴我如何添加更多的酒吧到圖表？如何添加更多酒吧到這個動畫jQuery，CSS和HTML條形圖

我的HTML代碼：

<!doctype html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=1024"> 
     <title>Example 3 - Animated Bar Chart via jQuery</title> 
     <link rel="stylesheet" href="css/common.css"> 
     <link rel="stylesheet" href="css/03.css"> 
    </head> 

    <body> 
     <div class="toggles"> 
      <p><a href="#" id="reset-graph-button">Reset graph</a> 
      Mouse over the bars to display information.</p> 
     </div> 
     <div id="wrapper"> 
      <div class="chart"> 
       <h2>PMOD Divisions' Safety Training Record</h2> 

       <table id="data-table" border="1" cellpadding="10" cellspacing="0" summary="The effects of the zombie outbreak on the populations of endangered species from 2012 to 2016"> 
        <caption>Population in thousands</caption> 
        <thead> 
         <tr> 
          <td>&nbsp;</td> 
          <th scope="col">September</th> 
          <th scope="col">October</th> 
          <th scope="col">November</th> 
          <th scope="col">December</th> 
         </tr> 
        </thead> 
        <tbody> 
         <tr> 

          <th scope="row">A</th> 
          <td>4080</td> 
          <td>6080</td> 
          <td>6240</td> 

         </tr> 
         <tr> 
          <th scope="row">E</th> 
          <td>5680</td> 
          <td>6880</td> 
          <td>5760</td> 
         </tr> 
         <tr> 
          <th scope="row">D</th> 
          <td>1040</td> 
          <td>1760</td> 
          <td>2880</td> 
         </tr> 
         <tr> 
          <th scope="row">PE</th> 
          <td>5680</td> 
          <td>6880</td> 
          <td>5760</td> 
         </tr> 
         <tr> 
          <th scope="row">OD</th> 
          <td>5680</td> 
          <td>6880</td> 
          <td>5760</td> 
         </tr> 
         <tr> 
          <th scope="row">ES</th> 
          <td>5680</td> 
          <td>6770</td> 
          <td>5760</td> 
         </tr> 
         <tr> 
          <th scope="row">SS</th> 
          <td>5680</td> 
          <td>6880</td> 
          <td>5760</td> 
         </tr> 
        </tbody> 
       </table> 
      </div> 
     </div> 

     <!-- JavaScript at the bottom for fast page loading --> 


     <!-- Grab jQuery from Google --> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 

     <!-- Example JavaScript --> 
     <script src="js/03.js"></script> 

    </body> 
</html>

來源

2011-12-16 user1093651