This is an SVG version of an older canvas based demo that has been updated to be a bit more up-to-date style wise. The vertical lines on the grid have been removed, the X and Y axes have been removed and instead of being angular the line is now a spline (ie its curvy). And it now uses the trace()
animation effect too. The chart is filled and the filledAccumulative
option is set to true.
<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="width: 600px; height: 300px" id="cc"></div>This is the code that generates the chart:
<script> new RGraph.SVG.Line({ id: 'cc', data: [ [4,6,12,16,8,4,2,8,18,16,14,16], [2,4,8,4,2,6,6,12,8,10,6,8], [1,3.5,5,3,4,5,6,11,8,9,5,7] ], options: { key: ['Robert','Daniel','Janice'], keyColors: ['green','blue','red'], xaxisLabels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'], marginLeft: 40, marginTop: 55, marginRight: 15, marginBottom: 20, colors: ['black', 'black', 'black'], filled: true, filledAccumulative: true, filledColors: ['Gradient(red:white)', 'Gradient(blue:white)', 'Gradient(green:white)'], yaxisScaleUnitsPost: '%', linewidth: 2, marginInner: 0, title: 'Robert, Daniel and Janices stats', textColor: '#333', textFont: 'Arial', spline: true, backgroundGridBorder: false, backgroundGridVlines: false, xaxis: false, yaxis: false, marginLeft: 50, marginBottom: 50 } }).trace(); </script>