This is a demo of two Bar charts that have been customised to take on the appearance of a vertical progress bar. The outer bar chart is given a value of 100 so that the "background" goes all the way to the top. And then another bar chart with the real value is drawn on top. Since it's a Bar chart, the grow effect can be used.
This goes in the documents header:<script src="RGraph.svg.common.core.js"></script> <script src="RGraph.svg.common.tooltips.js"></script> <script src="RGraph.svg.bar.js"></script>Put this where you want the chart to show up:
<div style="padding: 15px"> <div style="width: 100px; height: 300px" id="chart-container"></div> </div>This is the code that generates the chart:
<script> new RGraph.SVG.Bar({ id: 'chart-container', data: [100], options: { colors: ['#eee'], gutterLeft: 35, gutterRight: 5, backgroundGrid: false, strokestyle: '#ccc', hmargin: 10, yaxis: false, yaxisScale: false, xaxis: false, linewidth: .5, shadow: true, shadowOpacity: .1 } }).draw(); new RGraph.SVG.Bar({ id: 'chart-container', data: [73], options: { yaxisMax: 100, yaxisTextColor: '#666', shadow: true, shadowOffsetx: 1, shadowOffsety: 1, shadowBlur: 1, titleColor: '#666', colors: ['Gradient(red:#fcc)'], colorsSequential: true, backgroundGrid: false, tooltips: ['Monday was an average day'], gutterLeft: 35, gutterRight: 5, hmargin: 15, xaxis: false, xaxisUnitsPost: '%', yaxis: false } }).grow(); </script>