CODEWITHSUNDEEP
javascriptdatemomentjschart.js
Derk Jan Speelman
Derk Jan Speelman

Reputation: 11969

JavaScript - Convert dates and times (Chart.js and Moment.js)

If you have a better solution (perhaps a D3 solution for this problem): your answer will be appreciated!

I'm new to Chart.js and despite reading the docs of both Chart.js and Moment.js over and over again, I don't seem to possess the skills needed to create the chart I'd like to create.

That said, I have two arrays: one for the y-axis and one for the x-axis.

You can review, edit, fork and all that here on codepen.

It looks like this:

enter image description here

Now this looks fine, but like I said, I don't seem to possess the Moment.js skills to convert those hundreths of a second to a good looking: 2:31.70(mm:ss:SS) or 23.76(ss:SS) or 1:58.43.20(HH:mm:ss:SS).

Next to the time in hundreths being coverted to a normal time, readable for humans. The date is not quite good looking as well. I'd like to be able to convert this date to a local language and custom format. You may paste your codepen link in your answer. Or if you have any other good examples, that's highly appreciated as well!

HTML:

<canvas id="myChart" width="auto" height="100"></canvas>

JavaScript:

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

var myLineChart = new Chart(ctx, {
    type: "line",
    data: {
        labels: [
            // x-axis array containing dates as String in YYYY-MM-DD format
            // e.g. 2009-04-11 (April 11, 2009)
        ],
        datasets: [
            {
                label: "time",
                backgroundColor: "transparent",
                borderColor: "#0088d4",
                data: [
                    // y-axis array containing times as int in one hundredth of a second
                    // e.g.: 15170 (2 minutes, 31 seconds and 70 hundreth of a second)
                ]
            }
        ]
    },
    options: {
        elements: {
            line: {
                tension: 0
            }
        },
        scales: {
            yAxes: [
                {
                    ticks: {
                        stepSize: 1,
                        callback: function(tickValue, index, ticks) {
                            if (!(index % parseInt(ticks.length / 5))) {
                                return tickValue;
                            }
                        }
                    }
                }
            ]
        }
    }
});

Upvotes: 2

Views: 11585

Answers (1)

VincenzoC
VincenzoC

Reputation: 31502

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>

Upvotes: 4

Related Questions