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: {
            labels: ['Fred','Rich','Jim','Luis','Jane','Paul','Olga','Kev','Indigo','Florence'],
            adjustable: true,
            gutterLeft: 100,
            noxaxis: true
        }
    }).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>

« Back