An adjustable HBar chart
This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.hbar.js"></script>
Put this where you want the chart to show up:
<canvas id="cvs" width="600" height="450">[No canvas support]</canvas><br />
<input id="out" type="text" style="padding: 5px; font-size: 16pt; border: 0; background-color: #efefef" size="50" />
This is the code that generates the chart:
<script>
new RGraph.HBar({
id: 'cvs',
data: [5.5,8,6,1,3,6,4,9,5, 2],
options: {
yaxisLabels: ['Fred','Rich','Jim','Luis','Jane','Paul','Olga','Kev','Indigo','Florence'],
adjustable: true,
marginLeft: 100,
xaxis: false
}
}).draw().on('adjust', function (obj)
{
obj.data.forEach(function (v, k, arr)
{
arr[k] = Math.round(v * 10) / 10;
});
document.getElementById('out').value = obj.data.join(' , ')
});
</script>