New in nvD3 - how can I make my unix timestamps appear as dates on the x axis?

Due disclosure - I'm terrible in javascript, but trying to learn!

I have an array with several elements, such as in it:

[1349013600] => 232

The key is a unix timestamp, the value is $ in sales from this day. I am currently drawing them in a multi-byte diagram that works fine.

The problem is my x axis, which is currently defined as follows:

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

It displays the unix timestamp as a straight int against the x-axis labels and hover tips. I want to try and get it for output in the form of DMY or a similar indicator for human reading.

The closest I found is a 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 try my best to understand what he is doing and cannot realize on my specific schedule. The current code is as follows:

 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; }); 

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

+7
source share
2 answers

I solved the problem as soon as I discovered generosity (d'oh!)

Here's 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 creating this axis

+14
source

JavaScript timestamps are milliseconds, so you should multiply the Unix mark by 1000 before use.

+4
source

All Articles