CODEWITHSUNDEEP
d3.jsrickshaw
Kyle Brandt
Kyle Brandt

Reputation: 28457

X-Axis Date Formatting in Rickshaw

I have added a datetime X-axis to my rickshaw graph:

var x_axis = new Rickshaw.Graph.Axis.Time({
   graph: graph,
   timeFixture: new Rickshaw.Fixtures.Time(),
});

However, it doesn't generally give me the format I want. Can I give it a specifier so the datetimes are always in a specified format (i.e. something like d3.time.format(specifier) )?

Upvotes: 2

Views: 4922

Answers (3)

Deepak Sharma
Deepak Sharma

Reputation: 458

try this one it will work

var xAxis = new Rickshaw.Graph.Axis.Time({
        graph: graph,
        tickFormat: function(x){
            return new Date(x).toLocaleString();
        },
        ticks: 4
    });

Upvotes: 1

BjrnSmn
BjrnSmn

Reputation: 376

The formatter will only format the string, it will not determine the spacing. In order to control spacing and formatting, you could write your own 'Fixture', e.g. take a look at https://github.com/shutterstock/rickshaw/blob/master/src/js/Rickshaw.Fixtures.Time.js for an example. The fixture provides two things: the spacing (e.g. year, month, day, hour) and the formatting of each. Create a similar fixture, space and format to your needs and set it on the x-axis:

var xAxis = new Rickshaw.Graph.Axis.Time( {
  graph: graph,
  //timeFixture: new Rickshaw.Fixtures.Time()
  timeFixture: new MyOwnTimeFixture()
} );

Upvotes: 1

Kyle Brandt
Kyle Brandt

Reputation: 28457

Based on Lars' linked example I have done the following:

var format = function(d) {
    d = new Date(d)
    return d3.time.format("%c")(d)
}
var x_axis = new Rickshaw.Graph.Axis.X({
        graph: graph,
        tickFormat: format,
});

Which seems to work, so now I just have to find a way to make the spacing come out okay....

Upvotes: 2

Related Questions