I am trying to use the graph explained in this website in my web application. I want to use it to show some monthly statistics for each division in my company. So in the legend I could be able to list the divisions names (I have 7 divisions). Now I want to create 7 bars in the graph, but I have not been able to do that. Could anyone tell me how to add more bars to the graph?
My HTML code:
<!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> </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>
You can just add an extra rows to the table, like you did.
What rest is CSS styling. You need to refine the width attribute of a couple classes: legend, x-axis and so on.
You also need to define fig-classes for each bar, see .fig0 .fig1 and so on.
See 03.css: http://provide.smashingmagazine.com/graph_tut_files/css/03.css
See common.css: http://provide.smashingmagazine.com/graph_tut_files/css/common.css