A customised adjustable Bar chart

Summary: A customised adjustable Bar chart. On this chart when one bar is updated the other bars are also altered so that the combined total of the bars is equal to 300.

[No canvas support]

This demo shows how you can make use of the adjust RGraph event so that when you adjust one bar on the chart the others are updated with the remainder - be it a plus or minus figure - (so that they all add up to 300).

Shown below, the code to do this is not a lot and is added in the configuration using the on() function after the draw() call.

The first thing the code does is get the shape object for the bar that's being adjusted from RGraph registry. It gets the new value of the bar, takes it off the specified maximum value (which is 300 in this example) and then shares the remainder out between the other bars and sets their values.

Finally, it redraws the chart so that the new values are shown on the chart.

It should be feasible to maintain the differences between the bars so that instead of the rest of the bars being set to the exact same value they would be set to their original value + their bit of the adjusted bar - be it a plus or a negative.

But since that's more involved I'll leave it as an exercise for the reader!

There's a Horizontal Bar demo in the download called hbar-onadjust.html that demonstrates this concept, albeit with only two bars.

The responsive() function reduces the size of the canvas, reduces the size of the text on the canvas and moves the X axis labels down a little bit. The CSS float is also removed. The dynamic nature of the chart is not altered.


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: