A Vertical Progress Bar using a customised Bar chart.

  Read comments...

Summary
The SVG Bar chart can be customised to appear like a vertical progress bar. This means that all of the Bar chart properties are available to you.

The Bar chart can be customised to appear as a vertical progress bar. This means that all of the properties that pertain to the Bar chart, such as tooltips, can be used as well. There's a demo in the download archive that you can also see here.

 

Example

<script>
        // This Bar chart becomes the background of the progress bar
        new RGraph.SVG.Bar({
            id: 'chart-container',
            data: [100],
            options: {
                colors: ['Gradient(#eee:white)'],
                gutterLeft: 45,
                gutterRight: 5,
                backgroundGrid: false,
                strokestyle: '#ccc',
                hmargin: 10,
                yaxis: false,
                yaxisScale: false,
                xaxis: false,
                linewidth: .5,
                shadow: true,
                shadowOpacity: .1
            }
        }).draw();
    
        // This Bar chart becomes the inner bar of the progress bar
        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: 45,
                gutterRight: 5,
                hmargin: 15,
                xaxis: false,
                yaxisUnitsPost: '%',
                yaxis: false
            }
        }).grow();
</script>

The code above produces a chart like this:

Share RGraph...
X

Comments