Scatter chart with crosshairs is showing the date as a number

Share RGraph:  

« Back to message list

Enter your email address to get email updates on this topic. You can stop receiving updates by clicking the link in the update email messages.

Posted by Kristof on 10th July 2017
Hi,

My problem is the following, I fill a graph the following way with the data and dates www.rgraph.net/demos/scatter-date-time-values.html

And i want to use crosshairsCoords to show me the date of the data, but it shows the UNIX timestamp instead, and I want it to show a human-readable way.
Posted by Richard on 10th July 2017
Hi there,

Looking at the source it seems that I don't have anything for that. Which is strange as it's by no means an obscure thing at all.

I'll have to add it.

In the mean time you could format the number yourself. The relevant place (if I understand what you're doing correctly) will be just above line 1297 - where the .innerHTML is being set. You could do something like this to test that its the correct place:

xCoord = 'FOO';
yCoord = 'BAR';

And then, assuming that it's the right place, do something like this:

xCoord = myXFormatter(obj, xCoord);
yCoord = myYFormatter(obj, yCoord);


And then obviously define those functions to format the number as you wish with the JavaScript Date object (the xCoord number will be a JavaScript timestamp.

Richard
Posted by Kristof on 11th July 2017
Thanks for the quick answer, I could format it the way I wanted.
Posted by Richard on 11th July 2017
Hi there,

I've just released a new beta with two new properties:

crosshairsCoordsFormatterX
crosshairsCoordsFormatterY

These allow you to specify a function that can format and return the value as you want it to appear.

Example page is pasted below, and the beta I've just released has the new feature. And when I release 4.63 the demo will be online here:

www.rgraph.net/demos/scatter-crosshairs-datetime.html

(its not there yet)



You can download the new beta here:

www.rgraph.net/download#beta














<!DOCTYPE html >
<html>
<head>

     <script src="../libraries/RGraph.common.core.js" ></script>
     <script src="../libraries/RGraph.common.dynamic.js" ></script>
     <script src="../libraries/RGraph.scatter.js" ></script>
    
     <title>RGraph demo: A Scatter chart with the crosshairs showing datetimes</title>
    
    
     <meta name="robots" content="noindex,nofollow" />
     
</head>
<body>
     <h1>A Scatter chart with the crosshairs showing datetimes</h1>

     <canvas id="cvs" width="600" height="400">[No canvas support]</canvas>
    
     <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>

</body>
</html>

Add a reply




« Back to message list