1

How can I apply custom format to values of chart nvd3.js?

For examples, I receive a value in seconds but I like display in format HH:MM:SS

Fernando Montoya
  • 251
  • 1
  • 3
  • 12
  • Do you mean tick values? For that, use [`.tickFormat()`](https://github.com/mbostock/d3/wiki/SVG-Axes#tickFormat). – Lars Kotthoff Mar 31 '14 at 11:09
  • I don't mean the format of the "axis", I mean to the "values format" ​​in the case that you have put ". ShowValues ​​(true)". the contribution is in the answer. regards – Fernando Montoya Apr 02 '14 at 06:51

1 Answers1

1

you can do it this way:

nv.addGraph(function() {  
    var chart = nv.models.discreteBarChart()
        .x(function(d) { return d.rowId  })
        .y(function(d) { return d.secs   })
        .valueFormat(function(d) { return formatoHHMMSS(d)});

    nv.utils.windowResize(chart.update);

    return chart;
});


function formatoHHMMSS(secs){
    var hours = parseInt( secs / 3600 ) % 24;
    var minutes = parseInt( secs / 60 ) % 60;
    var seconds = secs % 60;
    return (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds  < 10 ? "0" + seconds : seconds);
};
Fernando Montoya
  • 251
  • 1
  • 3
  • 12
  • Try to use the inbuilt functions of `d3.js` , [here](http://stackoverflow.com/questions/18072721/formating-the-date-in-nvd3-js/18075689#18075689) is s similar answer on Stack Overflow. Mike Bostocks documentation on [Time Formatting](https://github.com/mbostock/d3/wiki/Time-Formatting) – shabeer90 Apr 01 '14 at 07:45