Category axis - ticks formatting

Question

I have a case where data presented on the chart is gathered in five minutes interval during the working hours, while at night it stays idle. When the chart presents data from a couple of days, there are obviously a flat lines between days (during nights).

Using category axis solves the problem with long steady lines during nights. However using time axis I was able to format date and use time interval property.

How can I do that using category axis? I mean formatting tick labels and achieve similar behaviour to using time intervals?

That is how it looks like at the moment using category axis:

I would like to present just one tick for every day, properly formatted.

Thank you in advance for any help.

Answer 1

You can do this by using a grouped category axis, It will involve a little manipulation of your dates into a separate time part and day part using some code like this:

// Create a d3 parser for this particular date format, this may not be relevant
// if you already have actual dates
var inFormat = d3.time.format("%Y-%m-%d %H:%M");

// Create a d3 parser for the day and time formats we are going to use
var dayFormat = d3.time.format("%d %b"),
    timeFormat = d3.time.format("%H:%M");

// Add some code to manipulate the date into 2 separate fields
// because this is a category axis you need to handle formatting here
// category axes use text content
data.forEach(function (d) {

    // Convert the date to an actual date, you may not need to do this if
    // you already have date objects in your data
    var inDate = inFormat.parse(d.Date);

    // Add a new field for the time portion
    d["Day"] = dayFormat(inDate);
    d["Time"] = timeFormat(inDate);

}, this);

Here it is in context doing what I think you want:

http://jsfiddle.net/87GHM/1/