Combining charts
- Combining the Bar and Line chart
- Supplying the objects as an array and the CombinedChart Add() method
- Old charts keep reappearing 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
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)