HOWTO: A horizontal or vertical progress bar

• The background to the progress bar
• After the red bar has been added
• A Horizontal Progress Bar

There isn't a dedicated SVG horizontal Progress bar or Vertical Progress bar but it's easy to emulate one by using the Horizontal Bar chart 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: {
            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: {
            backgroundGrid: false,
            marginInner: 0,
            colors: ['#eee']
        }
    }).draw();

    vprogress3 = new RGraph.SVG.Bar({
        id: 'chart-container',
        data: [8],
        options: {
            backgroundGrid: false,
            marginInner: 7,
            colors: ['Gradient(red:#faa)']
        }
    }).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',
            xaxisScale: false,
            linewidth: .5
        }
    }).draw();

    new RGraph.SVG.HBar({',
        id: 'chart-container',
        data: [7],
        options: {
            marginLeft: 15,
            marginRight: 15,
            marginTop: 5,
            xaxisScaleUnitsPost: '%',
            xaxisScaleMax: 10,
            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)