This is quite an old demo of a Line chart but it has stood up through the years very well and still looks very presentable.
It's a black Line chart with two datasets that both use custom tickmarks.
These custom tickmarks are drawn by utilising the RGraph.path2()
API
function. This is a function that makes drawing with the canvas API
far less verbose than it usually is.
Before drawing commences, using the beforedraw
event, the canvas
is cleared
to a plain black color. You might find this as a performance enhancing tip
on various canvas performance articles though by the second frame you'll
not be drawing on a transparent canvas - so it might be a redundant
action.
The trace()
Line chart effect is used here - but an options
object is passed
to the effects function call. This is just a regular JavaScript object which
contains a single property: frames
As the name suggests this stipulates the number of frames in the animation.
Lower numbers make for quicker animations that finish sooner.
<script src="RGraph.common.core.js"></script> <script src="RGraph.line.js"></script>Put this where you want the chart to show up:
<canvas id="cvs" width="600" height="250" style="border-radius: 5px; box-shadow: 3px 3px 3px #ccc"> [No canvas support] </canvas>This is the code that generates the chart: