HOWTO: Create a Bar/Line/Pie chart

• Introduction
• Define the canvas
• Define the Bar chart
• Define the Line chart
• Define the Pie chart
• Create and draw the Combination chart
• The whole thing

Introduction

To create a combined chart you can use the specific 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 margin settings to be the same as the first chart (which is usually a Bar chart) and also sets a few other things (eg the marginInner and yaxisLabels 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>
    bar = new RGraph.Bar({
        id: 'cvs',
        data: [4,3,8,9,5,6],
        options: {
            xaxisLabels: ['Fred','John','Jake','Lou','Hoolio','Jemima'],
            tooltips: ['Fred','John','Jake','Lou','Hoolio','Jemima'],
            colors: ['#555'],
            colorsStroke: 'rgba(0,0,0,0)',
            textSize: 14,
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            xaxis: false,
            yaxis: false
        }
    }).draw();
</script>

Define the Line chart

Now define the Line chart. The margin* and the marginInner 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>
    line = new RGraph.Line({
        id: 'cvs',
        data: [8,4,5,6,3,3],
        options: {
            linewidth: 9,
            marginInner: 35,
            tickmarksStyle: 'filledendcircle',
            tickmarksSize: 10,
            xaxis: false,
            yaxis: false,
            tooltips: ['Fred','John','Jake','Lou','Hoolio','Jemima'],
            textSize: 14,
            backgroundGrid: false,
            xaxis: false,
            yaxis: false
        }
    }).draw();
</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 margin settings (ie the Bar chart). This means that if you change the Bar chart margins, the Pie chart will be updated automatically.

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

Create and draw the Combination chart

Now all there is to do is create the CombinationChart. This is a special object that handles all of the required settings for you.

<script>
    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 chart or Line chart objects if you wish - eg tooltips.

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

<script>
    // First create the Bar chart but don't call the draw() method. Only configure the margin
    // settings and add some labels.
    bar = new RGraph.Bar({
        id: 'cvs',
        data: [4,3,8,9,5,6],
        options: {
            xaxisLabels: ['Fred','John','Jake','Lou','Hoolio','Jemima'],
            tooltips: ['Fred','John','Jake','Lou','Hoolio','Jemima'],
            colors: ['#ccc'],
            colorsStroke: 'rgba(0,0,0,0)',
            textSize: 14,
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            xaxis: false,
            yaxis: false
        }
    });


    // Create the line chart with no axes or labels
    line = new RGraph.Line({
        id: 'cvs',
        data: [8,4,5,6,3,3],
        options: {
            linewidth: 9,
            marginInner: 35,
            tickmarksStyle: 'filledendcircle',
            tickmarksSize: 10,
            xaxis: false,
            yaxis: false,
            tooltips: ['Fred','John','Jake','Lou','Hoolio','Jemima'],
            textSize: 14,
            backgroundGrid: false,
            xaxis: false,
            yaxis: false
        }
    });


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


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