MENU
.net Powerful JavaScript charts
About
RGraph is a JavaScript charts library based on HTML5 SVG and canvas. RGraph is mature (over 15 years old) and has a wealth of features making it an ideal choice to use for showing charts on your website.

More »

 

Download
Get the latest version of RGraph (version 6.19, 28th September 2024) from the download page. You can read the changelog here. There's also older versions available, minified files and links to cdnjs.com hosted libraries.

Download »

 

License
RGraph can be used for free under the GPL or if that doesn't suit your situation there's an inexpensive (£129) commercial license available.

More »

HOWTO: A horizontal or vertical 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: {
            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