How to create a combined Bar and Vertical Progress bar chart

Summary: A guide for creating a combined Bar and Vertical Progress bar Vertical. With the advent of the RGraph ObjectRegistry you can now combine any different types of chart.

With the new ObjectRegistry that is now part of RGraph, combining chart types becomes a lot easier. Instead of the usual Bar and Line chart combination charts you can combine any of the chart types on a single canvas. 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/Line combination has a specific class which you can use and read about here.

[No canvas support]

The regular bar chart

First things first, as normal, create and display the Bar chart.


<script>
    window.onload = (function ()
    {
        var bar = new RGraph.Bar({
            id: 'cvs',
            data: [5,4,8,7,6,3,6],
            options: {
                xaxisLabels: ['Neil','Hoolio','Kevin','Luis','Peter','Olga','June'],
                textSize: 14
            }
        }).draw()
    })
</script>

The Bar chart with the bars replaced with Vertical Progress bars

[No canvas support]

Next, using the obj.coords array, overwrite the bars with Vertical Progress bars. The Vertical Progress bars are positioned using the Bar charts' obj.coords array and the margins on the individual Vertical Progress bars. They then have tooltips configured on the individual charts.


<script>
    window.onload = (function ()
    {
        var bar = new RGraph.Bar({
            id: 'cvs',
            data: [5,4,8,7,6,3,6],
            options: {
                xaxisLabels: ['Neil','Hoolio','Kevin','Luis','Peter','Olga','June'],
                colorsStroke: 'rgba(0,0,0,0)',
                colors: ['rgba(0,0,0,0)'],
                textSize: 14
            }
        }).draw()
        
        /**
        * Now create the Vertical Progress bars using the Bar charts coordinates.
        */
        for (var i=0; i<bar.coords.length; ++i) {
            
            var coords = bar.coords[i];
            var isLast = ((bar.coords.length - 1) == i);
            
            var vp = new RGraph.VProgress({
                id: 'cvs',
                min: 0,
                max: 100,
                value: 50,
                options: {
                    textSize: 14,
                    marginLeft: coords[0],
                    marginTop: coords[1],
                    marginRight: bar.canvas.width - (coords[0] + coords[2]),
                    marginBottom: 25
                    labelsSpecific: [],
                    tickmarks: false,
                    tooltips: [bar.get('xaxisLabels')[i]]
                }
            }).draw()
            
            // After the last Vertical Progress bar is drawn draw the axis again so that it appears on top.
            if (isLast) {
                vp.ondraw = function (obj)
                {
                    obj.path(
                        'b m % % l % % s black',
                        bar2.marginLeft,
                        bar2.canvas.height - bar2.marginBottom,
                        bar2.canvas.width - bar2.marginRight,
                        bar2.canvas.height - bar2.marginBottom
                    );
                }
            }
        }
    }
</script>