CODEWITHSUNDEEP
d3.jsnvd3.js
Raggamuffin
Raggamuffin

Reputation: 709

nvd3 - Format Milliseconds to h:m:s in Chart (Period of Time, not Date)

I've managed to display Dates in d3/ nvd3 charts, which i did like this passing a value of milliseconds:

chart.xAxis
     .tickFormat(function(d) {
        return d3.time.format('%e, %H:%M')(new Date(d))
});

I'd like to display the Milliseconds as a Period of Time on the y-axis, like "6 h : 23 min : 5 sec".

Is this possible?

Thanks in advance!

Muff

Upvotes: 2

Views: 855

Answers (1)

Cyril Cherian
Cyril Cherian

Reputation: 32327

Try this

d3.time.format('%H h : %M min : %S sec')(new Date())

it will format the date like this

05 h : 34 min : 26 sec

Or if you don't like the 0 padding for hours do

d3.time.format('%-H h : %M min : %S sec')(new Date())

it will format the date like this

5 h : 37 min : 54 sec

EDIT

IN such a case you will need to put an if block to do the check and return the desired format something like this:

.tickFormat(function(d) {
       var date = new Date(d);
       if (date.getHours() == 0){ 
         return d3.time.format('%M min : %S sec')(d)
       } else {
         return d3.time.format('%-H h : %M min : %S sec')(d)
       }

}

Upvotes: 2

Related Questions