# A vertical line chart using the SVG Scatter chart

This goes in the documents header:

    <script src="RGraph.svg.common.core.js"></script>
    <script src="RGraph.svg.scatter.js"></script>

Put this where you want the chart to show up:

    <div style="width: 300px; height: 600px" id="chart-container"></div>

This is the code that generates the chart:

    <script>
        data = [
            {x:50, y:1},
            {x:42, y:3},
            {x:89, y:5},
            {x:76, y:7},
            {x:16, y:9},
            {x:44, y:11},
            {x:44, y:13}
        ];

        new RGraph.SVG.Scatter({
            id: 'chart-container',
            data: data,
            options: {
                backgroundGridVlinesCount: 5,
                backgroundGridHlines: false,
                backgroundGridBorder: false,
                line: true,
                lineLinewidth: 2,
                yaxisMax: 14,
                xaxisMin: 0,
                xaxisMax: 100,
                xaxisScale: true,
                xaxisLabelsCount: 5,
                xaxisLabelsPositionEdgeTickmarksCount: 5,
                yaxisLabelsPositionEdgeTickmarksCount: 14,
                yaxisLabels: [
                    '', 'Bazz',
                    '', 'Lucy',
                    '', 'Pete',
                    '', 'Olga',
                    '', 'Hank',
                    '', 'Jane',
                    '', 'Jack', ''
                ],
                yaxisScale: false,
                gutterLeft: 50,
                tickmarksSize: 0,
                xaxis: false
            }
        }).draw();
    </script>

« Back