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) { /** * Create the main Bar chart */ var bar = new RGraph.Bar('cvs', [5,4,8,7,6,3,6]); bar.Set('chart.gutter.top', 35); bar.Set('chart.labels', ['John','Fred','Louis','Peter','Karl','Julie','Olga']); bar.Set('chart.tooltips', ['John','Fred','Louis','Peter','Karl','Julie','Olga']); bar.Set('chart.gutter.right', 300); bar.Draw(); /** * Go through all the bars and add Pie charts positioned over them */ for (var i=0; i<bar.coords.length; ++i) { var radius = (bar.coords[i][2] / 2) - 2; var pie = new RGraph.Pie('cvs', [bar.data[i], RGraph.array_sum(bar.data)]); pie.Set('chart.centerx', bar.coords[i][0] + radius); pie.Set('chart.centery', bar.coords[i][1] - radius); pie.Set('chart.radius', radius - 2); pie.Set('chart.strokestyle', 'rgba(0,0,0,0)'); pie.Set('chart.exploded', [5]); pie.Set('chart.tooltips', [bar.Get('chart.labels')[i], 'All people']); //pie.Set('chart.tooltips.event', 'onmousemove'); pie.Draw(); } /** * Create the larger Pie chart */ var pie = new RGraph.Pie('cvs', bar.data); pie.Set('chart.centerx', 600); pie.Set('chart.radius', 90); pie.Set('chart.labels', bar.Get('chart.labels') ); pie.Set('chart.tooltips', bar.Get('chart.labels') ); pie.Draw(); } </script>
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 configure 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('cvs', [4,6,3,5,8,4,9]); bar.Set('chart.colors', ['#ccf']) bar.Set('chart.strokestyle', 'rgba(0,0,0,0)') bar.Set('chart.noendxtick', true) bar.Set('chart.title', 'An example of a combined Bar and Line chart'); bar.Set('chart.labels', ['Charles','Rick','Huey','Pob','Kevin','Louis','John']); bar.Set('chart.tooltips', bar.Get('chart.labels')); var line = new RGraph.Line('cvs', [25,13,46,15,26,30,3]); line.Set('chart.tickmarks', 'endcircle'); 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('chart.yaxispos', 'right'); line.Set('chart.ylabels', true); line.Set('chart.noaxes', false); line.Set('chart.noxaxis', true); line.Set('chart.noendytick', true); RGraph.RedrawCanvas(line.canvas); </script>