# An SVG Line chart showing UFO sightings

This goes in the documents header:

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

Put this where you want the chart to show up:

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

This is the code that generates the chart:

    <script>
        line = new RGraph.SVG.Line({
            id: 'chart-container',
            data: [0,2,3,2,3,6,5,6,10,42,46],
            options: {
                backgroundColor: '#eee',
                backgroundGridColor: 'white',
                backgroundGridVlinesCount: 20,
                backgroundGridLinewidth: 2,
                xaxisLabels: ['1910','1920','1930','1940','1950','1960','1970','1980','1990','2000','2010'],
                colors: ['black'],
                linewidth: 3,
                tickmarksStyle: 'filledcircle',
                xaxis: false,
                yaxis: false,
                yaxisUnitsPost: 'k'
            }
        }).trace();

    </script>

« Back