Axis for 1 day with a step of 10 mins in cubism

I am trying to make an axis of 24 hours with a separation of 1 hour in cubism.

var context = cubism.context()
    .serverDelay(30*1000)
    .step(10 * 60 * 1000) //The step size is 10 mins
    .size(window_width - 200);

d3.select("#viz").selectAll(".axis")
    .data(["top", "bottom"])
    .enter().append("div")
    .attr("class", function(d) { return d + " axis"; })
    .each(function(d) { d3.select(this).call(context.axis().ticks(d3.time.hours, 1).orient(d)); });

This line context.axis().ticks(d3.time.hours, 1).orient(d) is somehow wrong. Since the axis text gets overlapped and nothing is visible. I tried many combinations like 60 mins, 1 Day but nothing seems to work. Can anyone please help me.

Solution

You're misunderstanding what size does. size does not indicate the number pixels you have available on the screen. It indicates to the number of data points you have, which in turn is the number of pixels you need to show your data. The number of data points determines size, not the other way around.

You mentioned that you have data over an interval of 24 hours with a value every 10 minutes. This makes your graph 144 px wide, not window_width - 200 as you're specifying in the size.

This also explains why despite your best efforts you can't get more labels on the axes. Cubism does not want to clutter your tiny graph so it's only allowing you a maximum of 3 or 4 labels.

The best way to solve this problem would be to increase the number of data points. You can do this in 2 ways:

Reduce your step to 1 or 2 minutes to get a wider graph (1 minute gives a 1440px wide image, and 2 minutes a 720px wide image).
In case that's not possible, increase your time window to a week (1008 px).