A segmented Bar chart
Summary: A Bar chart using two canvas tags to achieve a segmented effect to it. The background grid is drawn on the rear canvas and the bars on the front canvas.
This type of chart isn't supported natively but is quite easy to achieve with two canvas tags that are positioned so that one is on top of the other (the HTML code for this is shown below).
The rear canvas draws the same Bar chart as the front one 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.
There's detailed information in the sample code that's shown below.
Because there's actually two canvas tags in use along with two RGraph objects, there are two
responsive() definitions - one to resize the background grid and one to resize
responsive() function on the background grid RGraph object just resizes the
responsive() function on the other RGraph object changes the
marginInner setting and moves the Y axis text up a little.
<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="padding: 15px; display: inline-block; position: relative; width: 600px; height: 250px; float: right"> <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: