Chart.js: Display formatted times on y-axis

[daveharris]

Hi,

I am trying to upgrade my graph from Chart.js v1 to v2. So far it's great, a lot of the custom stuff I had to do before (like scaleSteps, scaleStepWidth, scaleStartValue) are now all done for me. Huge 👍

However, I cannot plot time data on my y-axis. I was really excited to see that there is a now a time scale type. However, your documentation says that it only works on the x-axis 😦

My data is in the format of seconds and I am trying to re-display it into a HH:MM:SS format to make it more readable. For example, I want to turn the number 22101 into the string "6:08:21" for display purposes.

I have achieved this in Chart.js v1.1.1 with a series in elaborate hacks, but it works (see real-life graph)

My old code (JSFiddle with the working code with ChartJS v1.1.1) looks like:

var data = {
  labels: ["27 Nov 2010", "26 Nov 2011", "24 Nov 2012", "30 Nov 2013", "29 Nov 2014"],
  datasets: [{
    label: "My Duration",
    data: [22100, 22135, 20047, 20187, 18752] // Number of seconds
  }, {
    label: "Fastest Duration",
    data: [13478, 15295, 15812, 14904, 14748] // Number of seconds
  }, {
    label: "Median Duration",
    data: [22212, 22639, 21825, 21034, 20815]  // Number of seconds
  }]
}

var options = {
  scaleOverride: true,
  scaleSteps: 8,
  scaleStepWidth: 1800,
  scaleStartValue: 10800,
  responsive: true,
  maintainAspectRatio: false,
  scaleLabel: function(valuePayload) {
    return new Date(valuePayload.value * 1000).toISOString().substr(12, 7);
  },
  multiTooltipTemplate: function(valuePayload) {
    return valuePayload.datasetLabel + " " + new Date(valuePayload.value * 1000).toISOString().substr(12, 7)
  }
};

Can I achieve the same thing in v2? Or do I need to define my own custom chart type?

It feels like all I need to set on the time scale type is displayFormats and tooltipFormat. Is there a technical reason why time cannot be defined on a y-axis?

Thank you for your hard work, especially with v2 it seems an awesome upgrade.

If you have any questions, please let me know.

Dave

[etimberg]

Hi Dave,

Thw reason tge time scale doesn't work is that it makes assumptions about the data.labels array. One option that I've been considering is to allow two arrays xLabels and yLabels and use those if defined, else fall back to the regular labels array. I think this would work, but I have not tried it yet.

You can definitely achieve what you had in v1. I'm on mobile right now so i can't type a sample, but there is a callback function to create the string for each tick mark. You can override the default by passing a new function in your config.

I hope this helps,
Evert

[RoxKilly]

@daveharris I have a very similar use case and you can certainly make things work as you'd like. My y-values are seconds that I would like to display as MM:SS. When I create a chart I pass in the options object with the settings below:

options = {
    scales: {
        yAxes: [
            {
                ticks:{
                    callback:(v)=>this.formatSecsAsMins(v),
                    stepSize:300, //add a tick every 5 minutes
                }
            }
        ]
    },
}

The function formatSecsAsMins takes a number of seconds and returns a string formatted to my liking. it's not as cool as your one-liner but it works. I found that I also needed to set options.tooltips.callback.label to a callback that returns a customized label text because the default tooltip showed the value in seconds and I wanted it in MM:SS

[daveharris]

Hi,

I've implemented the ticks.callback and callback.label callbacks and it's working perfectly! Thank you so much for your help @RoxKilly. I assume in time these will be documented once v2 settles down?

Now with ChartJS v2:

Thank you all the ChartJS contributors and @etimberg for making such a great library.

Dave

[justjoehere]

Would you mind sharing your solution? I'm new to Chart.js and haven't been able to figure this out for displaying time data on the yAxis.

[daveharris]

Hi @justjoehere,

Sure, here is my full implementation (probably more than you require):

I produce the data on the server-side (from a Rails app) and dump it into HTML5 data attributes:

<canvas 
  id="result_duration_over_time_chart" 
  data-date='["27 Nov 2010","26 Nov 2011","24 Nov 2012","30 Nov 2013","29 Nov 2014"]' 
  data-duration="[22101,22135,20047,20189,18752]" 
  data-fastest-duration="[13478,15295,15812,14904,14748]" 
  data-median-duration="[22212,22639,21825,21034,20815]"> 
</canvas>

And then I pull the data attributes out in my Chart.js:

$(document).on('ready page:load', function () {
  var resultDurationCanvas = $("canvas#result_duration_over_time_chart");

  if (resultDurationCanvas.length != 1) {
    return
  }

  new Chart(resultDurationCanvas, {
    type: 'line',
    data: {
      labels: resultDurationCanvas.data('date'),
      datasets: [{
        label:                'Me',
        fill:                 true,
        backgroundColor:      'rgba(31, 50, 173, 0.2)', // blue
        borderColor:          'rgba(31, 50, 173, 0.6)',
        pointBorderColor:     'rgba(31, 50, 173, 0.6)',
        pointBackgroundColor: 'rgba(31, 50, 173, 0.6)',
        data: resultDurationCanvas.data('duration')
      }, {
        label:                'Fastest',
        fill:                 true,
        backgroundColor:      'rgba(173, 31, 50, 0.2)',  // red
        borderColor:          'rgba(173, 31, 50, 0.6)',
        pointBorderColor:     'rgba(173, 31, 50, 0.6)',
        pointBackgroundColor: 'rgba(173, 31, 50, 0.6)',
        data: resultDurationCanvas.data('fastest-duration')
      }, {
        label:                'Median',
        fill:                 true,
        backgroundColor:      'rgba(173, 154, 31, 0.2)', // orange
        borderColor:          'rgba(173, 154, 31, 0.6)',
        pointBorderColor:     'rgba(173, 154, 31, 0.6)',
        pointBackgroundColr:  'rgba(173, 154, 31, 0.6)',
        data: resultDurationCanvas.data('median-duration')
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        yAxes: [{
          ticks: {
            userCallback: function(v) { return epoch_to_hh_mm_ss(v) },
            stepSize: 30 * 60
          }
        }]
      },
      tooltips: {
        callbacks: {
          label: function(tooltipItem, data) {
            return data.datasets[tooltipItem.datasetIndex].label + ': ' + epoch_to_hh_mm_ss(tooltipItem.yLabel)
          }
        }
      }
    }
  });

  function epoch_to_hh_mm_ss(epoch) {
    return new Date(epoch*1000).toISOString().substr(12, 7)
  }
});

I hope that helps. Let me know if you need anything else

Dave

[iamvsaini]

Hello, @daveharris can you send you chart code i have same task as time on y-axis and dates on x-axis. please send me your example code...

[daveharris]

@iamvsaini the code is all above. The main bit that makes it all work is options.scales.yAxes.ticks

[iamvsaini]

Actually i am using ng2charts and i am new to chart.js. it will be better for me if i'll get the whole code with sample data.

[iamvsaini]

My sample data is like below

[{"x":"29:01:2018","y":"07:51:38"},{"x":"29:01:2018","y":"07:51:38"},{"x":"29:01:2018","y":"07:17:30"},{"x":"29:01:2018","y":"07:17:30"},{"x":"28:01:2018","y":"07:49:35"},{"x":"28:01:2018","y":"07:49:35"},{"x":"28:01:2018","y":"07:05:07"},{"x":"28:01:2018","y":"07:05:07"},{"x":"27:01:2018","y":"07:17:09"},{"x":"27:01:2018","y":"07:17:09"},{"x":"27:01:2018","y":"07:16:53"},{"x":"27:01:2018","y":"07:16:53"},{"x":"26:01:2018","y":"07:44:58"},{"x":"26:01:2018","y":"07:44:58"},{"x":"26:01:2018","y":"07:44:26"},{"x":"26:01:2018","y":"07:44:26"},{"x":"25:01:2018","y":"07:35:37"},{"x":"25:01:2018","y":"07:35:37"},{"x":"25:01:2018","y":"07:11:04"},{"x":"25:01:2018","y":"07:11:04"},{"x":"24:01:2018","y":"07:16:31"},{"x":"24:01:2018","y":"07:16:31"},{"x":"24:01:2018","y":"07:12:46"},{"x":"24:01:2018","y":"07:12:46"},{"x":"23:01:2018","y":"07:44:51"},{"x":"23:01:2018","y":"07:44:51"},{"x":"23:01:2018","y":"07:36:46"},{"x":"23:01:2018","y":"07:36:46"},{"x":"22:01:2018","y":"07:41:17"},{"x":"22:01:2018","y":"07:41:17"},{"x":"22:01:2018","y":"07:34:36"},{"x":"22:01:2018","y":"07:34:36"},{"x":"21:01:2018","y":"07:39:06"},{"x":"21:01:2018","y":"07:39:06"},{"x":"21:01:2018","y":"07:11:24"},{"x":"21:01:2018","y":"07:11:24"},{"x":"20:01:2018","y":"07:35:39"},{"x":"20:01:2018","y":"07:35:39"},{"x":"20:01:2018","y":"06:56:38"},{"x":"20:01:2018","y":"06:56:38"},{"x":"19:01:2018","y":"07:52:29"},{"x":"19:01:2018","y":"07:52:29"},{"x":"19:01:2018","y":"07:04:37"},{"x":"19:01:2018","y":"07:04:37"},{"x":"18:01:2018","y":"06:59:13"},{"x":"18:01:2018","y":"06:59:13"}]

i want plot this data using ng2charts same as you did in your screenshot. can you please provide me sample code to do this please.. @daveharris @etimberg @RoxKilly @justjoehere @mackuba

[daveharris]

@iamvsaini You need to:

1. Split your data into an 2 arrays, one of x-column data and another of y-column data
2. Set your y-columm data into data.labels
3. Set your x-column data into datasets[0].data
4. Include options as it, as well as the epoch_to_hh_mm_ss function

[johnkingzy]

@daveharris Thanks! this was really helpful.

[manziEric]

@daveharris i have used your code snippet but when the time get over 10h the time starts again on 00. if i have 11:02:15 the time that i get on the yaxis is 01:02:15 do you know how i can fix this ?.
the code i'm using is :
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
userCallback: function(v) { return epoch_to_hh_mm_ss(v) },
stepSize: 30 * 60
}
}]
},
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
return data.datasets[tooltipItem.datasetIndex].label + ': ' + epoch_to_hh_mm_ss(tooltipItem.yLabel)
}
}
}
}
});

function epoch_to_hh_mm_ss(epoch) {
return new Date(epoch*1000).toISOString().substr(12, 7)
}
});

[daveharris]

@manziEric This is because I naively assume that the hours are a single digit when I perform .substr(12, 7)

You would need to change that to use a regular expression to allow for double digit hours:

function epoch_to_hh_mm_ss(epoch) {
  return new Date(epoch*1000).toISOString().match("T(.*).000Z")[1]
}

[manziEric]

@daveharris thanks alot for this

[priestfteast]

And what about 3+ digits hours values? 86399 (23 hours 59 minutes 59 secons) is the last value we can work with?