How to create a combined Bar, Line and Pie chart

Share RGraph:   

Summary
A guide for creating combined Bar, Line and Pie chart. This page demonstrates a common combination of Bar/Line/Pie chart

A combined Bar, Line and Pie chart
[No canvas support]

To create a combined chart you can use the secific class which is a part of the RGraph.bar.js file. You first create a Bar chart object, which can be thought of as the master, and then the Line chart object ( and then the Pie chart if required). You don't call the Draw() method of any of them - instead you create a CombinedChart object and call its Draw method. This in turn draws the charts. It sets the gutter settings to be the same as the first charts (which is usually a bar chart) and also sets a few other things (eg the chart.hmargin and chart.ylabels for the Line chart).

Define the canvas

First things first, as normal, define the canvas tag. Nothing special here - it's just like normal.

<canvas id="cvs" width="600" height="250">[No canvas support]<canvas>

Define the Bar chart

Next, define the Bar chart. It's defined first so that the Line chart is subsequently drawn "on top" of the Bar chart. Note that the .draw() method isn't called - that's done later.

<script>
    var bar = new RGraph.Bar({
        id: 'cvs',
        data: [4,3,8,9,5,6],
        options: {
            gutterLeft: 50,
            gutterRight: 5,
            gutterTop: 5,
            gutterBottom: 35,
            labels: ['Fred','John','Jake','Lou','Hoolio','Jemima'],
            tooltips: ['Fred','John','Jake','Lou','Hoolio','Jemima'],
            colors: ['#ccf'],
            strokestyle: 'rgba(0,0,0,0),
            textAccessible: true,
            textSize: 14
        }
    })
</script>

Define the Line chart

Now define the Line chart. The gutters and the hmargin are set by the RGraph.CombinedChart object so no need to be concerned with those. If you want to set them for the whole chart, then you can set them on the Bar chart object.

<script>
    var line = new RGraph.Line({
        id: 'cvs',
        data: [8,4,5,6,3,3],
        options: {
            tickmarks: 'endcircle',
            noaxes: true,
            tooltips: ['Fred','John','Jake','Lou','Hoolio','Jemima'],
            textAccessible: true,
            textSize: 14
        }
    })
</script>

Define the Pie chart

Now add the Pie chart. This is positioned by hand to be in the top right corner of the chart. Even though the Pie chart is positioned by hand it uses the main charts gutter settings (ie the Bar chart). This means that if you hange the Bar chart gutters, the Pie chart will be updated automatically.

<script>
    var radius = 30;
    var pie = new RGraph.Pie({
        'cvs',
        data: [4,8,5,4,3,6,2],
        options: {
            radius: radius,
            centerx: pie.canvas.width - radius - bar.get('gutterRight') - 10,
            centery: radius + bar.get('gutterTop') + 5,
            tooltips: ['John','Hoolio','Olga','Pete','Lou','Fred','John'],
            shadowOffsetx: 0,
            shadowOffsety: 0,
            shadowBlur: 15,
            textAccessible: true,
            textSize: 14
        }
    }).draw();
</script>

Create and draw the Combination chart

Now all there is to do is create the combination chart. There's a special object that handles all of the required settings for you.

<script>
    var combo = new RGraph.CombinedChart(bar, line, pie);
    combo.draw();
</script>

The whole thing

That's all there is to it. You can add more configuration options to the Bar or Line chart objects if you wish - eg tooltips.

<canvas id="cvs" width="600" height="250">[No canvas support]</canvas>

<script>
    window.onload = (function ()
    {
        /**
        * First create the Bar chart but don't call the .draw() method. Only configure th gutter
        * settings and add some labels.
        */
        var bar = new RGraph.Bar({
            id: 'cvs',
            data: [4,3,8,9,5,6],
            options: {
                gutterLeft: 50,
                gutterRight: 5,
                gutterTop: 5,
                gutterBottom: 35,
                labels: ['Fred','John','Jake','Lou','Hoolio','Jemima'],
                tooltips: ['Fred','John','Jake','Lou','Hoolio','Jemima'],
                colors: '#ccf',
                strokestyle: 'rgba(0,0,0,0)',
                textAccessible: true,
                textSize: 14
            }
        })


        /**
        * Create the line chart with no axes or labels
        */
        var line = new RGraph.Line({
            id: 'cvs',
            data: [8,4,5,6,3,3],
            options: {
                tickmarks: 'endcircle',
                noaxes: true,
                tooltips: ['Fred','John','Jake','Lou','Hoolio','Jemima'],
                textAccessible: true,
                textSize: 14
            }
        })


        /**
        * Create the Pie chart and position it on the right of the chart. The combo class doesn't
        * do anything with the Pie - so position it ourselves.
        */
        var radius = 30;
        var pie = new RGraph.Pie({
            id: 'cvs',
            data: [4,8,5,4,3,6,2],
            options: {
                radius: radius,
                centerx: pie.canvas.width - radius - bar.get('gutterRight') - 10,
                centery: radius + bar.get('gutterTop') + 5,
                tooltips: ['John','Hoolio','Olga','Pete','Lou','Fred','John'],
                shadowOffsetx: 0,
                shadowOffsety: 0,
                shadowBlur: 15,
                textAccessible: true,
                textSize: 14
            }
        })
            


        /**
        * Now create the CombinedChart object and .draw() it. This will draw all
        * of the charts.
        */
        var combo = new RGraph.CombinedChart(bar, line, pie);
        combo.draw();
    }
</script>

Comments

Add a new comment...