Popular coding languages
This Horizontal Bar chart
does not use the yaxisLabels
option
but instead has a minimal marginLeft
setting and then uses some
custom code in the draw
event to manually draw some labels. It also
uses the labelsAbove
option to indicate the percentages for each bar.
The grow
effect is employed to animate the chart.
If the draw
event wasn't used and the labels were simply
added after the chart had been drawn then they would
disappear when the canvas
is cleared for the second frame of the
animation. And that happens so fast that it would seem like they
just aren't being drawn.
The responsive
function doesn't do much - it simply changes the width and height of
the canvas
tag and changes the css
float
that's applied to the container of the canvas
.
This chart has been updated in March 2020 to add tooltips that use formatting and the highlighting color has been updated to a gradient so that the labels on the left-hand-side are unobscured.
This goes in the documents header:<script src="RGraph.common.core.js"></script> <script src="RGraph.common.dynamic.js"></script> <script src="RGraph.common.tooltips.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="350">[No canvas support]</canvas> </div>This is the code that generates the chart - it should be placed AFTER the
canvas
tag(s):
<script> // The labels for the chart are not added by giving them to the // chart but manually adding text to the chart. labels = ['PHP','Python','C#','Java','MySQL','Oracle','JSP','MS SQL Server','Ruby']; // Create the Horizontal Bar chart and configure it. With there // being no labels on the left-hand-side the margin autofit // will make the left margin zero new RGraph.HBar({ id: 'cvs', data: [86,75,71,65,60,55,53,51,45], options: { textSize: 14, backgroundGrid: false, xaxis: false, yaxis: false, xaxisScale: false, labelsAbove: true, labelsAboveUnitsPost: '%', colors: ['green'], shadow: true, shadowColor: '#ddd', shadowOffsetx: 2, shadowOffsety: 2, tooltips: '<i style="position: relative; top: -5px">Usage worldwide:</i> <span style="font-size: 26pt; ">%{value}%', tooltipsCss: { fontSize: '14pt' }, highlightFill: 'Gradient(rgba(255,255,255,0):white)', highlightStroke: 'Gradient(rgba(255,255,255,0):white)', responsive: [ {maxWidth: null,width:600,height: 350,parentCss:{'float':'right', textAlign:'none'}}, {maxWidth: 800,width:400,height: 300,parentCss:{'float':'none', textAlign:'center'}} ] } // Use the draw event to add the labels on the left-hand-side }).on('draw', function (obj) { var coords = obj.coords; // Loop through the coordinates of the bars for (var i=0; i<coords.length; ++i) { // For each of the coordinates add a text label // on the left-hand-side of the bar RGraph.text({ object: obj, text: labels[i], x: coords[i][0] + 10, y: coords[i][1] + (coords[i][3] / 2), valign: 'center', bold: true, color: 'white', size: obj.get('textSize') }); } }).grow(); </script>