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.
- Combining the Bar and Line chart
- Old charts keep re-appearing when drawing multiple charts on one canvas
- More examples of combining charts
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
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)
- HOWTO: Combining the Bar, Line and Pie charts
- HOWTO: Combining the Bar and Vertical Progress charts
- HOWTO: Create a bank of Gauge charts