An SVG clipped red and black Line chart

This is an SVG chart that uses a different color for the top half compared to the bottom half. You could use it to show a financial chart where the top half is black and the bottom half is red. There's a HOWTO document available of this technique.

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="position: relative; width: 700px; height: 300px">
    <div id="cc1" style="width: 700px; height: 300px; position: absolute; top: 0; left: 0"></div>
    <div id="cc2" style="width: 700px; height: 300px; position: absolute; top: 0; left: 0"></div>
</div>
This is the code that generates the chart:
<script>
    // The data for both of the charts and some things that we want to
    // make easy to change if necessary
    data            = [4,8,6,5,-3,-2,-1,-5,-6,8,9,4,6,7,5,1,3,5,6,-8,-4,-5,-2,3];
    fills           = ['rgba(0,192,0,0.25)', 'rgba(255,0,0,0.25)' ];
    marginLeft      = 50;
    yaxisScaleMin   = -10;
    yaxisScaleMax   = 10;
    linewidth       = 3;
    
    
    // Create the green part of the line
    line = new RGraph.SVG.Line({
        id: 'cc1',
        data: data,
        options: {
            marginLeft: marginLeft,
            colors: ['#0c0'],
            linewidth: linewidth,
            filled: true,
            filledColors: [fills[0]],
            yaxisScaleMax: yaxisScaleMax,
            yaxisScaleMin: yaxisScaleMin,
            xaxisTickmarks: false,
            backgroundGridBorder: false,
            backgroundGridVlines: false,
            yaxis: false,
            spline: true,
            xaxisColor: '#666'
        }
    }).draw();
    
    // Create the red part of the line
    line2 = new RGraph.SVG.Line({
        id: 'cc2',
        data: data,
        options: {
            yaxis: false,
            yaxisScaleMax: yaxisScaleMax,
            yaxisScaleMin: yaxisScaleMin,
            xaxisColor: '#666',
            marginLeft: marginLeft,
            linewidth: linewidth,
            filled: true,
            filledColors: [fills[1]],
            xaxisTickmarks: false,
            
            // Labels only need to be shown on the bottom chart
            xaxisLabels: [
                '', 'Jan', '',
                '', 'Feb', '',
                '', 'Mar', '',
                '', 'Apr', '',
                '', 'May', '',
                '', 'Jun', '',
                '', 'Jul', '',
                '', 'Aug', '',
                '', 'Sep', '',
                '', 'Oct', '',
                '', 'Nov', '',
                '', 'Dec', ''
            ],
            backgroundGridBorder: false,
            backgroundGridVlines: false,
            spline: true
        }
    }).draw();
    
    
    
    
    
    // Create the  clipPath element that sits inside the <def> tag
    clip = RGraph.SVG.create({
        svg: line.svg,
        type: 'clipPath', // This is case sensitive!
        parent: line.svg.defs,
        attr: {
            id: 'myClip'
        }
    });
    
    // Create the shape element for the clip area
    RGraph.SVG.create({
        svg: line.svg,
        parent: clip,
        type: 'rect',
        attr: {
            // These coordinates create a rect that is the same size as the top half of the SVG tag
            x: 0,
            y: 0,
            width: 900,
            height: 150
        }
    });
    
    // Now set the clip-path attribute on the first Line charts' all-elements group
    line.svg.all.setAttribute(
        'clip-path',
        'url(#myClip)'
    );
    
    
    
    
    
    // Create the  clipPath element that sits inside the <def> tag *** for the bottom half of the chart ***
    clip2 = RGraph.SVG.create({
        svg: line2.svg,
        type: 'clipPath', // This is case sensitive!
        parent: line2.svg.defs,
        attr: {
            id: 'myClip2'
        }
    });
    
    // Create the shape element for the clip area
    RGraph.SVG.create({
        svg: line2.svg,
        parent: clip2,
        type: 'rect',
        attr: {
            // These coordinates create a rect that is the same size as the bottom half of the SVG tag
            x: 0,
            y: 150,
            width: 900,
            height: 150
        }
    });
    
    // Now set the clip-path attribute on the second Line charts all-elements group
    line2.svg.all.setAttribute(
        'clip-path',
        'url(#myClip2)'
    );
</script>