As of the March 2012 release combining different types of charts on a single canvas with dynamic features became a lot easier. You could always combine charts with ease, however when you employed the dynamic features of RGraph things began to break down. Now though, with the new Object Registry, multiple charts can be combined on a single canvas
The example to the right shows two Line charts which both have tooltips. When the tooltips are shown the ontooltip custom RGraph event is used to draw an example Pie chart as well. If you wanted the Pie charts to have tooltips too then adding a new canvas on top of the first would be necessary.
<script>
var l1 = new RGraph.Line('cvs', [6,5,4,5,6,4,1,2,3], [7,8,9,9,8,7,8,7,6]);
l1.Set('chart.labels', ['13th','14th','15th','16th','15th','16th','17th','18th','19th']);
l1.Set('chart.title', 'Example of combining charts');
l1.Set('chart.title.vpos', 0.5);
l1.Set('chart.background.grid.autofit.align', true);
l1.Set('chart.filled', true);
l1.Set('chart.filled.range', true);
l1.Set('chart.fillstyle', 'rgba(128,255,128,0.5)');
l1.Set('chart.linewidth', 2);
l1.Set('chart.colors', ['green']);
l1.Set('chart.hmargin', 5);
l1.Set('chart.tooltips', ['Johnny','Dave','Gary','Doug','Alex','Fliss','Hoolio','Jan','Hue', 'Pete','Lou','Kev','Bill','Ray','Rich','Gary','Luis','Gemma']);
l1.Set('chart.key', ['2009','2010']);
l1.Set('chart.key.colors', ['green','red']);
l1.Set('chart.tooltips.effect', 'contract');
l1.Draw();
var l2 = new RGraph.Line('cvs', [8,6,6,5,4,5,5,6,6], [3,3,2,1,1,2,1,1,3]);
l2.Set('chart.background.grid', false);
l2.Set('chart.background.grid.autofit.align', true);
l2.Set('chart.ylabels', false);
l2.Set('chart.filled', true);
l2.Set('chart.filled.range', true);
l2.Set('chart.fillstyle', 'rgba(255,128,128,0.5)');
l2.Set('chart.linewidth', 2);
l2.Set('chart.colors', ['red']);
l2.Set('chart.hmargin', 5);
l2.Set('chart.yaxispos', 'right');
l2.Set('chart.noendxtick', true);
l2.Set('chart.tooltips', ['Kerry','Olga','Pete','John','Jose','Hoolio','Verity','Kevin','Hue', 'Dave','Gary','Rich','Alex','Fliss','Fred','Alice','Quentin','Carl']);
l2.Set('chart.tooltips.effect', 'expand');
l2.Set('chart.noaxes', true);
l2.Draw();
/**
* Now add the ontooltip event listener
*/
function DrawMiniChart (obj)
{
var canvas = obj.canvas;
var context = obj.context;
// If you need it, this is the index into the data
var index = RGraph.Registry.Get('chart.tooltip').__index__;
context.beginPath();
context.strokeStyle = 'gray';
context.fillStyle = 'white';
context.shadowColor = 'black';
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.shadowBlur = 15;
context.strokeRect(AA(obj, obj.Get('chart.gutter.left') + 5), AA(obj, canvas.height - obj.Get('chart.gutter.bottom') - 5 - 100), 100, 100);
context.fillRect(AA(obj, obj.Get('chart.gutter.left') + 5), AA(obj, canvas.height - obj.Get('chart.gutter.bottom') - 5 - 100), 100, 100);
context.closePath();
context.stroke();
context.fill();
// Reset the shadow color
context.shadowColor = 'rgba(0,0,0,0)';
// Now draw the chart on the white square
var pie = new RGraph.Pie('cvs', [5,4,3,6,8])
pie.Set('chart.exploded', [7])
pie.Set('chart.centerx', obj.Get('chart.gutter.left') + 5 + 50)
pie.Set('chart.centery', canvas.height - obj.Get('chart.gutter.bottom') - 5 - 50)
pie.Set('chart.radius', 40);
pie.Draw();
// Remove the Pie chart from the ObjectRegistry so that it isn't redrawn when the main canvas is
RGraph.ObjectRegistry.Remove(pie);
}
RGraph.AddCustomEventListener(l1, 'ontooltip', DrawMiniChart);
</script>
Another type of chart you may want is a line chart with Y axes on both sides, as illustrated on the left.
This chart is made up from two line charts, one with the Y axis on the left and one on the right. The code that makes up this chart is below.
One reason to combine line charts is to get Y axes on the left and right. If you simply want mutiple lines though, you can do this without combining any charts - just supply multiple data sets to the constructor of your chart.
<script>
window.onload = function
{
line2 = new RGraph.Line('myCanvas2', [51,22,23,33,35,23,32,45]);
line2.Set('chart.hmargin', 10);
line2.Set('chart.labels', ['Kiff', 'Wayne', 'Pete', 'Lou', 'Jake', 'Jo', 'Fred', 'Bob']);
line2.Set('chart.linewidth', 3);
line2.Set('chart.shadow', true);
line2.Set('chart.shadow.offsetx', 2);
line2.Set('chart.shadow.offsety', 2);
line2.Set('chart.ymax', 65);
line2.Set('chart.units.post', 'l');
line2.Set('chart.noendxtick', true);
line2.Set('chart.title', 'An example of axes both sides');
line2.Set('chart.gutter.left', 55);
line2.Set('chart.gutter.right', 55);
line2.Set('chart.background.grid.autofit', true);
line2.Draw();
line3 = new RGraph.Line('myCanvas2', [42,50,51,23,46,48,65,11]);
line3.Set('chart.hmargin', 10);
line3.Set('chart.linewidth', 3);
line3.Set('chart.shadow', true);
line3.Set('chart.shadow.offsetx', 2);
line3.Set('chart.shadow.offsety', 2);
line3.Set('chart.yaxispos', 'right');
line3.Set('chart.gutter.left', 55);
line3.Set('chart.gutter.right', 55);
line3.Set('chart.noendxtick', true);
line3.Set('chart.background.grid', false);
line3.Set('chart.ymax', 100);
line3.Set('chart.colors', ['blue', 'red']);
line3.Set('chart.units.pre', '$');
line3.Set('chart.key', ['Cost', 'Volume']);
line3.Set('chart.key.background', 'rgba(255,255,255,0.8)');
line3.Draw();
}
</script>