A Horizontal Bar chart showing election results
This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.tooltips.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.hbar.js"></script>
Put this where you want the chart to show up:
<canvas id="cvs" width="1000" height="400">
[No canvas support]
</canvas>
This is the code that generates the chart:
<script>
new RGraph.HBar({
id: 'cvs',
data: [408,242],
options: {
yaxisLabels: ['Leave','Remain'],
marginInner: 50,
xaxis: false,
axesColor: '#ccc',
xaxisLabelsCount: 18,
textColor: '#666',
backgroundGridBorder: false,
backgroundGridHlines: false,
backgroundGridVlinesCount: 18,
labelsAbove: true,
tooltips: [
'Seats: <b>408</b><br /><span style="color: #666">The Leave campaign won a significant<br />majority with a total of 408 seats.</span>',
'Seats: <b>242</b><br /><span style="color: #666">The Remain campaign fought valiantly<br />but, alas, it was to no avail.</span>'
],
highlightFill: 'rgba(255,255,255,0.4)',
title: 'Leave vs Remain - General election seats won based on EU referendum results',
titleBold: true,
titleSize: 18,
titleX: 75,
titleHalign: 'left',
titleColor: 'gray'
}
}).grow();
RGraph.tooltips.style.textAlign = 'left';
</script>