A Horizontal Bar chart with formatted tooltips
Here's a Horizontal Bar chart
indicating the 2016 UK referendum results. Let's not dwell on the
disastrous nature of the vote though and look at the chart, shall we?
It has a high marginInner
setting - though the bars are still quite thick
due to the height of the chart and the fact that there are only two values that are being
represented.
It uses the labelsAbove
setting, has tooltips
and the number of x-axis
labels has been increased. The number of vertical background grid lines has been increased to match
the number of labels.
The responsive
function reduces the size of the chart, the text that's on the chart,
slightly reduces the marginInner
and reduces the number of x-axis
labels that you see.
It also removes the css
float
on the canvas
tag.
This demo shows the new formatted tooltips feature - which allows you to specify the tooltips as a string instead of an array of tooltips:
... tooltips: '%{function:getTooltip(%{dataset})}' ...
The getTooltip
function is called with the group ID given as an argument and
that function looks like this:
// Format and return the correct tooltip
function getTooltip(group)
{
var results = [
[408,'The "Leave" campaign won a significant<br />majority with a total of 408 seats.'],
[242, 'The "Remain" campaign fought valiantly<br />but, alas, it was to no avail.']
];
return 'Seats: <b>{1}</b><br /><span style="color: #666">{2}</span>'.format(
results[group][0],
results[group][1]
);
}
This function returns the correct text based on the group ID that is given and that text is then used as the tooltip.
And finally, it's animated using the grow
effect - which is a linear growing effect.
<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:
<div style="float: right"> <canvas id="cvs" width="600" height="275">[No canvas support]</canvas> </div>This is the code that generates the chart - it should be placed AFTER the
canvas
tag(s):
<script> // // This the function that builds and returns the // correct tooltip based on the group ID that is // passed to it function getTooltip(group) { var results = [ [408,'The "Leave" campaign won a significant<br />majority with a total of 408 seats.'], [242, 'The "Remain" campaign fought valiantly<br />but, alas, it was to no avail.'] ]; return 'Seats: <b>{1}</b><br /><span style="color: #ccc">{2}'.format( results[group][0], results[group][1] ); } // A pretty standard Horizontal Bar chart which has two bars that are // showing the results of the 2016 UK Europe referendum/disaster. The // tooltips have HTML in them which is fine because tooltips are // actually just <div> tags. new RGraph.HBar({ id: 'cvs', data: [408,242], options: { xaxisLabelsSize: 10, yaxisLabels: ['Leave','Remain'], marginTop: 70, xaxis: false, yaxisColor: '#ccc', backgroundGridBorder: false, backgroundGridHlines: false, backgroundGridVlinesCount: 18, labelsAbove: true, tooltips: '%{function:getTooltip(%{dataset})}', tooltipsCss: { fontFamily: 'Arial', fontSize: '14pt' }, // Use the newer highlight inverting so that the bars that aren't highlighted // are faded out. highlightStyle: 'invert', highlightFill: 'rgba(255,255,255,0.85)', titleBold: true, titleY: '-10', titleHalign: 'center', titleColor: 'gray', responsive: [ {maxWidth: null, width: 600,height: 275,options: {titleSize: 18,textSize: 14,marginInner: 25,xaxisLabelsCount: 18, title: 'Leave vs Remain - General election seats won\r\nbased on EU referendum results',},parentCss:{'float':'right',textAlign:'none'}}, {maxWidth: 700, width: 400,height: 225,options: {titleSize: 14,textSize: 12,marginInner: 15,xaxisLabelsCount: 9,title: 'Leave vs Remain - General election seats\r\nbased on EU referendum results',},parentCss:{'float':'none',textAlign:'center'}} ] } // Use the grow() animation effect }).grow(); // This is a way to specify CSS values for the tooltips. You // should use the JavaScript versions of the CSS names (ie // hyphens are replaced with capital letters as shown below). // A few names are significantly different (eg "float" // becomes "cssFloat") RGraph.tooltips.style.textAlign = 'left'; </script>