« Previous       Home page demos       Next »

An SVG Line chart using the trace effect

A dark themed filled Line chart that also has the spline option enabled. Circular tickmarks are enabled. The SVG has a black background and the line is coloured dark blue. It uses the trace effect and has a semi-opaque fill color - so you can see the background through it.

Note that this choice of colours may not be best suited for someone who has sight difficulties as the difference in colours (the black and the dark blue) may be too slight for them to distinguish.

Also, a graph that shows the achievements of individual figures, like this one does, may be more suited to a Bar (horizontal or vertical) as the data is not really a continuing series, but more a set of indiviual numbers that apply (in this case) to a group of people.

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'],
            marginLeft: 65,
            marginRight: 40,
            marginBottom: 50,
            marginTop: 20,
            xaxis: false,
            yaxis: false,
            yaxisScaleUnitsPost: 'm',
            yaxisScaleUnitsPre: '$',
            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>