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: {
            backgroundGrid: false,
            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,
            marginTop: 50,
            marginBottom: 50,
            textColor: 'gray',
            colors: ['rgba(0,0,0,0)'],
            shadow: false,
            keyLabelsSize: 16,
            linewidth: 1,
            textSize: 16,
            textFont: "'Calibri Light', sans-serif"
        }
    }).on('beforedraw',function (obj)
    {
        var height = obj.canvas.height;

        // Create the gradient that is used as the fill color
        grad = obj.context.createLinearGradient(0,50,0,height - 50);

        grad.addColorStop(0, '#0003');
        grad.addColorStop(0.2, '#0003');
        grad.addColorStop(0.2, '#f0f3');
        grad.addColorStop(0.4, '#f0f3');
        grad.addColorStop(0.4, '#0a03');
        grad.addColorStop(0.6, '#0a03');
        grad.addColorStop(0.6, '#00f3');
        grad.addColorStop(0.8, '#00f3');
        grad.addColorStop(0.8, '#f003');
        grad.addColorStop(1.0, '#f003');
    
        // Apply the gradient to the charts fill
        obj.set({
            filledColors: [grad]
        });
    }).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: {
            ...line.properties,
            filled: false,
            labels: null,
            xaxis: false,
            yaxis: false,
            yaxisLabels: false,
            backgroundGrid: false,
            key: null,
            key: ['V Low','Low','Normal','High','V high'],
            keyColors: ['red','blue','#0a06','#f0f','black'],
            keyPosition: 'margin',
            keyPositionX: 65,
            keyColorShape: 'circle',
            responsive: [
                {maxWidth: null, width: 700, height: 300,options: {linewidth:2}},
                {maxWidth: 900, width: 500, height: 200,options: {linewidth:1}}
            ]
        }
    }).on('beforedraw', function (obj)
    {
        var height = obj.canvas.height;

        // Create the gradient that is used as the stroke color
        grad = obj.context.createLinearGradient(0,50,0,height - 50);
        grad.addColorStop(0, '#000');
        grad.addColorStop(0.2, '#000');
        grad.addColorStop(0.2, '#f0f');
        grad.addColorStop(0.4, '#f0f');
        grad.addColorStop(0.4, '#0a0');
        grad.addColorStop(0.6, '#0a0');
        grad.addColorStop(0.6, '#00f');
        grad.addColorStop(0.8, '#00f');
        grad.addColorStop(0.8, '#f00');
        grad.addColorStop(1.0, '#f00');
        
        obj.set({
            colors: [grad]
        });
    }).draw();
</script>