This is an example of a Bar chart combined with a Line chart. The source code is documented to make it easier for you to copy and paste it if you wish.
This goes in the documents header:<script src="RGraph.common.core.js"></script> <script src="RGraph.common.dynamic.js"></script> <script src="RGraph.common.tooltips.js"></script> <script src="RGraph.line.js"></script> <script src="RGraph.bar.js"></script>Put this where you want the chart to show up:
<canvas id="cvs" width="600" height="250">
[No canvas support]
</canvas>
This is the code that generates the chart:
<script>
window.onload = function ()
{
/**
* The order in which you create the charts is important - the Line chart must be last. If you create the Bar object
* second, it will be drawn "on top" of the Line.
*/
var bar = new RGraph.Bar({
id: 'cvs',
data: [143,140,141,135,136,132,129,125,126,127,127,129],
options: {
textAccessible: true
}
})
var line = new RGraph.Line({
id: 'cvs',
data: [14,35,15,36,37,26,28,18,38,17,9,14],
options: {
backgroundGrid: false,
noaxes: true,
linewidth: 3,
tickmarks: 'endcircle',
yaxispos: 'right',
ymax: 50,
title: 'A combined Bar and Line chart',
tooltips: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
tooltipsEvent: 'mousemove'
}
})
/**
* Some Bar chart configuration
*/
bar.set({
ymax: 250,
gutterLeft: 50,
gutterRight: 5,
colors: ['yellow'],
strokestyle: '#ddd',
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
shadow: false,
tooltips: !RGraph.ISOLD ? ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] : null
})
/**
* These gutters determine the correct placement of the Line chart
*/
line.set({
gutterLeft: bar.get('gutterLeft') + ((line.canvas.width - bar.get('gutterLeft') - bar.get('gutter.right')) / 24)
});
line.set({
gutterRight: ((line.canvas.width - bar.get('gutterLeft') - bar.get('gutterRight')) / 24) + bar.get('gutterRight')
});
/**
* Don't show Y labels on the Line chart
*/
line.set({
ylabels: false
});
/**
* Now draw both of the charts. Bar chart first, then the Line chart is drawn on top of it
*/
RGraph.redraw();
};
</script>