[Solved]-Chart JS - Use time for xAxes-Chart.js

score:22

Since you wish to use time for x-axis, your labels array should be an array of date/time string (labels array is correspondent to x-axis).

You would also need to set the parser property (to parse the date/time correctly), and x-axis' ticks source to data (to properly generate x-axis ticks).

UPDATE

If you only have a min and max date then, you can create a nice little plugin to populate the labels (date) array dynamically, as such :

plugins: [{
   beforeInit: function(chart) {
      var time = chart.options.scales.xAxes[0].time, // 'time' object reference
         // difference (in days) between min and max date
         timeDiff = moment(time.max).diff(moment(time.min), 'd');
      // populate 'labels' array
      // (create a date string for each date between min and max, inclusive)
      for (i = 0; i <= timeDiff; i++) {
         var _label = moment(time.min).add(i, 'd').format('YYYY-MM-DD HH:mm:ss');
         chart.data.labels.push(_label);
      }
   }
}]

^{note: moment.js is used to make calculations easier.}

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩
^{( for demonstration purposes, I've changed the time unit to day )}

$(document).ready(function() {

   new Chart(document.getElementById("chartBox"), {
      type: 'line',
      data: {
         datasets: [{
            data: [12, 19, 3, 5, 2, 3, 32, 15],
            label: "",
            borderWidth: 2,
            borderColor: "#3e95cd",
            fill: false,
            pointRadius: 0
         }]
      },
      options: {
         scales: {
            xAxes: [{
               type: 'time',
               time: {
                  parser: 'YYYY-MM-DD HH:mm:ss',
                  unit: 'day',
                  displayFormats: {
                     day: 'ddd'
                  },
                  min: '2017-10-02 18:43:53',
                  max: '2017-10-09 18:43:53'
               },
               ticks: {
                  source: 'data'
               }
            }]
         },
         legend: {
            display: false
         },
         animation: {
            duration: 0,
         },
         hover: {
            animationDuration: 0,
         },
         responsiveAnimationDuration: 0
      },
      plugins: [{
         beforeInit: function(chart) {
            var time = chart.options.scales.xAxes[0].time, // 'time' object reference
               timeDiff = moment(time.max).diff(moment(time.min), 'd'); // difference (in days) between min and max date
            // populate 'labels' array
            // (create a date string for each date between min and max, inclusive)
            for (i = 0; i <= timeDiff; i++) {
               var _label = moment(time.min).add(i, 'd').format('YYYY-MM-DD HH:mm:ss');
               chart.data.labels.push(_label);
            }
         }
      }]
   });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@latest/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>

<canvas id="chartBox"></canvas>

ɢʀᴜɴᴛ 30087

score:1

You might want to change a few things.

Your data should include time data.
If you set scale unit to be month, your min max should be more than one month to see the actual scales.

Here's simplified working example.

https://jsfiddle.net/f2xmkkao/

Lee Han Kyeol 2212

score:3

If the xAxis label is in date format use this code

time: 
     {
         format: 'MM',
         unit: 'month',
         displayFormats: { month: 'MM' },
         max: '2017-10-09 18:43:53',
         min: '2017-10-02 18:43:53'
     }

If the xAxis label is as what u used numerals use

 time:
      {
         format: 'MM',
         unit: 'month',
         parser:'MM',
         displayFormats: { month: 'MM' },
         max: '2017-10-09 18:43:53',
         min: '2017-00-02 18:43:53'
      }

Pratheeswaran 195

score:7

The dataset should be an array of objects with properties x for time and y for value.

$(document).ready(function() {
  var data = [{
      x: new moment().add(-10, "months"),
      y: Math.random() * 100
    },
    {
      x: new moment().add(-8, "months"),
      y: Math.random() * 100
    },
    {
      x: new moment().add(-6, "months"),
      y: Math.random() * 100
    },
    {
      x: new moment().add(-4, "months"),
      y: Math.random() * 100
    },
    {
      x: new moment().add(-2, "months"),
      y: Math.random() * 100
    },
    {
      x: new moment().add(-0, "months"),
      y: Math.random() * 100
    },
  ];

  new Chart(document.getElementById("chartBox"), {
    type: 'line',
    data: {
      datasets: [{
        data: data,
        borderColor: "#3e95cd",
        fill: false
      }]
    },
    options: {
      scales: {
        xAxes: [{
          type: 'time'
        }]
      },
      legend: false
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.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/Chart.js/2.7.0/Chart.bundle.min.js"></script>

<canvas id="chartBox"></canvas>

Fiddle

Gokhan Kurt 8045

[Solved]-Chart JS - Use time for xAxes-Chart.js

Related Query

More Query from same tag