I am having an issue getting months to show correctly in a morris.js chart.

<script>

var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

Morris.Line({
  element: 'morris-line-chart',
  data: [
          { m: '01', a: 0, b: 270 },
          { m: '02', a: 54, b: 256 },
          { m: '03', a: 243, b: 334 },
          { m: '04', a: 206, b: 282 },
          { m: '05', a: 161, b: 58 },
          { m: '06', a: 187, b: 0 },
          { m: '07', a: 210, b: 0 },
          { m: '08', a: 204, b: 0 },
          { m: '09', a: 224, b: 0 },
          { m: '10', a: 301, b: 0 },
          { m: '11', a: 262, b: 0 },
          { m: '12', a: 199, b: 0 },
        ],
  xkey: 'm',
  ykeys: ['a', 'b'],
  labels: ['2014', '2015'],
  xLabelFormat: function (x) { return months[x.getMonth()]; }
});
</script>

but all months on the chart show as 'Jan' ...

I am having an issue getting months to show correctly in a morris.js chart.

<script>

var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

Morris.Line({
  element: 'morris-line-chart',
  data: [
          { m: '01', a: 0, b: 270 },
          { m: '02', a: 54, b: 256 },
          { m: '03', a: 243, b: 334 },
          { m: '04', a: 206, b: 282 },
          { m: '05', a: 161, b: 58 },
          { m: '06', a: 187, b: 0 },
          { m: '07', a: 210, b: 0 },
          { m: '08', a: 204, b: 0 },
          { m: '09', a: 224, b: 0 },
          { m: '10', a: 301, b: 0 },
          { m: '11', a: 262, b: 0 },
          { m: '12', a: 199, b: 0 },
        ],
  xkey: 'm',
  ykeys: ['a', 'b'],
  labels: ['2014', '2015'],
  xLabelFormat: function (x) { return months[x.getMonth()]; }
});
</script>

but all months on the chart show as 'Jan' ...

• javascript
• jquery
• morris.js

• 1 According to the documentation xLabelFormat: accepts Date objects, where you are providing strings. – wahwahwah Commented May 8, 2015 at 17:58
• So it isn't possible? – Jack Commented May 10, 2015 at 9:52
• Instead of using strings, use date objects and return them as month strings . – wahwahwah Commented May 10, 2015 at 19:13
• 1 The 01, 02 is output from SQL result. It must be 01, 02 etc. so the output is in order ... If I output as January, February then it won't be in order ... – Jack Commented May 10, 2015 at 19:25
• the x in xLabelFormat: is intended to be a Date object, not a string. Currently, months is a string array. Just make those month strings Date objects instead. this has nothing to do with data – wahwahwah Commented May 10, 2015 at 23:40

1 Answer 1

If you look at the documentation, the required xkey option is defined like this:

A string containing the name of the attribute that contains date (X) values. Timestamps are accepted in the form of millisecond timestamps (as returned by Date.getTime() or as strings in the following formats:

• 2012
• 2012 Q1
• 2012 W1
• 2012-02
• 2012-02-24
• 2012-02-24 15:00
• 2012-02-24 15:00:00
• 2012-02-24 15:00:00.000

Currently, in your data, you are only supplying an int representing the month (ie 01, 02, 03, etc.)

So if you change your month data to be a valid timestamp string, according to the documents, you should then have a valid method for mapping the index of the returned "month" value to your months label array...

Example:

var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

Morris.Line({
  element: 'morris-line-chart',
  data: [{
    m: '2015-01', // <-- valid timestamp strings
    a: 0,
    b: 270
  }, {
    m: '2015-02',
    a: 54,
    b: 256
  }, {
    m: '2015-03',
    a: 243,
    b: 334
  }, {
    m: '2015-04',
    a: 206,
    b: 282
  }, {
    m: '2015-05',
    a: 161,
    b: 58
  }, {
    m: '2015-06',
    a: 187,
    b: 0
  }, {
    m: '2015-07',
    a: 210,
    b: 0
  }, {
    m: '2015-08',
    a: 204,
    b: 0
  }, {
    m: '2015-09',
    a: 224,
    b: 0
  }, {
    m: '2015-10',
    a: 301,
    b: 0
  }, {
    m: '2015-11',
    a: 262,
    b: 0
  }, {
    m: '2015-12',
    a: 199,
    b: 0
  }, ],
  xkey: 'm',
  ykeys: ['a', 'b'],
  labels: ['2014', '2015'],
  xLabelFormat: function(x) { // <--- x.getMonth() returns valid index
    var month = months[x.getMonth()];
    return month;
  },
  dateFormat: function(x) {
    var month = months[new Date(x).getMonth()];
    return month;
  },
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdn.oesmith.co.uk/morris-0.4.3.min.css" rel="stylesheet" />
<script src="http://cdn.oesmith.co.uk/morris-0.5.0.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>

<div id="morris-line-chart" style="height: 250px;"></div>

Edit

The above example can be adjusted for bar charts by including morris version 0.5.1 (instead of 0.5.0 - according to the github page about this issue - I have not tested this in other versions) and slightly changing the xLabelFormat option (the x in function(x){...} apparently is a different object with bar charts vs line):

Bar Chart Example:

// months array and data are left the same
// only change is that the labelFormat option is removed
// and, x in xLabelFormat is a different object with Bar charts vs Line

// [inspect console to see the object]

var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

Morris.Bar({
    element: 'morris-bar-chart',
    data: [{
        m: '2015-01',
        a: 0,
        b: 270
    }, {
        m: '2015-02',
        a: 54,
        b: 256
    }, {
        m: '2015-03',
        a: 243,
        b: 334
    }, {
        m: '2015-04',
        a: 206,
        b: 282
    }, {
        m: '2015-05',
        a: 161,
        b: 58
    }, {
        m: '2015-06',
        a: 187,
        b: 0
    }, {
        m: '2015-07',
        a: 210,
        b: 0
    }, {
        m: '2015-08',
        a: 204,
        b: 0
    }, {
        m: '2015-09',
        a: 224,
        b: 0
    }, {
        m: '2015-10',
        a: 301,
        b: 0
    }, {
        m: '2015-11',
        a: 262,
        b: 0
    }, {
        m: '2015-12',
        a: 199,
        b: 0
    }, ],
    xkey: 'm',
    ykeys: ['a', 'b'],
    labels: ['2014', '2015'],
    xLabelFormat: function (x) { // <-- changed
        console.log("this is the new object:" + x);
        var month = months[x.x];
        return month;
    },
});

<link href="http://cdn.oesmith.co.uk/morris-0.4.3.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.oesmith.co.uk/morris-0.5.1.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>


<div id="morris-bar-chart" style="height: 250px;"></div>