# An SVG Line chart using the trace effect

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="width: 950px; height: 400px; background-color: black; box-shadow: 3px 3px 3px #ccc" id="chart-container"></div>

This is the code that generates the chart:

    <script>
        new RGraph.SVG.Line({
            id: 'chart-container',
            data: [5,8,6,3,4,1,9,8,2,3,5,6,7,8,9,4,5,6,3,2,5,4,8,6,4,5,3,1,6,4,5],
            options: {
                backgroundGridVlinesCount: 11,
                hmargin: 0,
                textColor: 'white',
                textSize: 14,
                textFont: 'Verdana',
                filled: true,
                filledColors: ['rgba(25,51,74,0.75)'],
                colors: ['#5AF'],
                gutterLeft: 65,
                gutterRight: 40,
                gutterBottom: 50,
                gutterTop: 20,
                yaxis: false,
                xaxis: false,
                yaxisUnitsPost: 'm',
                yaxisUnitsPre: '$',
                tickmarksStyle: 'circle',
                tickmarksFill: 'black',
                tickmarksLinewidth: 2,
                tickmarksSize: 6,
                linewidth: 4,
                spline: true,
                xaxisLabels: ['Kev','John','Fred','July','Fred','Olga','Ben','Boris','Lenny','Pete','Lewis']
            }
        }).trace();
    </script>

« Back