A Line chart with a fade/mix effect

When creating a fade-out/fade-in effect you could use a single canvas and fade the charts in and out sequentially - but you won't get the mix-in effect like you do below. This mix effect is achieved by using two canvas tags and fading one out whilst fading in the other. This way one is partly faded out whilst the other is partly faded in. You can see the effect by clicking the buttons below to switch between charts. The charts are both drawn initially; however one of the canvas tags is set to have no opacity so that you can't see it. During the switch the canvas is faded in and the other canvas is faded out.

The buttons are also disabled appropriately to provide a better user experience.

<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.effects.js"></script>
<script src="RGraph.bar.js"></script>
<script src="RGraph.line.js"></script>

<div style="display: inline-block; width: 600px; height: 250px; position: relative; float: right; text-align: center">
    <canvas id="cvs1" width="600" height="250" style="position: absolute; top: 15px; left: 0">[No canvas support]</canvas>
    <canvas id="cvs2" width="600" height="250" style="position: absolute; top: 15px; left: 0; opacity: 0">[No canvas support]</canvas><br />
    <button id="butShowLine" disabled style="z-index: 1; position: relative">Line chart</button>
    <button id="butShowBar" style="z-index: 1; position: relative">Bar chart</button>
</div>