Combining charts

The addition of the ObjectRegistry brings a new level of functionality to RGraph by allowing the combination of charts that also have dynamic features such as tooltips. You can find examples of combining charts in the download archive.

The source code for a combined Bar chart and Line 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

The Bar chart and Line chart is a common combination so there's a specific class for it - the RGraph.CombinedChart class. This is a specific class that 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>
    labels = ['Charles','Rick','Huey','Pob','Kevin','Louis','John'];

    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: labels,
            tooltips: labels,
            combinedEffect: 'wave',
            textSize: 14
        }
    });

    line = new RGraph.Line({
        id: 'cvs',
        data: [25,13,46,15,26,30,3],
        options: {
            tickmarksStyle: 'endcircle',
            combinedEffect: 'trace',
            textSize: 14
        }
    });
    
    combo = new RGraph.CombinedChart(bar, line);
    combo.draw();

    line.set({
        yaxisPosition: 'right',
        yaxisScale: true,
        xaxis: false,
        yaxis: false,
        yaxisTickmarksLast: true
    });
</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 reappearing 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)