This is similar to the SVG demo svg-line-filled-dark.html but the trace effect traces each dataset seperately with a small delay in between.
<script src="RGraph.common.core.js"></script> <script src="RGraph.line.js"></script>Put this where you want the chart to show up:
<div style="background-color: black"> <canvas id="cvs" width="700" height="300">[No canvas support]</canvas> </div>This is the code that generates the chart:
<script> dataset1 = [ 213, 212, 208, 209, 207, 205, 204, 206, 205, 202, 203, 202, 201, 204, 205, 203, 142, 156, 152, 164, 165, 135, 198, 185, 201, 195, 197, 194, 135, 132, 153, 156, 167, 174, 193, 195, 192, 191, 190, 185, 188, 189, 187, 187, 180, 184, 186, 185, 215, 218, 220, 171, 178, 182, 181, 175, 181, 179, 178, 179, 178, 179, 175, 178, 177, 176, 174, 173, 175, 177, 174, 173, 175, 174, 172, 171, 170, 169, 168, 169, 167, 165, 164, 162, 160, 158, 155, 156, 157, 155, 159, 187, 184, 185, 186, 183, 182, 184, 185, 187 ]; dataset2 = [ 120, 123, 121, 120, 125, 122, 121, 120, 118, 116, 113, 114, 111, 108, 106, 118, 124, 123, 120, 134, 135, 115, 116, 125, 132, 153, 148, 151, 165, 164, 166, 171, 178, 175, 176, 179, 181, 183, 183, 185, 188, 189, 210, 213, 220, 184, 186, 145, 156, 149, 132, 135, 132, 133, 128, 129, 126, 123, 122, 115, 101, 213, 256, 255, 248, 245, 240, 238, 233, 212, 245, 255, 251, 233, 251, 212, 156, 157, 184, 189, 194, 194, 192, 201, 200, 203, 214, 228, 264, 233, 264, 254, 258, 251, 235, 239, 233, 212, 244, 241 ]; new RGraph.Line({ id: 'cvs', data: [ dataset1, dataset2 ], options: { backgroundGridVlines: false, backgroundGridBorder: false, backgroundGridColor: '#999', shadow: false, textColor: 'white', textSize: 16, xaxisLabels: [ '', 'Q1', '', '', 'Q2', '', '', 'Q3', '', '', 'Q4', '' ], yaxisScaleUnitsPost: 'kg', marginBottom: 35, marginLeft: 70, marginRight: 10, marginTop: 25, linewidth: 2, filled: true, filledAccumulative: true, filledColors: [ 'Gradient(rgba(255,0,0,0.3):rgba(255,0,0,1))', 'rgba(0,0,0,0)' ], colors: ['red','transparent'], tickmarksStyle: null } }).trace(); setTimeout(function () { new RGraph.Line({ id: 'cvs', data: [ dataset1, dataset2 ], options: { yaxisScaleMax: 450, backgroundGridVlines: false, backgroundGridBorder: false, backgroundGridColor: '#999', shadow: false, textColor: 'white', textSize: 16, xaxisLabels: [ '', 'Q1', '', '', 'Q2', '', '', 'Q3', '', '', 'Q4', '' ], yaxisScaleUnitsPost: 'kg', marginBottom: 35, marginLeft: 70, marginRight: 10, marginTop: 25, linewidth: 2, filled: true, filledAccumulative: true, filledColors: [ 'rgba(0,0,0,0)', 'Gradient(rgba(0,0,0,0.75):rgba(0,255,0,1))' ], tickmarksStyle: null } }).trace(); }, 250); </script>