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, marginLeft: 50, marginRight: 35, marginBottom: 50, yaxisScaleMin: 'mirror', yaxisScaleMax: 50, yaxisScaleUnitsPre: '$', 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>