A customised, adjustable Bar chart
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).
As 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 the 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 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:
<div> <canvas id="cvs" width="600" height="250">[No canvas support]</canvas> </div>This is the code that generates the chart - it should be placed AFTER the
canvas
tag(s):
<script> // This is the combined maximum value of all of the bars on the chart. combinedMax = 300; // Create the Bar chart and configure it with the maximum Y value set to the // combined maximum value. The Bar chart is configured to be adjustable. bar = new RGraph.Bar({ id: 'cvs', data: [180,20,20,20,20,20,20], options: { xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'], adjustable: true, marginLeft: 50, yaxisScaleMax: combinedMax, labelsAbove: true, labelsAboveDecimals: 1, responsive: [ {maxWidth: null,width:600,height:300,options: {labelsAboveSize: 14,textSize: 14},parentCss:{'float':'right',textAlign:'none'}}, {maxWidth: 900,width:400,height:200,options: {labelsAboveSize: 10,textSize: 10},parentCss:{'float':'none',textAlign:'center'}} ] } // Here's the adjust event that changes the bars based on the one thats being // adjusted and what it has been adjusted to. }).draw().on('adjust', function (obj) { // Get the shape object of the bar that's being adjusted from the // RGraph registry. You too can use the RGraph registry if you // have some settings to store. var shape = RGraph.Registry.get('adjusting.shape'); // Get the new value of the bar that's just been adjusted and then // calculate what the value is that the other bars should be set to. var dataset = shape.dataset; var value = bar.data[dataset]; var other = (combinedMax - value) / (bar.data.length - 1); // Now adjust all of the values of the bars that aren't being // adjusted. for (var i=0; i<bar.data.length; ++i) { if (i != dataset) { bar.data[i] = other; } } RGraph.redraw(); }); </script>