How to scale along the X-axis values and range options using the nvd3 charts?

Question

I'm using NVD3 charts for generating graphs. I wanted to change and customize the values and date range value along the X-axis.

Currently the graph uses the default values generated by the graph, but i want to able to customize the X-axis values.

I'm looking at the bootstrap nvd3 example: http://www.dangrossman.info/2012/08/20/a-date-range-picker-for-twitter-bootstrap/ however from the example ( as shown for the case of 'Last 30 days').

I'm not quite sure, how and where can I change the x-labels, so as to make them consecutive instead of alternative?

Eg: in the example for the case 'Last 30 days', shows on the x-axis:

how can i customize the graph to become :

June24 June 25 June 26 June 27 ---- along the x-axis? any ideas how to achieve?

Thanks!

EDIT::::::::

Here is the fiddle :

http://jsfiddle.net/dxkmtg5j/2/

chart.xAxis.tickFormat(function(d) {
                        return d3.time.format.utc(dataFormat)(new Date(d));
                });

Following is the o/p that i get labeled on the 'x' axis

Sorry that is the only code i could present since I dont have much clue where to start with handling the labels for the x axis. I changed the 'dateRangePciker.js' file and thats where i tried to modify some code. This might not be sufficient, but if i could get a high level idea for the implementation, i can try form my side.

Thanks

Answer 1

Try to add this code and create a date

chart.xAxis.tickFormat(function (d) {            
        var dx = testdata[0].values[d] && testdata[0].values[d].x || 0;
        if (dx > 0) {
            console.log(dx);
            return d3.time.format('%X')(new Date(dx))
        }
         return null;
    }).axisLabel("direction").showMaxMin(false);