A demo of the SVG vscissorsclose() effect

The vscissorsclose() effect conceals the SVG tag by using increasing (in vertical size) DIV tags. They increase alternately from the top and the bottom of the tag.

This goes in the documents header:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="RGraph.svg.common.core.js"></script>
<script src="RGraph.svg.common.fx.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" id="chart-container"></div>
This is the code that generates the chart:
<script>
    new RGraph.SVG.Line({
        id: 'chart-container',
        data: [4,8,6,3,5,9,6],
        options: {
            linewidth: 5,
            hmargin: 0,
            title: 'The vscissorsclose() effect',
            marginLeft: 50,
            marginBottom: 50,
            yaxisScaleDecimals: 2,
            tickmarksStyle: 'circle',
            tickmarksLinewidth: 5,
            tickmarksSize: 7,
            xaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
            shadow: true
        }
    }).draw()
      .vscissorsclose();
</script>