8

Due disclosure - I am awful at javascript, but trying to learn!

I have an array with a few entries like these in it:

[1349013600] => 232

The key is a unix timestamp, the value is the $ in sales from that day. I am currently graphing these on a multibar chart, which is working great.

The problem is my x-axis, which is currently defined like this:

chart.xAxis
.tickFormat(d3.format(',f'));

It outputs the unix timestamp as a straight int against the x-axis labels and hover tooltip. I want to try and get it to output as D-M-Y or a similar human readable date indicator.

The closest I have found is this bit of code:

chart.xAxis.tickFormat(function(d) {
       var dx = testdata[0].values[d] && testdata[0].values[d].x || 0;
   return d3.time.format('%x')(new Date(dx))
 });

But I am struggling to understand what it's doing and can't implement on my particular chart. Current code looks like this:

nv.addGraph(function() {
var chart = nv.models.multiBarChart()
            .stacked(true)

chart.xAxis
    .tickFormat(d3.format(',f'));

chart.yAxis
    .tickFormat(function(d) { return '$' + d3.format(',f')(d) });

d3.select('#chart1 svg')
    .datum(test_data2)
  .transition().duration(500).call(chart);

nv.utils.windowResize(chart.update);

return chart;
});

Could someone explain how to make it work and - more importantly - why? Appreciate any guidance!

mcl
  • 223
  • 2
  • 7

2 Answers2

16

I solved the problem as soon as I opened the bounty (d'oh!)

Here is what worked for me

.tickFormat(function(d){return d3.time.format('%d-%b')(new Date(d));})

and the trick was to reformat the data for nvd3 AFTER this is axis is created

CQM
  • 42,592
  • 75
  • 224
  • 366
  • 2
    maybe if 5 people found this answer helpful and upvoted I could break even on reputation points – CQM Jan 23 '13 at 18:55
  • 6
    I'd recommend declaring the time format outside of the tickFormat function, so that you're not creating a new time format instance for every tick you want to display (which would be slow and waste memory). Likewise, I recommend converting your data to JavaScript Date objects as a preprocessing step, rather than as a side-effect of formatting ticks. That way, if there are other places where you refer to the date, it's always a proper Date object rather than UNIX seconds or worse, a string. – mbostock Jan 24 '13 at 19:09
4

JavaScript timestamps are im miliseconds, so you should multiply the Unix stamp by 1000 before using it.

mar10
  • 14,320
  • 5
  • 39
  • 64
  • 1
    Thanks for the tip. The dates (as stored in the SQL db) are actually in a readable format (YYYY/MM/DD) already, but I'm converting them with strtotime (PHP function) when I pull them out of the db. I know this seems counter-intuitive but I'm lead to believe the actual value assignment has to happen in unix stamp in order to space them appropriately across the axis. Anyway - should already be in s rather than ms. – mcl Dec 20 '12 at 07:44