A segmented Bar chart
Summary: A Bar chart that demonstrates the RGraph.SegmentedBar custom class that's a part of the RGraph.bar.js file. There are two canvas tags in use but the code side of things is done by the custom class.
Previously this type of chart was achievable, but required custom coding. Now however (as of version 5.23) there is a custom class that does all of the necessary customisation for you. All you need to do is add the display customisations (as shown below).
The rear canvas shows a Bar chart just as the front one does but without any data - so you can just see the grid.
The front canvas draws the Bar
chart - and then a custom
draw event uses the standard canvas
function to return bits of the top canvas back to transparency. So
the grid on the rear canvas then shows through.
All of this is done by the
RGraph.SegmentedBar custom class so, again, you just need to
responsive() function on the object just resizes the canvas tag and the parent
container DIV tag.
<script src="RGraph.common.core.js"></script> <script src="RGraph.bar.js"></script>Put this where you want the chart to show up:
<div style="display: inline-block; position: relative; width: 600px; height: 250px; float: left"> <canvas id="cvs1" width="600" height="250" style="position:absolute; top: 0; left: 0">[No canvas support]</canvas> <canvas id="cvs2" width="600" height="250" style="position:absolute; top: 0; left: 0">[No canvas support]</canvas> </div>This is the code that generates the chart: