A Scatter chart with the crosshairs showing datetimes

[No canvas support]

This goes in the documents header: 
<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>

« Back