CODEWITHSUNDEEP
javascriptd3.jsc3.js
otmezger
otmezger

Reputation: 10784

C3.js bar plot with dates as x axis

I'm trying to make a C3 bar plot using the X with dates. I have the data formatted already in consecutive dates aggregated by days.

I've created a fiddle with what I thought will work: https://jsfiddle.net/8aL1stcs/

the plot as such is working fine, here is a version of the fiddle with the X axis commented out: https://jsfiddle.net/8aL1stcs/1/

var elementID = "#myPlot";
var myData = {};
//myData.x = 'x';
//myData.xFormat = "%Y-%m-%d";
myData.type = 'bar';
myX = ["2015-11-20", "2015-11-21", "2015-11-22","2015-11-23", "2015-11-24"];
myY = [1,2,3,4,5];
myX.splice(0,0,'x');
myY.splice(0,0,'New Reports');
myData.columns = [];
//myData.columns.push(myX);
myData.columns.push(myY);
var chart = c3.generate({
  bindto: elementID,
  data: myData,
  size: {
    height: 480,
    width:400,
  },
  bar: {
    width: {
        ratio: 0.5 // this makes bar width 50% of length between ticks
    }
    // or
    //width: 100 // this makes bar width 100px
  }
});

Basically I want to mimic this plot here: enter image description here

For this, I think I need to use some automated way of handling the x-ticks. In other words: I don't want to set the ticks manually.

Upvotes: 2

Views: 4029

Answers (1)

Cyril Cherian
Cyril Cherian

Reputation: 32327

You missed this in your c3 generate json.

axis: {
        x: {
          type: 'timeseries',
        tick: {
                format: "%b-%d"//format in which you want the output
            }
        },

      }

Working code here

Hope this helps!

Upvotes: 2

Related Questions