# A customised adjustable Bar chart

This demo shows how you can make use of the onadjust RGraph event so that when you adjust one bar on the chart the others are updated with the remainder (so that they all add up to 300).

This goes in the documents header:

    <script src="RGraph.common.core.js"></script>
    <script src="RGraph.common.dynamic.js"></script>
    <script src="RGraph.bar.js"></script>

Put this where you want the chart to show up:

    <canvas id="cvs" width="800" height="300">[No canvas support]</canvas>

This is the code that generates the chart:

    <script>
        combinedMax = 300;

        bar = new RGraph.Bar({
            id: 'cvs',
            data: [180,20,20,20,20,20,20],
            options: {
                labels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
                adjustable: true,
                gutterLeft: 50,
                ymax: combinedMax,
                labelsAbove: true,
                labelsAboveSize: 18,
                labelsAboveDecimals: 1,
                textSize: 14,
                textAccessiblePointerevents: false
            }
        }).draw().on('adjust', function (obj)
        {
            var shape = RGraph.Registry.get('chart.adjusting.shape');

            // Get the value of the bar thats just been adjusted
            var index = shape.index;
            var value = bar.data[index];
            var other = (combinedMax - value) / (bar.data.length - 1);

            // Now adjust all of the other values
            for (var i=0; i<bar.data.length; ++i) {
                if (i != index) {
                    bar.data[i] = other;
                }
            }

            RGraph.redraw();
        });
    </script>