Updated multi-color Line chart demo

Here's an updated version of a demo that's already in the download archive. The colors have been changed, tickmarks added, it now uses the ES6 spread operator when copying the configuration to the second chart, a key has been added and the way that the gradients are setup (using the beforedraw RGraph event). All the code for it is shown below and it should work as-is with version 6.08.

<script>
    // The data for both of the Line chart objects
    data = [8,4,6,2,1,5,3,3,4,8,9,8,4,1,3,4,7,8,8,5,6,4,1,2,3,4,2,3,1,5,3,5,1,5,6,8,7,9];
    
    // Draw a Line chart that shows the fill of the chart
    line = new RGraph.Line({
        id: 'cvs',
        data: data,
        options: config = {
            xaxisLabels: [
                '','Q1\n2014','',       '','Q2\n2014','',
                '','Q3\n2014','',       '','Q4\n2014','',
                '','Q1\n2015','',       '','Q2\n2015','',
                '','Q3\n2015','',       '','Q4\n2015',''
            ],
            filled: true,
            backgroundGridColor: '#ddd',
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            xaxis: false,
            yaxis: false,
            spline: true,
            yaxisScaleUnitsPost: '%',
            marginLeft: 50,
            marginBottom: 50,
            textColor: 'gray',
            colors: ['rgba(0,0,0,0)'],
            shadow: false,
            tickmarksSize: 3,
            tickmarksStyle: 'filledcircle',
            key: ['Very Low','Normal','High','Very high'],
            keyColors: ['blue','green','orange','red'],
            keyPosition: 'margin',
            keyPositionX: 65,
            keyColorShape: 'circle',
            keyLabelsSize: 16,
            linewidth: 3,
            textSize: 16,
            textFont: "'Calibri Light', sans-serif"
        }
    }).on('beforedraw',function (obj)
    {
        // Create the gradient that is used as the stroke color
        grad = obj.context.createLinearGradient(0,35,0,200);
        grad.addColorStop(0, '#FF642C');
        grad.addColorStop(0.25, '#FF642C');
        grad.addColorStop(0.25, 'orange');
        grad.addColorStop(0.5, 'orange');
        grad.addColorStop(0.5, '#5ADDAA');
        grad.addColorStop(0.75, '#5ADDAA');
        grad.addColorStop(0.75, '#2BB3FF');
        grad.addColorStop(1.0, '#2BB3FF');
        
        
        // Create the gradient that is used as the fill color
        gradFill = obj.context.createLinearGradient(0,35,0,200);
        gradFill.addColorStop(0, '#F8D3D7');
        gradFill.addColorStop(0.25, '#F8D3D7');
        gradFill.addColorStop(0.25, '#FFE1D8');
        gradFill.addColorStop(0.5, '#FFE1D8');
        gradFill.addColorStop(0.5, '#E0F9EE');
        gradFill.addColorStop(0.75, '#E0F9EE');
        gradFill.addColorStop(0.75, '#DAF0FF');
        gradFill.addColorStop(1.0, '#DAF0FF');
    
        // Apply the gradient to the charts fill
        obj.set({
            filledColors: [gradFill]
        });
    }).draw();
    
    
    
    
    // Now create and draw the second, non-filled line that sits on
    // top of the fill.
    line2 = new RGraph.Line({
        id: 'cvs',
        data: data,
        options: {
            ...config,
            filled: false,
            labels: null,
            xaxis: false,
            yaxis: false,
            yaxisLabels: false,
            backgroundGrid: false,
            colors: [grad]
        }
    }).draw();
</script>