This is another simple-yet-aesthetically pleasing line chart. It's a Line chart, which doesn't use the spline option so it isn't curved, 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 (24th September 2018) 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 theres 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 nd 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 id="cc" style="width:700px; height: 300px"></div>This is the code that generates the chart:
<script> var 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: { linewidth: 7, colors: ['white'], filled: true, filledColors: ['Gradient(red:rgba(255,0,0,0.75):rgba(255,0,0,0.4):rgba(0,0,0,0.25))'], backgroundGridColor: '#666', textColor: 'white', yaxisColor: 'gray', xaxisColor: 'gray', xaxisLabels: ['2006','2007','2008','2009','2010','2011','2012','2013','2014','2015','2016','2017','2018'], textSize: 16 } }).trace(); </script>