New dual-color Line chart added to the download archive

I've just added a new demo to the RGraph download archive which shows a dual-color Line chart - one color for positive values and another color for negative values. The demo code is shown below and it should function correctly with version 6.06 of RGraph (the current version). It will be included in the next available download archive (version 6.07) whenever that is available.

The chart uses the beforedraw and draw events in order to install and remove clipping - which facilitates using two separate colors for positive and negative values.

Note also that the second chart uses the es6 spread operator so if you're using a particularly old browser then this demo may not function correctly.

// The first line chart is clipped to the top half of the
// canvas so you only see the top half of the chart. The
// clipping is installed by the clip: property. As a
// result of it you only see the top half of the chart
// (which is red)
 line1 = new RGraph.Line({
    id: 'cvs',
    data: data = [
        4,8,6,3,2,4,-5,-4,5,6,-1,-9,1,2,-3,-5,-7,-4,-2,-2,6,2,3,4,
        4,8,6,2,3,5,1,4,9,5,6,4,3,8,7,5,6,4,5,1,2,3,4,6
    ],
    options: opt = {
        textSize: 15,
        xaxisPosition: 'center',
        yaxis: false,
        backgroundGridHlinesCount: 10,
        backgroundGridVlines: false,
        backgroundGridBorder: false,
        shadow: false,
        linewidth: 0.5,
        colors: ['red'],
        filled: true,
        filledColors:['rgba(255,128,128,0.25)'],
        marginInner: 15,
        spline: true,
        xaxisLabels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
        xaxisTickmarksCount: 12,
        clip: 'tophalf'
    }
}).draw();


// This is the chart object that shows the bottom half of the
// chart. Again, clipping is used to accomplish this and is again
// installed by the clip: property.
// This chart uses blue colors instead instead of red.
line2 = new RGraph.Line({
    id: 'cvs',
    data: data,
    options: {
        ...opt, // Use the ES6 spread operator to combine
                // the options from above
        colors: ['blue'],
        filledColors: ['rgba(128,128,255,0.25)'],
        yaxisLabels: false,
        xaxisLabels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
        clip: 'bottomhalf'
    }
}).draw();