How to create a combined bar/progress bar

• Introduction
• The code that creates the chart

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.

<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',
            textSize: 14,

            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,
            
            // 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>