A demonstation of the Line chart effects
This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.line.js"></script>
Put this where you want the chart to show up:
<div style="text-align: center">
<canvas id="cvs" width="700" height="300">[No canvas support]</canvas>
</div>
<button onclick="line.stopAnimation(); enableButtons()">Stop</button>
<button onclick="disableButtons(); window._button = this; line.trace({frames: 180}, function () {enableButtons()})">Trace</button>
<button onclick="disableButtons(); window._button = this; line.wave({frames: 180, reverse: 0}, function () {enableButtons()})">Wave</button>
<button onclick="disableButtons(); window._button = this; line.foldtocenter({frames: 180, reverse: 0}, function () {enableButtons()})">Fold to center</button>
<button onclick="disableButtons(); window._button = this; line.unfoldfromcentertrace({frames: 180, reverse: 0}, function () {enableButtons()})">UnfoldFromCenterTrace</button>
<button onclick="disableButtons(); window._button = this; line.unfoldfromcenter({frames: 180, reverse: 0}, function () {enableButtons()})">UnfoldFromCenter</button>
This is the code that generates the chart - it should be placed AFTER the canvas tag(s):