A Rose chart using imported table data
|
Figure 1 |
Figure 2 |
Figure 3 |
Figure 4 |
|
Richard |
8 |
45 |
13.58 |
10 |
76.58 |
Julie |
5 |
52 |
45.12 |
10.0 |
76.58 |
Gary |
4 |
35 |
442.2 |
10.00 |
112.12 |
David |
9 |
94 |
93.257 |
10.000 |
204.257 |
Charlie |
6 |
53 |
45.277 |
10.0000 |
304.257 |
Jacky |
1 |
46 |
53.787 |
10.0000 |
104.257 |
Nevil |
8 |
99 |
91.852 |
10.00000 |
351.257 |
This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.table.js"></script>
<script src="RGraph.rose.js"></script>
Put this where you want the chart to show up:
<div style="padding: 15px">
<canvas id="cvs" width="500" height="500">[No canvas support]</canvas>
</div>
<table id="myTable">
<tr>
<th></th>
<th>Figure 1</th>
<th>Figure 2</th>
<th>Figure 3</th>
<th>Figure 4</th>
<th></th>
</tr>
<tr>
<td>Richard</td>
<td>8</td>
<td>45</td>
<td>13.58</td>
<td>10</td>
<td>76.58</td>
</tr>
<tr>
<td>Julie</td>
<td>5</td>
<td>52</td>
<td>45.12</td>
<td>10.0</td>
<td>76.58</td>
</tr>
<tr>
<td>Gary</td>
<td>4</td>
<td>35</td>
<td>442.2</td>
<td>10.00</td>
<td>112.12</td>
</tr>
<tr>
<td>David</td>
<td>9</td>
<td>94</td>
<td>93.257</td>
<td>10.000</td>
<td>204.257</td>
</tr>
<tr>
<td>Charlie</td>
<td>6</td>
<td>53</td>
<td>45.277</td>
<td>10.0000</td>
<td>304.257</td>
</tr>
<tr>
<td>Jacky</td>
<td>1</td>
<td>46</td>
<td>53.787</td>
<td>10.0000</td>
<td>104.257</td>
</tr>
<tr>
<td>Nevil</td>
<td>8</td>
<td>99</td>
<td>91.852</td>
<td>10.00000</td>
<td>351.257</td>
</tr>
</table>
This is the code that generates the chart: