A Radar chart with interactive sliders
This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.radar.js"></script>
Put this where you want the chart to show up:
<style>
input[type=range] {
width: 250px;
}
</style>
<table border="1" style="float: left" cellspacing="0">
<tr> <td>Skill 1</td> <td><input type="range" min="1" max="10" value="6" id="range_0" oninput="updateRadar(this)"/></td></tr>
<tr> <td>Skill 2</td> <td><input type="range" min="1" max="10" value="3" id="range_1" oninput="updateRadar(this)"/></td></tr>
<tr> <td>Skill 3</td> <td><input type="range" min="1" max="10" value="7" id="range_2" oninput="updateRadar(this)"/></td></tr>
<tr> <td>Skill 4</td> <td><input type="range" min="1" max="10" value="5" id="range_3" oninput="updateRadar(this)"/></td></tr>
<tr> <td>Skill 5</td> <td><input type="range" min="1" max="10" value="7" id="range_4" oninput="updateRadar(this)"/></td></tr>
<tr> <td>Skill 6</td> <td><input type="range" min="1" max="10" value="2" id="range_5" oninput="updateRadar(this)"/></td></tr>
<tr> <td>Skill 7</td> <td><input type="range" min="1" max="10" value="8" id="range_6" oninput="updateRadar(this)"/></td></tr>
<tr> <td>Skill 8</td> <td><input type="range" min="1" max="10" value="8" id="range_7" oninput="updateRadar(this)"/></td></tr>
<tr> <td>Skill 9</td> <td><input type="range" min="1" max="10" value="5" id="range_8" oninput="updateRadar(this)"/></td></tr>
<tr> <td>Skill 10</td> <td><input type="range" min="1" max="10" value="4" id="range_9" oninput="updateRadar(this)"/></td></tr>
<tr> <td>Skill 11</td> <td><input type="range" min="1" max="10" value="6" id="range_10" oninput="updateRadar(this)"/></td></tr>
<tr> <td>Skill 12</td> <td><input type="range" min="1" max="10" value="9" id="range_11" oninput="updateRadar(this)"/></td></tr>
</table>
<canvas id="cvs" width="800" height="450">[No canvas support]</canvas>>
This is the code that generates the chart - it should be placed AFTER the canvas tag(s):
This is the code that generates the chart - it should be placed AFTER the canvas tag(s):