An SVG dual-color Bar chart

This goes in the documents header:
<script src="RGraph.svg.common.core.js"></script>
<script src="RGraph.svg.common.tooltips.js"></script>
<script src="RGraph.svg.bar.js"></script>
Put this where you want the chart to show up:
<style>
    #container {
        position: relative;
        width: 700px;
        height: 300px;
    }
    
    #wrapper1 {
        position: absolute;
        top: 0;
        left: 0;
        width: 700px;
        height: 150px;
        overflow: hidden;
    }
    
    #wrapper2 {
        position: absolute;
        top: 150px;
        left: 0;
        width: 700px;
        height: 150px;
        overflow: hidden;
    }
    
    #cc1 {
        width: 700px;
        height: 300px;
        position: absolute;
        top: 0;
        left: 0;
    }
    
    #cc2 {
        width: 700px;
        height: 300px;
        position: absolute;
        top: -150px;
        left: 0;
    }
</style>

<div id="container">
    <div id="wrapper1">   <div id="cc1"></div>   </div>
    <div id="wrapper2">   <div id="cc2"></div>   </div>
</div>
This is the code that generates the chart - it should be placed AFTER the <div> tag: