Combining charts

  Read comments...

Summary
Documentation about combining charts - eg the Bar chart and the Line chart. Since March 2012 combining charts has become much easier and you can combine any chart type you want.

[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>
    window.onload = function (e)
    {
        var bar = new RGraph.Bar({
            id: 'cvs',
            data: [5,4,8,7,6,3,6],
            options: {
                gutterTop: 35,
                gutterRight: 300,
                labels: ['John','Fred','Louis','Peter','Karl','Julie','Olga'],
                tooltips: ['John','Fred','Louis','Peter','Karl','Julie','Olga'],
                textAccessible: true,
                textSize: 14
            }
        })
        
        var 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'],
                ymax: 10,
                tickmarks: 'endcircle',
                tooltips: ['Charles','Rick','Huey','Pob','Kevin','Louis','John'],
                textAccessible: true,
                textSize: 14
            }
        })


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

        /**
        * Create the  larger Pie chart
        */
        var pie = new RGraph.Pie({
            id: 'cvs',
            data: bar.data,
            options: {
                centerx: 600,
                radius: 90,
                labels: bar.get('labels'),
                tooltips: bar.get('labels'),
                textAccessible: true,
                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>
    var bar = new RGraph.Bar({
        id: 'cvs',
        data: [4,6,3,5,8,4,9],
        options: {
            colors: ['#ccf'],
            strokestyle: 'rgba(0,0,0,0)',
            noendxtick: true,
            title: 'An example of a combined Bar and Line chart',
            labels: ['Charles','Rick','Huey','Pob','Kevin','Louis','John'],
            tooltips: bar.get('labels'),
            combinedchartEffect: 'wave',
            textAccessible: true,
            textSize: 14
        }
    })

    var line = new RGraph.Line({
            id: 'cvs',
            data: [25,13,46,15,26,30,3],
            options: {
                tickmarks: 'endcircle',
                combinedchartEffect: 'trace2',
                textAccessible: true,
                textSize: 14
            }
        }
    })
    
    var 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({
        yaxispos: 'right'
        ylabels: true,
        noaxes: false,
        noxaxis: true,
        noendytick: 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 seperate 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:

Share RGraph
X

Comments