A CSS expand effect
Put this in the documents header:
<script src="RGraph.common.core.js" ></script>
<script src="RGraph.bar.js" ></script>
<script src="RGraph.line.js" ></script>
<script src="RGraph.waterfall.js" ></script>
<script src="RGraph.hbar.js" ></script>
Put this where you want the chart to show up:
<style>
#container {
position: relative;
width: 900px;
height: 375px;
opacity: 0;
transition: opacity 1s;
}
#container canvas {
outline: none;
position: absolute;
transition-delay: .25s;
z-index: 0;
width: 300px;
background-color: #fff;
}
#container canvas#cvs1 {top: 0;left: 0;}
#container canvas#cvs2 {top: 0;left: 300px;}
#container canvas#cvs3 {top: 0;left: 600px;}
#container canvas#cvs4 {top: 125px;left: 0;}
#container canvas#cvs5 {top: 125px;left: 300px;}
#container canvas#cvs6 {top: 125px;left: 600px;}
#container canvas#cvs7 {top: 250px;left: 0;}
#container canvas#cvs8 {top: 250px;left: 300px;}
#container canvas#cvs9 {top: 250px;left: 600px;}
#container canvas#cvs1:focus,
#container canvas#cvs2:focus,
#container canvas#cvs3:focus,
#container canvas#cvs4:focus,
#container canvas#cvs5:focus,
#container canvas#cvs6:focus,
#container canvas#cvs7:focus,
#container canvas#cvs8:focus,
#container canvas#cvs9:focus {
top: 5%;
left: 5%;
width: 90% !important;
height: 90% !important;
z-index: 999;
box-shadow: 0 0 25px #ccc;
}
</style>
<div id="container">
<canvas id="cvs1" width="900" height="375" tabindex="1">[No canvas support]</canvas>
<canvas id="cvs2" width="900" height="375" tabindex="1">[No canvas support]</canvas>
<canvas id="cvs3" width="900" height="375" tabindex="1">[No canvas support]</canvas>
<canvas id="cvs4" width="900" height="375" tabindex="1">[No canvas support]</canvas>
<canvas id="cvs5" width="900" height="375" tabindex="1">[No canvas support]</canvas>
<canvas id="cvs6" width="900" height="375" tabindex="1">[No canvas support]</canvas>
<canvas id="cvs7" width="900" height="375" tabindex="1">[No canvas support]</canvas>
<canvas id="cvs8" width="900" height="375" tabindex="1">[No canvas support]</canvas>
<canvas id="cvs9" width="900" height="375" tabindex="1">[No canvas support]</canvas>
</div>
This is the code that generates the chart - it should be placed after the canvas / div (when using svg charts) tags:
<script id="rgraph-demo-source-code">
bar1 = new RGraph.Bar({
id: 'cvs1',
data: [4,5,3,1,2,6,5,4,8],
options: {
xaxisLabels: ['Dave','Loui','Luis','Pete','Olga','Steve','Kevin','John','Cuthbert'],
textSize: 14
}
}).draw();
line1 = new RGraph.Line({
id: 'cvs2',
data: [1,3,5,2,6,4,7,8,9],
options: {
xaxisLabels: ['Dave','Loui','Luis','Pete','Olga','Steve','Kevin','John','Cuthbert'],
textSize: 14,
spline: true
}
}).draw();
waterfall1 = new RGraph.Waterfall({
id: 'cvs3',
data: [45,-2,-9,4,6,3,-23,2,4],
options: {
xaxisLabels: ['Dave','Loui','Luis','Pete','Olga','Steve','Kevin','John','Total'],
textSize: 14
}
}).draw();
waterfall2 = new RGraph.Waterfall({
id: 'cvs4',
data: [4,5,3,1,2,6,5,4,-8],
options: {
xaxisLabels: ['Dave','Loui','Luis','Pete','Olga','Steve','Kevin','John','Total'],
textSize: 14
}
}).draw();
bar2 = new RGraph.Bar({
id: 'cvs5',
data: [4,7,9,5,3,7,6],
options: {
xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
marginInner: 20
}
}).draw();
line2 = new RGraph.Line({
id: 'cvs6',
data: [3,7,8,4,4,2,7],
options: {
xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
textSize: 14,
marginInner: 25,
spline: true
}
}).draw();
hbar1 = new RGraph.HBar({
id: 'cvs7',
data: [8,3,7,4,6,9,8],
options: {
yaxisLabels: ['Jolly','Wolly','Lolly','Colly','Dolly','Molly','Polly'],
textSize: 14,
marginLeft: 75,
marginLeftAuto: false,
marginInner: 10
}
}).draw();
line3 = new RGraph.Line({
id: 'cvs8',
data: [8,3,7,4,6,9,8],
options: {
xaxisLabels: ['Jolly','Wolly','Lolly','Colly','Dolly','Molly','Polly'],
textSize: 14,
marginInner: 25,
spline: true,
linewidth: 20,
shadow: true,
backgroundGridVlines: false,
backgroundGridBorder: false,
xaxis: false,
yaxis: false,
textSize: 20
}
}).draw();
bar3 = new RGraph.Bar({
id: 'cvs9',
data: [7,3,9,7,4,8,3],
options: {
xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
marginInner: 25
}
}).draw();
for (i of ['bar1','bar2','bar3','line1','line2','line3','waterfall1','waterfall2','hbar1']) {
(function (i)
{
window[i].canvas.style.width = '300px';
window[i].canvas.style.height = '125px';
setTimeout(function ()
{
window[i].canvas.style.transition = 'top .5s, left .5s, width .5s, height .5s, z-index .5s, transform .25s, box-shadow .5s';
}, 250);
})(i);
}
document.getElementById('container').style.opacity = 1;
</script>