<script src="RGraph.common.core.js"></script> <script src="RGraph.bar.js"></script>Put this where you want the chart to show up:
<canvas id="cvs" width="300" height="250" style="border-radius: 6px; background-image: linear-gradient(45deg, black, blue, black); box-shadow: #aaa 2px 2px 2px">[No canvas support]</canvas> [No canvas support] </canvas>This is the code that generates the chart:
<script> labels = [50,20,15,15]; data = RGraph.arrayClone(labels); var bar = new RGraph.Bar({ id: 'cvs', data: data, options: { textAccessible: true, backgroundGridAutofitAlign: false, backgroundGridAutofitNumvlines: 8, backgroundGridAutofitNumhlines: 10, backgroundGridColor: '#6A93CA', backgroundGridWidth: 3, colors:['Gradient(#EC06D8:#FEB2FB:#FEB2FB)'], ymax: 100, gutterLeft: 10, gutterRight: 10, gutterTop: 30, gutterBottom: 45, ylabels: false, labels: ['A','B','C','D'], labelsColor: 'yellow', noaxes: true, textSize: 22, textColor: 'rgba(0,0,0,0)', textFont: 'Verdana', strokestyle: 'rgba(0,0,0,0)' } }).grow().on('draw', function () { // Add the labels for (var i=0; i<4; i++) { RGraph.text2(bar.context, { text: labels[i] + '%', x:bar.coords[i][0] + (bar.coords[i][2] / 2), y:30, color: 'white', size: 18, halign: 'center', font: 'Verdana' }); } }); </script>