Output javascript date month as text? Using C3.js

Question

The demo below outputs the month part of the date string as numeric months 1-12 and applies it to the x axis values.

• How can the months be output as text: Jan, Feb, Mar... ? (Even if this is hardcoded as text, I cannot find a type format of text,string).

The documentation for c3 is currently limited and my trials so far have been unsuccessful.

    var chart = c3.generate({
      bindto: '#chart',
      data: {
        x: 'x',
        columns: [
            ['x', '2013-01-01', '2013-02-01', '2013-03-01', '2013-04-01', '2013-05-01', '2013-06-01', '2013-07-01', '2013-08-01', '2013-09-01', '2013-10-01', '2013-11-01', '2013-12-01'],
            ['2014', 130, 120, 150, 140, 160, 150, 130, 120, 150, 140, 160, 150]
        ],
        type: 'bar'
      },
      axis: {
        x: {
          type: 'timeseries',
          tick: {
            format: function (x) { return (x.getMonth() + 1); }
          }
        }
      }
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="http://gopeter.de/misc/c3/c3.js"></script>

<div id="chart"></div>

Answer 1

Any reason you need timeseries? Category might be better.

TO USE C3 CATEGORIES FOR AXIS TYPE

This method is good if your x axis needs to be numerical. Useful for regions, axis range or individual gridlines (I'm sure there are others). You can not assign a region to category data.

var chart2 = c3.generate({
    bindto: '#chart',
    data: {
      x: 'x',
      columns: [
        ['x', 1, 2, 3, 4, 5, 6, 7, 8, 9],
        ['data1', 30, 200, 100, 400, 150, 250, 50, 100, 250]
      ],
      type: 'bar'
    },
    axis: {
      x: {
        categories: ['One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine'],
        type: 'categorized'
      }
    },
    regions: [
        {axis: 'x', start: 1, end: 5, class: 'regionX'},
    ]
  });

http://c3js.org/samples/categorized.html

This method below is simpler. This is effective when the hardest thing you need to do is dynamically update the x axis with a chart.load function.

var chart = c3.generate({
  bindto: '#chart',
  data: {
    x: 'x',
    columns: [
      ['x', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
      ['2014', 130, 120, 150, 140, 160, 150, 130, 120, 150, 140, 160, 150]
    ],
    type: 'bar'
  },
  axis: {
    x: {
      type: 'categorized',
    }
  }
});

http://c3js.org/samples/data_stringx.html

Answer 2

You can't get the name of the month using the date object in javascript. I have included a simple arrray to do the mapping.

Also, the printing of alternative values might have to do something with the fit option of the tick which by default is true.

The following code snippet should work.

var monthNames = [ "January", "February", "March", "April", "May", "June",
    "July", "August", "September", "October", "November", "December" ];
var chart = c3.generate({
      bindto: '#chart',
      data: {
        x: 'x',
        columns: [
            ['x', '2013-01-01', '2013-02-01', '2013-03-01', '2013-04-01', '2013-05-01', '2013-06-01', '2013-07-01', '2013-08-01', '2013-09-01', '2013-10-01', '2013-11-01', '2013-12-01'],
            ['2014', 130, 120, 150, 140, 160, 150, 130, 120, 150, 140, 160, 150]
        ],
        type: 'bar'
      },
      axis: {
        x: {
          type: 'timeseries',
          tick: {
            format: function (x) { return (monthNames[x.getMonth()]); },
            fit: false
          }
        }
      }
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="http://gopeter.de/misc/c3/c3.js"></script>

<div id="chart"></div>