CODEWITHSUNDEEP
jquerychart.js
Chris99391
Chris99391

Reputation: 581

charts.js show dates 1 year

I set up a statistics page and I try to display the dates on 1 year (example: January 2018, February 2018 ....) on the X axis and on the Y axis a figure of case. All this with the charts.js library. I try to do this like this:

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: getPreviousMonths()
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: 'Chiffre d\'affaire - année 2018'
    },
    scales: {
      xAxes: [{
        type: 'time',
        time: {
          unit: 'month'
        },
        scaleLabel: {
          display: true,
          labelString: 'Date'
        }
      }],
      yAxes: [{
        scaleLabel: {
          display: true,
          labelString: 'value'
        }
      }]
    }
  }
});

function getPreviousMonths() {
  var months = [];

  for (i = 0; i < 12; i++) {
    var month = moment().subtract(i, 'months').format('MMMM Y');
    months.push(month);
  }
  return months.reverse();
}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="myChart"></canvas>

dates

Upvotes: 0

Views: 2234

Answers (1)

Eugenio
Eugenio

Reputation: 1053

So, after a bit of trying I've found a solution that could be tailored perfectly for you needs.

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: getPreviousMonths(),
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: 'Chiffre d\'affaire - année 2018'
    },
    scales: {
      xAxes: [{
        type: 'time',
        time: {
          unit: 'month'
        },
        scaleLabel: {
          display: true,
          labelString: 'Date'
        }
      }],
      yAxes: [{
        scaleLabel: {
          display: true,
          labelString: 'value'
        }
      }]
    }
  }
});

function getPreviousMonths() {
  var months = [];
  months = Array.apply(0, Array(12)).map(function(_,i){return moment().month(i).toISOString()})
  return months;
}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="myChart"></canvas>

This is the same function you had but uses the function moment().month() that returns an array of months and it formats it with the format you wanted. (It shows only half months in this snippet because it can't extent through the entire page and cuts half months, should work on a full window)

I really don't understand why your code was not working, I guess something happens when you reverse the order but anyway this should work. Cheers!

=== EDIT ===

As suggested in the comments, the formatting was removed and was added the function toISOString(). This is because before, the date was getting transformed to a jsDate which is not supported by all browsers.

Upvotes: 1

Related Questions