A segmented Bar chart

An interesting variation on a regular Bar chart. It's actually two Bar charts - the first is drawn without axes or a background grid and then lines are drawn over the bars. This gives us the segmented effect. Then another Bar chart is drawn on top of this with the bars zeroed out so it just has the grid and the axes that you see.

This goes in the documents header:

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

Put this where you want the chart to show up:

<div style="position: relative; padding: 15px; display: inline-block; width: 750px; height: 300px">
    <div style="width: 750px; height: 300px; top: 0; left: 0; position: absolute" id="chart-container1"></div>
    <div style="width: 750px; height: 300px; top: 0; left: 0; position: absolute" id="chart-container2"></div>
</div>

This is the code that generates the chart: