This style of 3D chart is not supported natively but is pretty easy to achieve - especially as all the source code is below and you can just copy it!
This goes in the documents header:<script src="RGraph.common.core.js"></script> <script src="RGraph.bar.js"></script>Put this where you want the chart to show up:
<canvas id="cvs" width="650" height="300">
[No canvas support]
</canvas>
This is the code that generates the chart:
<script>
var gutterLeft = 120,
gutterRight = 25,
gutterTop = 45,
gutterBottom = 125,
hmargin = 15,
ymax = 35,
data = [
// If you don't need a third dataset take out this FIRST
// dataset and replace it with the word: null
// null, // [12,16,10,12,13,15,16]
[5,16,10,12,13,15,16],
[20,21,24,23,18,19,20],
[35,34,32,28,26,35,34]
],
colors = [
'Gradient(#696:#0f0:#0f0)',
'Gradient(#966:#f00:#f00)',
'Gradient(#669:blue:blue)'
],
labels = ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'];
var bar = new RGraph.Bar({
id: 'cvs',
data: data[2],
options: {
textAccessible: true,
variant: '3d',
variantThreedYaxis: false,
variantThreedXaxis: false,
strokestyle: 'rgba(0,0,0,0)',
colors: [colors[2]],
shadow: true,
shadowOffsetx: 10,
//backgroundGrid: false,
backgroundGridColor: '#ccc',
backgroundGridAutofitNumhlines: 5,
backgroundGridAutofitNumvlines: 14,
scaleZerostart: true,
axisColor: '#ddd',
ylabels: false,
gutterBottom: gutterBottom,
gutterTop: gutterTop,
gutterLeft: gutterLeft,
gutterRight: gutterRight,
hmargin: hmargin,
ymax: ymax,
noaxes: true
}
}).draw();
var bar2 = new RGraph.Bar({
id: 'cvs',
data: data[1],
options: {
textAccessible: true,
variant: '3d',
variantThreedYaxis: false,
variantThreedXaxis: false,
strokestyle: 'rgba(0,0,0,0)',
colors: [colors[1]],
shadow: true,
shadowOffsetx: 10,
shadowColor: 'rgba(0,0,0,0.5)',
backgroundGrid: false,
axisColor: '#ddd',
ylabels: !data[0] ? true : false,
labels: !data[0] ? labels : [],
gutterBottom: gutterBottom - 10,
gutterTop: gutterTop + 10,
gutterLeft: gutterLeft - 20,
gutterRight: gutterRight + 20,
hmargin: hmargin,
ymax: ymax,
noaxes: true
}
}).draw();
if (data[0]) {
var bar = new RGraph.Bar({
id: 'cvs',
data: data[0],
options: {
textAccessible: true,
variant: '3d',
variantThreedYaxis: false,
variantThreedXaxis: false,
strokestyle: 'rgba(0,0,0,0)',
colors: [colors[0]],
labels: labels,
shadow: true,
shadowOffsetx: 10,
shadowColor: 'rgba(0,0,0,0.5)',
backgroundGrid: false,
axisColor: '#ddd',
unitsPost: 'km',
gutterTop: gutterTop + 20,
gutterBottom: gutterBottom - 20,
gutterLeft: gutterLeft - 40,
gutterRight: gutterRight + 40,
hmargin: hmargin,
ymax: ymax,
noaxes: true,
scaleZerostart: true
}
}).draw();
}
</script>