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 show charts on your website.

More »

 

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

More »

 

Download
Get the latest version of RGraph (version 6.17) from the download page. There's also older versions available, minified files and links to cdnjs.com hosted libraries.

More »

HOWTO: Create a combined bar/progress bar

Introduction

With the ObjectRegistry that is part of RGraphs architecture, combining chart types becomes a lot easier. Instead of just the usual Bar and Line chart combination charts you can combine any of the chart types that RGraph supports on a single canvas tag. By using the obj.coords array, which is where coordinates are usually stored (different chart types may vary), you can create combinations of charts. Because it's common - the Bar chart / Line chart combination has a specific class that you can use and read about here.

In the chart shown here, though, no coordinates are used and there are only two Bar charts that are created - one on top of the other. This allows us to get the progress bar effect with the second Bar chart sitting on top of the first. In this case, the first Bar chart is used as the background to the bars and the foreground Bar chart is used as the "progress indicators"

The code that creates the chart

This is the code for the two Bar charts the make up the visualisation.

View example on CodePen
<script>
    // Create the first Bar chart - these bars become the backgrounds to the bars.
    // Note that the reference to the chart object is kept in the bar1 variable
    // because it's used in the second chart.
    bar1 = new RGraph.Bar({
        id: 'cvs',
        data: [5,4,8,7,6,3,6],
        options: {

            // If you want different colored backgrounds then this is the color
            // to change.
            colors: ['#ddd'],
            
            xaxisLabels: ['Mon','Tue','wed','Thu','Fri','Sat','Sun'],
            title: 'A Vertical Progress Bar chart',
            titleBold: true,
            textSize: 14,
            
            // On the second chart the background grid is disabled so it
            // should be configured here.
            backgroundGridVlines: false,
            backgroundGridBorder: false,

            // Don't want to see the axes
            xaxis: false,
            yaxis: false,

            colorsStroke: '#aaa',
            marginInner: 16
        }
    }).draw();


    // This second chart becomes the green insides of the bars.
    new RGraph.Bar({
        id: 'cvs',
        data: [1,3,2,2,1,1,4],
        options: {
            // This green color can be changed if you want
            // your bars to be a different color
            colors: ['green'],
            
            // Turn the background grid and axes off
            backgroundGrid: false,
            xaxis: false,
            yaxis: false,
            
            // Remember the reference to the first chart was
            // saved? Here it's used to set the same maximum
            // scale value so that both charts use the same
            // scale.
            yaxisScaleMax: bar1.scale2.max,

            // Don't show the scale though
            yaxisScale: false,
            
            // Match the first charts margInner setting
            marginInner: 16
        }
    }).wave();
</script>