Chartjs-ChartJS Unix Time Values changed

by

0👍

✅

For anyone who has any similar problem in future, I patched together a few solutions I found.

Firstly, from here Unix Timestamp in JavaScript, I wrote the method:

            getTimeString: function(dateString) {
            var hours = new Date(dateString).getHours();
            var mins = new Date(dateString).getMinutes();
            return Math.round((new Date("1970-02-01 " + hours + ":" + mins)).getTime());
        }

The important part here is to make sure you have the same day. Not doing this will cause the ChartJS graph to plot the times in different places on the y-axis, even if the hours are the same.

Then from this StackOverFlow question and the related plunker, in the chart options, I have:

{
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    yAxes: [{
                        position: 'left',
                        ticks: {
                            callback: value => {
                                let date = moment(value);
                                if (date.diff(moment('1970-02-01 23:59:59'), 'minutes') === 0) {
                                    return null;
                                }
                                return date.format('H:mm');
                            },
                            stepSize: 3.6e+6
                        }
                    }]
                }, //end scales
                tooltips: {
                    callbacks: {
                        label: function(toolTipItem, data) {
                            let date = moment(toolTipItem.yLabel);
                            if (date.diff(moment('1970-02-01 23:59:59'), 'minutes') === 0) {
                                return null;
                            }
                            return date.format('H:mm');
                        }
                    }
                }
            }

Pay attention to the callbacks. They will format the time, calculating the difference from a set time to the time you need plotted. In the first function, you could really use any day, it wouldn’t matter, as long as it’s the same day. The stepSize will display hourly intervals on the yAxis.

Leave a comment