<script src="RGraph.common.core.js"></script> <script src="RGraph.common.dynamic.js"></script> <script src="RGraph.scatter.js"></script>Put this where you want the chart to show up:
<canvas id="cvs" width="600" height="400"> [No canvas support] </canvas>This is the code that generates the chart:
<script> var data = [ ['2016-01-01',68], ['2016-02-28',65], ['2016-03-19',54], ['2016-04-12',62], ['2016-05-13',45], ['2016-06-02',21], ['2016-06-02',21], ['2016-07-02',21], ['2016-08-02',21], ['2016-09-02',21], ['2016-11-02',21], ['2016-12-02',21] ]; var scatter = new RGraph.Scatter({ id: 'cvs', data: data, options: { gutterLeft: 50, unitsPost: 'Kg', xmin: '2016-01-01', xmax: '2016-12-31', line: true, crosshairs: true, crosshairsSnap: true, crosshairsCoords: true, crosshairsCoordsLabelsX: 'Date', crosshairsCoordsLabelsY: 'Weight', labels: ['Q1','Q2','Q3','Q4'], crosshairsCoordsFormatterY: function (args) { return args.value + 'Kg'; }, crosshairsCoordsFormatterX: function (args) { var obj = args.object, coord = args.value, months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']; var d = new Date(coord), date = (function (date) { if (date === 1) { date = '1st'; } else if (date === 2) { date = '2nd'; } else if (date === 3) { date = '3rd'; } else { date = date + 'th'; } return date; })(d.getDate()), month = months[d.getMonth()], year = d.getFullYear(); return '{1} {2} {3}'.format( date, month, year ); } } }).draw(); </script>