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

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

<script>
    line = new RGraph.SVG.Line({
        id: 'cc',
        data: [3,3.6,3.2,4.2,3.4,4,3,5,4.1,4.7,4,4.9,3.1],
        options: {
            colors: ['white'],
            filled: true,
            filledColors: ['Gradient(red:rgba(255,0,0,0.75):rgba(255,0,0,0.35):rgba(0,0,0,0.25))'],
            backgroundGridColor: '#666',
            textColor: 'white',
            yaxisColor: 'gray',
            xaxisColor: 'gray'
        }
    }).trace().responsive([
        {maxWidth:null,width:700,height:275,options:{linewidth:7,textSize:14,xaxisLabels: ['2006','2007','2008','2009','2010','2011','2012','2013','2014','2015','2016','2017','2018']},parentCss:{'float':'right',textAlign:'center'}},
        {maxWidth:800,width:400,height:200,options:{linewidth:5,textSize:10,xaxisLabels: ['`06','`07','`08','`09','`10','`11','`12','`13','`14','`15','`16','`17','`18'],},parentCss:{'float':'none',textAlign:'center'}}
    
    ]);
    
    function toggleSpline ()
    {
        line.set('spline', !line.get('spline'));
        RGraph.SVG.redraw();
    }
</script>