An SVG Line chart with tooltips

A simple Line chart that has the X axis positioned in the middle and has tooltips enabled. The tickmarks are of a dot style - ie a point with a circle around them.

This goes in the documents header:

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

Put this where you want the chart to show up:

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

This is the code that generates the chart:

<script>
    new RGraph.SVG.Line({
        id: 'chart-container',
        data: [
            [15,23,-5,-15,23,35,31],
            [45,23,45,12,50,12,45],
            [5,6,3,5,8,9,44]
        ],
        options: {
            hmargin: 15,
            gutterLeft: 50,
            gutterRight: 35,
            gutterBottom: 50,
            yaxisMin: 'mirror',
            yaxisMax: 50,
            yaxisUnitsPre: '$',
            linewidth: 3,
            backgroundGridVlinesCount: 7,
            backgroundGridHlinesCount: 10,
            tooltips: [
                'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday',
                'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday',
                'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'
            ],
            xaxisLabels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
        }
    }).draw();
</script>