A graduated orange filled SVG Line chart
View the bare-bones version of this demo with any interactive features or animations enabled

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 SVG
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 gradientThis goes in the documents header:
<script src="RGraph.svg.common.core.js"></script> <script src="RGraph.svg.line.js"></script>Put this where you want the chart to show up:
<div style="float: right"> <div id="cc" style="width: 700px; height: 275px; background-color: black"></div> <br /> <button onclick="toggleSpline()" style="font-size:16pt">Toggle the spline option</button> </div>This is the code that generates the chart - it should be placed AFTER the
div
tag: