A black line chart

[No canvas support]

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.

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:
<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: