Share RGraph:
Share RGraph on Twitter Share RGraph on Google Plus Share RGraph on Facebook Follow RGraph on LinkedIn


How to create a combined Bar and VProgress 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 (e)
    {
        var bar = new RGraph.Bar('cvs', [5,4,8,7,6,3,6])
            .set('labels', ['Neil','Hoolio','Kevin','Luis','Peter','Olga','June'])
            .draw();
    }
</script>

The Bar chart with the bars replaced with VProgress bars

[No canvas support]

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


<script>
    window.onload = function (e)
    {
        var bar = new RGraph.Bar('bar', [5,4,8,7,6,3,6])
            .set('labels', ['Neil','Hoolio','Kevin','Luis','Peter','Olga','June'])
            .set('strokestyle', 'rgba(0,0,0,0)')
            .set('colors', ['rgba(0,0,0,0)'])
            .draw();
        
        /**
        * Now create the VProgress 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('bar', 50, 100)
                .set('gutter.left', coords[0])
                .set('gutter.top', coords[1])
                .set('gutter.right', bar.canvas.width - (coords[0] + coords[2]) )
                .set('gutter.bottom', 25)
                .set('labels.specific', [])
                .set('tickmarks', false)
                .set('tooltips', [bar.get('labels')[i]])
                .draw()
            
            // After the last VP is drawn draw the axis again so that it appears on top.
            if (isLast) {
                vp.ondraw = function (obj)
                {
                    obj.context.strokeStyle = 'black';
                    
                    obj.context.beginPath();
                    obj.context.moveTo(bar2.gutterLeft, bar2.canvas.height - bar2.gutterBottom);
                    obj.context.lineTo(bar2.canvas.width - bar2.gutterRight, bar2.canvas.height - bar2.gutterBottom);
                    obj.context.stroke();
                }
            }
        }
    }
</script>

© Copyright 2014 Richard Heyes All rights reserved.