A stacked Line chart using the table reader with a right aligned key
|
Monday |
Tuesday |
Wednesday |
Thursday |
Friday |
Monday |
Tuesday |
Wednesday |
Thursday |
Friday |
Richard |
4 |
8 |
5 |
7 |
3 |
5 |
1 |
3 |
8 |
4 |
Ricky |
7 |
4 |
8 |
9 |
1 |
6 |
7 |
2 |
3 |
2 |
Rachel |
6 |
7 |
8 |
5 |
2 |
4 |
6 |
7 |
6 |
3 |
Ruth |
3 |
5 |
4 |
8 |
6 |
3 |
2 |
9 |
8 |
7 |
This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.table.js"></script>
<script src="RGraph.line.js"></script>
Put this where you want the chart to show up:
<div style="text-align: center">
<canvas id="cvs" width="750" height="350">[No canvas support]</canvas>
</div>
<style>
table {
margin-left: auto;
margin-right: auto;
font-family: Verdana;
border: 1px solid black;
}
tr:nth-child(1n+1) td:nth-child(1n+2) {
background-color: #ddd;
text-align: center;
}
</style>
<table id="myTable">
<thead>
<tr>
<th></th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
</tr>
</thead>
<tbody>
<tr>
<td>Richard</td>
<td>4</td>
<td>8</td>
<td>5</td>
<td>7</td>
<td>3</td>
<td>5</td>
<td>1</td>
<td>3</td>
<td>8</td>
<td>4</td>
</tr>
<tr>
<td>Ricky</td>
<td>7</td>
<td>4</td>
<td>8</td>
<td>9</td>
<td>1</td>
<td>6</td>
<td>7</td>
<td>2</td>
<td>3</td>
<td>2</td>
</tr>
<tr>
<td>Rachel</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>5</td>
<td>2</td>
<td>4</td>
<td>6</td>
<td>7</td>
<td>6</td>
<td>3</td>
</tr>
</tbody>
</table>
This is the code that generates the chart - it should be placed AFTER the canvas tag(s):