This is a demo page that accompanies the HOWTO document that shows you how you can use CSS transitions to get lots of miniature charts shown on your page that expand and get bigger when clicked.
<script src="RGraph.common.core.js"></script> <script src="RGraph.common.bar.js"></script> <script src="RGraph.common.line.js"></script> <script src="RGraph.common.hbar.js"></script> <script src="RGraph.common.waterfall.js"></script>Put this where you want the chart to show up:
<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> <style> #container { position: relative; width: 900px; height: 375px; margin-left: auto; margin-right: auto; } #container canvas { outline: none; position: absolute; transition: top .5s, left .5s, width .5s, height .5s, z-index .5s, transform .25s, box-shadow .5s; transition-delay: .25s; z-index: 0; background-color: rgba(255,255,255,0.9); width: 300px; height: 125px; } #container canvas#cvs1 {top: 0; left: 0;} #container canvas#cvs2 {top: 0; left: 300px;} #container canvas#cvs3 {top: 125px; left: 0;} #container canvas#cvs4 {top: 125px; left: 300px;} #container canvas#cvs5 {top: 0; left: 600px;} #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%; height: 90%; z-index: 999; box-shadow: 0 0 25px #ccc; } @media screen and (max-width: 700px) { #container {width: 600px; height: 625px} #container canvas#cvs1 {top: 0; left: 0;} #container canvas#cvs2 {top: 0; left: 300px;} #container canvas#cvs3 {top: 125px; left: 0;} #container canvas#cvs4 {top: 125px; left: 300px;} #container canvas#cvs5 {top: 250px; left: 0px;} #container canvas#cvs6 {top: 250px; left: 300px;} #container canvas#cvs7 {top: 375px; left: 0;} #container canvas#cvs8 {top: 375px; left: 300px;} #container canvas#cvs9 {top: 500px; left: 0px;} #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 { left: 0; width: 600px; height: 250px; z-index: 999; box-shadow: 0 0 25px #ccc; } #container canvas#cvs1:focus, #container canvas#cvs2:focus {top:-62.5px;} #container canvas#cvs3:focus, #container canvas#cvs4:focus {top:62.5px;} #container canvas#cvs5:focus, #container canvas#cvs6:focus {top:187.5px;} #container canvas#cvs7:focus, #container canvas#cvs8:focus {top:312.5px;} #container canvas#cvs9:focus {top:437.5px;} } </style>This is the code that generates the chart - it should be placed AFTER the canvas tag(s):