Showing a duration of time within a Chart.js chart

Question

I'm attempting to create a chart using Chart.JS for a project that will show the duration a device has been switched on for in a given day.

The dates are on the Y-axis with the X-axis containing a 24-hour time scale from 00:00 to 23:59 with horizontal bars expressing the time durations. I suppose I'm attempting to make something similar in style to a Gantt chart.

The Javascript code I have at the moment is this:

var timeAxis = [];
var dateAxis = [];
var startDate = moment('2000-01-01 00:00');
var endDate = moment('2000-01-01 23:59');

while (startDate <= endDate) {
    timeAxis.push(startDate.format('HH:mm'));
    startDate.add(1, 'minutes');
}

startDate = moment('2019-12-06');
endDate = moment('2019-12-13');

while (startDate <= endDate) {
    dateAxis.push(startDate.format('ddd DD/MM'));
    startDate.add(1, 'days');
}

var ctx = document.getElementById('deviceOnChart').getContext('2d');
var testChart = new Chart(ctx, {
    type: 'horizontalBar',
    data: {
        datasets: [{
            label: 'Device On Time',
            data: [
                '2019-12-13 06:32',
                '2019-12-12 09:26',
                '2019-12-11 11:45',
                '2019-12-10 18:06',
                '2019-12-09 03:56',
                '2019-12-08 15:34',
                '2019-12-07 12:53',
                '2019-12-06 21:35',
            ],
            backgroundColor: 'rgba(0, 100, 0, 0.2)',
            borderColor: 'rgba(0, 150, 0, 1)',
            borderWidth: 0.5,
            xAxisID: 'OnTime'
        },
        {
            label: 'Device Off Time',
            data: [
                '2019-12-13 21:34',
                '2019-12-12 17:28',
                '2019-12-11 22:58',
                '2019-12-10 21:45',
                '2019-12-09 14:27',
                '2019-12-08 19:35',
                '2019-12-07 18:53',
                '2019-12-06 22:35'
            ],
            backgroundColor: 'rgba(100, 0, 0, 0.2)',
            borderColor: 'rgba(150, 0, 0, 1)',
            borderWidth: 0.5,
            xAxisID: 'OffTime'
        }]
    },
    options: {
        scales: {
            yAxes: [{
                type: 'time',
                time: {
                    unit: 'day',
                    parser: 'ddd DD/MM',
                    displayFormats: {
                        day: 'ddd DD/MM'
                    }
                },
                ticks: {
                    source: 'labels'
                },
                labels: dateAxis
            }],
            xAxes: [{
                id: 'OnTime',
                type: 'time',
                time: {
                    unit: 'minute',
                    parser: 'HH:mm',
                    displayFormats: {
                        minute: 'HH:mm'
                    }
                },
                ticks: {
                    source: 'labels',
                    autoSkip: true
                },
                labels: timeAxis,
                stacked: true
            },
            {
                display: false,
                id: 'OffTime',
                type: 'time',
                time: {
                    unit: 'minute',
                    parser: 'HH:mm',
                    displayFormats: {
                        minute: 'HH:mm'
                    }
                },
                ticks : {
                    source: 'labels',
                    autoSkip: true
                },
                labels: timeAxis,
                stacked: true
            }]
        }
    }
});

I have also created a JSFiddle to provide a demo of what the chart looks like at present (which is pretty bad). I've never really done much work with time axes in Chart.JS before so it's proving to be somewhat confusing for me and the documentation seems a little sparse in places.

I've been able to get the axes to display the dates and times correctly in what I am assuming is in a correct manner. However, I am uncertain as to how to correctly format the data such that Chart.JS can parse it. At the moment the chart is empty presumably because it doesn't know how to interpret the data I am trying to get it to display.

I have tried specifying the data as an array of objects with x and y attributes containing the time and date respectively. I have also tried putting it as a single dataset, as well as two datasets with the X-axis set as stacked and the chart just will not show anything.

Any help that anyone could provide would be much appreciated.

Hi Dimgeek, your question doesn't seem to follow the guidelines found herehttps://stackoverflow.com/help/how-to-ask, this seems like you're looking for someone to complete a piece of work for you rather than help you find your answer. Could you narrow down the question to a specific problem that would allow you to develop your own solution? The question currently feels like it's asking someone to do this work for you because you've hit an issue. — Oliver Hemsted
What is your data format (what does it mean) and what do you want to have as a result? Do you want (e.g. for 2019-12-13) a red bar from 00:00 to 06:32, a green bar from 06:32 to 21:34 and a red bar from 2:34 to 23:59? Or how do you want to display on and off? — HeadhunterKev
I am trying to get in to show a green bar from the time the device is switched on until the time it is switched off. In other words, I am trying to get it to show the duration the device was on for. For example from 2019-12-13 at 06:32 until 21:34 and so on for each day. — Dimgeek

HeadhunterKev HeadhunterKev · Accepted Answer · 2019-12-16T13:19:05

Here's my solution: https://jsfiddle.net/e6td4sh0/

I use the new floating-bar-feature from the quite new chart.js 2.9-version.

Everything works, except the timezone and the time format for the tooltip. I post the complete code here when I solved these problems. If somebody else solves them I would be glad if he/she updates my answer with the correct code.

Showing a duration of time within a Chart.js chart

1 Answers