There's a canvas version of this chart here.
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="width: 750px; height: 300px" id="cc"></div>This is the code that generates the chart:
<script> data = { shipped: [88000,88000,105000,105000,116000,116000,126000], sold: [30000,54000,54000,62000,63000,68000,68000] }; bar1 = new RGraph.SVG.Bar({ id: 'cc', data: data.shipped, options: { backgroundGridVlines: false, backgroundGridBorder: false, gutterLeft: 75, colors: ['rgba(0,0,255,0.2)'], xaxisLabels: ['Mini','Ford','Mercedes','BMW','Fiat','Renault','Honda'], labelsAbove: data.shipped, labelsAboveSize: 8, title: 'Total cars produced vs sold', strokestyle: 'rgba(0,0,0,0)', yaxis: false } }).grow(); bar2 = new RGraph.SVG.Bar({ id: 'cc', data: data.sold, options: { yaxis: false, yaxisMax: bar1.scale.max, yaxisScale: false, xaxis: false, gutterLeft: bar1.properties.gutterLeft, colors: ['pink'], labelsAbove: true, labelsAboveSize: 8, hmargin: 20, backgroundGrid: false, strokestyle: 'rgba(0,0,0,0)', shadow: true } }).grow(); </script>