Combining charts

Summary: Documentation about combining charts - eg the Bar chart and the Line chart. Combining chart types in RGraph is much easier because of its ObjectRegistry.

[No canvas support]

The addition of the ObjectRegistry brings a new level of functionality to RGraph by allowing the combination of charts which also have dynamic features such as tooltips. The chart to the right shows a combination of the Bar chart and Pie charts. You can find other examples of combining charts throughout the RGraph website.

The source code for this chart is as follows: 


<script>
    bar = new RGraph.Bar({
        id: 'cvs',
        data: [5,4,8,7,6,3,6],
        options: {
            backgroundGridBorder: false,
            backgroundGridVlines: false,
            marginTop: 5,
            marginRight: 250,
            xaxisLabels: ['John','Fred','Louis','Peter','Karl','Julie','Olga'],
            tooltips: ['John','Fred','Louis','Peter','Karl','Julie','Olga'],
            textSize: 14,
            colorsStroke: 'rgba(0,0,0,0)',
            shadow: false,
            xaxis: false,
            yaxis: false,
        }
    });
    
    line = new RGraph.Line({
        id: 'cvs',
        data: [1.5,2.5,2.1,1.3,1.9,2.1,1.1],
        options: {
            linewidth: 3,
            colors: ['black'],
            yaxisScaleMax: 10,
            tickmarksStyle: 'endcircle',
            tooltips: ['Charles','Rick','Huey','Pob','Kevin','Louis','John'],
            textSize: 14
        }
    });

    combo = new RGraph.CombinedChart(bar, line);
    combo.draw();

    // Create the  larger Pie chart
    pie = new RGraph.Pie({
        id: 'cvs',
        data: bar.data,
        options: {
            centerx: 375,
            radius: 45,
            labels: bar.get('xaxisLabels'),
            tooltips: bar.get('xaxisLabels'),
            textSize: 14
        }
    })

    pie.draw();
</script>

Combining the Bar and Line chart

[No canvas support]

The Bar and Line chart is a common combination so there's a specific class for it - the RGraph.CombinedChart class. This is a specific class which configures the Bar and Line appropriately The CombinedChart class can be used to combine any type of chart but it only specifically configures the Bar and Line charts. If you use this class the Bar chart should be the first object that you pass to it. 


<script>
    bar = new RGraph.Bar({
        id: 'cvs',
        data: [4,6,3,5,8,4,9],
        options: {
            colors: ['#ccf'],
            colorsStroke: 'rgba(0,0,0,0)',
            xaxisTickmarksLast: true,
            title: 'An example of a combined Bar and Line chart',
            xaxisLabels: ['Charles','Rick','Huey','Pob','Kevin','Louis','John'],
            tooltips: bar.get('xaxisLabels'),
            combinedEffect: 'wave',
            textSize: 14
        }
    });

    line = new RGraph.Line({
        id: 'cvs',
        data: [25,13,46,15,26,30,3],
        options: {
            tickmarksStyle: 'endcircle',
            combinedEffect: 'trace2',
            textSize: 14
        }
    });
    
    combo = new RGraph.CombinedChart(bar, line);
    combo.draw();
    
    // The combo class turns off axes, so turn them back on and redraw the canvas
    line.set({
        yaxisPosition: 'right'
        yaxisScale: true,
        xaxis: false,
        yaxis: false,
        yaxisTickmarksLast: true
    })

    RGraph.redrawCanvas(line.canvas)
</script>

Supplying the objects as an array and the CombinedChart Add() method

Two other options to supplying the objects as separate arguments to the CombinedChart constructor is to supply them in one array to the constructor - you can give as many objects as you wish. And you can also use the CombinedCharts .Add() method to add objects to the CombinedChart. Both of these methods may help when you're programmatically adding objects to the combination.

Old charts keep re-appearing when drawing multiple charts on one canvas

Since the ObjectRegistry was introduced (facilitating combining charts) objects have to be registered regardless of whether they use dynamic features or not. As a result of this you may be experiencing objects being redrawn when you don't want them to be. To solve this you need to remove them from the ObjectRegistry. How to do this is documented here: How to remove objects from the ObjectRegistry.

More examples of combining charts

Here are more examples of combining different charts. You can also find an example of this in in the download archive (line-multiple-y-axes.html)