How do you graph 24 hour times (e.g., 23:01:35) , as y-values, in rickshaw?

Question

I have data that lists sunrise and sunset times for a given datetime. I would like to plot these on two different lines. Example data for August 7, 2015 would be:

Sunrise line: {"x" : 1438967378, "y" : "05:19:00"}

Sunset line: {"x" : 1438967378, "y" : "20:33:00"}

I know how to graph datetimes in the x-axis. However, it's not clear how you would go about plotting hours of the day (in a military clock style 22:01:34) for your y-values.

Here the code that I am working with:

$(document).ready(function () {
        $('[data-toggle="tooltip"]').tooltip(); 
        var sunrise_data = {{ sunrise_report }}; // {{ variable }} data passed in via Django view
        var sunset_data = {{ sunset_report }};
        var daylight_data = {{ daylight_report }}; 

        sunrise_data.sort(function (a, b) {
            return parseFloat(a.x) - parseFloat(b.x);
        });
        sunset_data.sort(function (a, b) {
            return parseFloat(a.x) - parseFloat(b.x);
        });
        daylight_data.sort(function (a, b) {
            return parseFloat(a.x) - parseFloat(b.x);
        });

        var seriesData = [sunrise_data, sunset_data, daylight_data];

        var graph = new Rickshaw.Graph({
            element: document.getElementById("sun_chart"),
            renderer: 'multi',
            width: $("div#sun_chart").width(),
            height: 180,
            max: 120,
            min: -10,
            interpolation: "linear",
            dotSize: 4,
            series: [{
                name: 'sunrise',
                data: seriesData.shift(),
                color: 'rgba(255, 0, 0, 0.4)',
                renderer: 'line'
            }, {
                name: 'sunset',
                data: seriesData.shift(),
                color: 'rgba(127, 0, 0, 0.3)',
                renderer: 'line'
            }, {
                name: 'daylight',
                data: seriesData.shift(),
                renderer: 'line',
                color: 'rgba(0, 0, 127, 0.25)'
            }
            ]
        });
        var timeUnit = {
                'name': '12 hour', 
                'seconds': 3600 * 12, 
                'formatter': function(d)
                { 
                    return moment(d).format('h:mm a');
                }
            };

            var x_axis = new Rickshaw.Graph.Axis.Time( { graph: graph, timeUnit: timeUnit } );
            //var y_axis = new Rickshaw.Graph.Axis.Time( { graph: graph, timeUnit: timeUnit } );

        graph.render();

        var detail = new Rickshaw.Graph.HoverDetail({
            graph: graph
        });
    });

score 0 · Answer 1 · edited May 23 '17 at 11:52

On the Y Axis you will have the timestamp of the day, where the tick values are going to be integer. So the Y-Axis will look like (0, 1, 2, ..., 24).

So 16:30 is going to be 16.5. To do that you can see how to convert time to decimal number.

On the X Axis you will have the whole year from 1st of January until December 31.

Your graph will look like this:

Definitely check https://ptaff.ca/soleil/?lang=en_CA

It will help you cross check if your graphs are right.

How do you graph 24 hour times (e.g., 23:01:35) , as y-values, in rickshaw?

1 Answers1