HOWTO: A horizontal or vertical progress bar
There isn't a dedicated SVG
horizontal or vertical progress bar but it's
easy
to emulate one by using the Horizontal or vertical Bar charts. There are
two
chart objects used - one for the foreground and one for the background.
Because
they are regular Bar charts, it means that you can use any of the Bar chart
properties such as tooltips.
The background to the progress bar
The first thing to do is create the background of the progress bar. This is a regular Bar chart that has a single value of 10. This leads to a scale generated for you of 0 - 10.
<script> vprogress1 = new RGraph.SVG.Bar({ id: 'chart-container', data: [10], options: { xaxis: false, yaxis: false, backgroundGrid: false, marginInner: 0, colors: ['#eee'] } }).draw(); </script>
After the red bar has been added
<script> vprogress2 = new RGraph.SVG.Bar({ id: 'chart-container', data: [10], options: { xaxis: false, yaxis: false, backgroundGrid: false, marginInner: 0, colors: ['#eee'] } }).draw(); vprogress3 = new RGraph.SVG.Bar({ id: 'chart-container', data: [8], options: { xaxis: false, yaxis: false, backgroundGrid: false, marginInner: 7, colors: ['Gradient(red:#faa)'], shadow: true } }).grow({frames: 60}); </script>
A Horizontal Progress Bar
To create a Horizontal Progress Bar the methodology is very much the same but instead of using the regular Bar chart, you would use the Horizontal Bar chart. Here's an example of it along with some sample code.
<script> new RGraph.SVG.HBar({ id: 'chart-container', data: [10], options: { marginTop: 5, marginLeft: 15, marginRight: 15, marginTop: 5, colors: ['#eee'], backgroundGrid: false, colorsStroke: '#ccc', xaxis: false, xaxisScale: false, yaxis: false, linewidth: .5 } }).draw(); new RGraph.SVG.HBar({', id: 'chart-container', data: [7], options: { marginLeft: 15, marginRight: 15, marginTop: 5, xaxis: false, xaxisScaleUnitsPost: '%', xaxisScaleMax: 10, yaxis: false, shadow: true, shadowOffsetx: 1, shadowOffsety: 1, shadowBlur: 1, colors: ['Gradient(#fcc:red)'], backgroundGrid: false, marginInner: 15 } }).grow(); </script>
See also
- Horizontal Progress Bar demo (
svg-hbar-hprogress.html
in the download archive) - Vertical Progress Bar demo (
svg-bar-vprogress.html
in the download archive)