Output javascript date month as text? Using C3.js

c3.js, d3.js, date, datetime, javascript

Solution

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

Problem

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> ```

Original source