[Chartjs]-JavaScript – Convert dates and times (Chart.js and Moment.js)

by

4👍

✅

You can create a duration and use moment-duration-format plug-in.

Since your input is an amount of seconds you can use moment.duration:

Moment.js also has duration objects. Where a moment is defined as single points in time, durations are defined as a length of time.

You can create a duration for your value using moment.duration(tickValue/100, 'seconds'). Then you can use moment-duration-format to transform 60 seconds to a string like 01:00.00

This is a plugin to the Moment.js JavaScript date library to add comprehensive formatting to Moment Durations.

Using moment-duration-format you can use the format() method for duration object. In your case, you can use 'mm:ss.SS' tokens where mm stands for minutes, ss stands for seconds and SS stands for milliseconds.

Since you want output like 00:23.80 instead of 23.80, yuo can use { trim: false } option.

So to change the displayed values for th y axis, your callback could be like the following:

callback: function(tickValue, index, ticks) {
  if (!(index % parseInt(ticks.length / 5))) {
    return moment.duration(tickValue/100, 's').format('mm:ss.SS');
  }
}

Update after the comment about date: You can convert 2011-04-11 to april 14, 2011 using moment format():

moment('2011-04-11').format('MMMM DD, YYYY');

You simply parse your input using moment(String) (since it matches known ISO 8601 formats) and then use format() using MMMM for month name, DD for day of the month and YYYY for the year.

Here my updated codepen that has the same code of the following snippet:

var ctx = document.getElementById("myChart").getContext("2d");

var myLineChart = new Chart(ctx, {
  type: "line",
  data: {
    labels: [
      moment("2009-04-11").format('MMMM DD, YYYY'),
      moment("2009-05-16").format('MMMM DD, YYYY'),
      moment("2009-10-10").format('MMMM DD, YYYY'),
      moment("2009-11-28").format('MMMM DD, YYYY'),
      moment("2010-02-14").format('MMMM DD, YYYY'),
      moment("2010-03-13").format('MMMM DD, YYYY'),
      moment("2010-04-17").format('MMMM DD, YYYY'),
      moment("2010-12-18").format('MMMM DD, YYYY'),
      moment("2011-01-29").format('MMMM DD, YYYY'),
      moment("2011-03-12").format('MMMM DD, YYYY'),
      moment("2011-03-27").format('MMMM DD, YYYY'),
      moment("2011-05-15").format('MMMM DD, YYYY'),
      moment("2011-10-08").format('MMMM DD, YYYY'),
      moment("2011-11-27").format('MMMM DD, YYYY'),
      moment("2011-12-17").format('MMMM DD, YYYY'),
      moment("2012-03-10").format('MMMM DD, YYYY'),
      moment("2012-05-13").format('MMMM DD, YYYY'),
      moment("2012-10-07").format('MMMM DD, YYYY'),
      moment("2012-11-03").format('MMMM DD, YYYY'),
      moment("2012-11-10").format('MMMM DD, YYYY'),
      moment("2013-05-11").format('MMMM DD, YYYY'),
      moment("2013-10-12").format('MMMM DD, YYYY'),
      moment("2013-11-09").format('MMMM DD, YYYY'),
      moment("2014-01-11").format('MMMM DD, YYYY'),
      moment("2014-11-07").format('MMMM DD, YYYY'),
      moment("2014-11-15").format('MMMM DD, YYYY'),
      moment("2015-03-07").format('MMMM DD, YYYY'),
      moment("2015-04-12").format('MMMM DD, YYYY'),
      moment("2015-11-14").format('MMMM DD, YYYY'),
      moment("2016-11-12").format('MMMM DD, YYYY'),
      moment("2016-12-11").format('MMMM DD, YYYY'),
      moment("2017-01-08").format('MMMM DD, YYYY')
    ],
    datasets: [
      {
        label: "time",
        backgroundColor: "transparent",
        borderColor: "#0088d4",
        data: [
          15170,
          15026,
          15209,
          14335,
          14293,
          14725,
          14560,
          13511,
          13422,
          13230,
          13795,
          12830,
          13126,
          12988,
          12950,
          12750,
          12702,
          12395,
          12534,
          12276,
          12440,
          12462,
          12365,
          12465,
          12021,
          11976,
          12050,
          12016,
          11984,
          11972,
          11717,
          11995
        ]
      }
    ]
  },
  options: {
    elements: {
      line: {
        tension: 0
      }
    },
    scales: {
      yAxes: [
        {
          ticks: {
            stepSize: 1,
            callback: function(tickValue, index, ticks) {
              if (!(index % parseInt(ticks.length / 5))) {
                return moment.duration(tickValue/100, 's').format('mm:ss.SS',{ trim: false });
              }
            }
          }
        }
      ]
    }
  }
});
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

section {
  padding: 2rem 0;
}

.container {
  position: relative;
  margin: auto;
  width: 100%;
  max-width: 970px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-duration-format/1.3.0/moment-duration-format.min.js"></script>

<section>
  <div class="container">
    <h2>times chart</h2>
  </div>
  <div class="container">
    <canvas id="myChart" width="auto" height="100"></canvas>
  </div>
</section>

Leave a comment