This is a Line chart that has some custom values applied to it. It's a
filled chart, also using the filledAccumulative
option too so the datasets
are stacked one or top of the other. Gradients have been given to the fills
and different colors given to the strokes. It's also using the
trace()
effect.
The gradients that are used as the fills aren't used for the stroke colors of the lines - those are separate green and blue (they aren't set specifically - but rather using the defaults instead.
There's a canvas version of this chart where the datasets are traced individually and sequentially.
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="width: 750px; height: 300px; background-color: black" id="chart-container"></div>This is the code that generates the chart:
<script> new RGraph.SVG.Line({ id: 'chart-container', data: [ [ 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 ], [ 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 ] ], 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: 3, filled: true, filledAccumulative: true, filledColors: [ 'Gradient(rgba(255,0,0,1):rgba(255,0,0,0.3))', 'Gradient(rgba(0,255,0,1):rgba(0,0,0,0.75))' ] } }).trace(); </script>