An SVG Line chart showing revenue over time

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: 950px; height: 250px" id="chart-container"></div>

This is the code that generates the chart:

<script>
    data = [500,600,800,720,900,1100];

    line = new RGraph.SVG.Line({
        id: 'chart-container',
        data: data,
        options: {
            colors: ['#00AD4B'],
            linewidth: 5,
            backgroundGrid: false,
            xaxisLabels: ['Febuary','March','April','May','June','July'],
            backgroundGridColor: '#999',
            hmargin: 50,
            tickmarksStyle: 'circle',
            tickmarksSize: 8,
            textSize: 18,
            marginLeft: 75
        }
    }).draw();

    label = RGraph.SVG.numberFormat({
        num: line.data[0][line.data[0].length - 1],
        thousand: ','
    });

    // Add the label that sits above the last point
    RGraph.SVG.text({
        object: line,
        x:      line.coords[line.coords.length - 1].x,
        y:      line.coords[line.coords.length - 1].y - 25,
        text:   label,
        valign: 'bottom',
        halign: 'center',
        size:   20,
        bold:   true
    });
</script>