A graduated orange filled SVG Line chart

This is another simple yet aesthetically pleasing chart. It's a Line chart, which doesn't use the spline option so it isn't curved, and which uses a gradient as the fill color. It also uses the trace() animation effect.

There's not a lot else to say about this chart - though this is a good point at which to tell you that the gradient handling code is due an upgrade. Currently you can pass a gradient like this: Gradient(red:white) and this is nice and simple - but it doesn't afford you a lot of control over the gradient.

The code that parses the gradient can handle more values than that, so what I'm thinking is a JSON variation so that many more values are possible and there's plenty of room for future options. Here's what it might look like:

Gradient(red:white) // Current style (will still work just fine)
Gradient({colors: ["red","white"]}) // Specifying just the colors but in a JSON style
Gradient({colors: ["red","white"], start:125, end:250}) // Specifying the colors and the start/end points to the gradient
Gradient({colors: ["red","white"], gradientUnits: "objectBoundingBox"}) // Specifying the colors and the units for the gradient

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

<div id="cc" style="width:700px; height: 300px"></div>