Category axis - ticks formatting - dimple.js

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/