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: 300px; height: 250px; border-radius: 6px; background-image: linear-gradient(45deg, black, blue, black); box-shadow: #aaa 2px 2px 2px" id="cc"></div>This is the code that generates the chart:
<script>
scores = [50,20,15,15];
var bar = new RGraph.SVG.Bar({
id: 'cc',
data: RGraph.SVG.arrayClone(scores),
options: {
backgroundGridLinewidth: 3,
backgroundGridColor: '#6A93CA',
backgroundGridVlinesCount: 8,
backgroundGridHlinesCount: 10,
xaxis: false,
yaxis: false,
colors: ['#F874EE'],
gutterLeft: 10,
gutterRight: 10,
gutterTop: 30,
gutterBottom: 45,
yaxisMax: 100,
xaxisLabels: ['A','B','C','D'],
xaxisTextSize: 26,
xaxisTextColor: 'yellow'
}
}).grow();
// Add the text that gives the percentages
for (var i=0; i<scores.length; ++i) {
RGraph.SVG.text({
object: bar,
text: scores[i] + '%',
x: bar.coords[i].x + (bar.coords[i].width / 2),
y: bar.properties.gutterTop - 6,
color: 'white',
halign: 'center',
size: 18
});
}
</script>