# A demo of the SVG vblindsopen effect

The VBlindsOpen effect reveals the chart by starting with the tag covered and then reducing the DIV tags that cover it in width. Like vertical blinds.

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 vblindsopen effect',
                gutterLeft: 50,
                gutterBottom: 50,
                yaxisDecimals: 2,
                tickmarksStyle: 'circle',
                tickmarksLinewidth: 5,
                tickmarksSize: 7,
                xaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
                shadow: true
            }
        }).vblindsopen();
    </script>