search

nvd3-community / nvd3

A reusable chart library for d3.js
http://nvd3-community.github.io/nvd3/
Other
333 stars 141 forks source link

x-axis alignment is not proper when x-axis of type date-time range #64

Closed rbsl-jogendra closed 9 years ago

rbsl-jogendra commented 9 years ago

Hello , we have some data which varies on date-time selection_001 range. but this data is not properly aligned in chart (line). The data get displays before the actual marking of the date range. we have following sample data {x: 01-Jan-15,y:1},{x:03-Jan-15,y:3} etc. we are converting the date like below

chart.xAxis.tickFormat(function(d) { return d3.time.format('%d-%b-%y')(new Date(parseInt(d*1000))) });

where d is the epoc time. Could you please let us know any fix available for this mis-alignment.

liquidpele commented 9 years ago

Just glancing at this, it's probably because your unix timestamp includes the time, which is what the graph is drawing based on. It's only showing the date because that's how you're formatting the data, but the time is still there for the actual graphing.

If you still feel something is in error, please set up a jsfiddle (or similar js prototyping site) that demonstrates the issue so we can take a look. Thanks.

rbsl-jogendra commented 9 years ago

i am giving the data to graph something like this -

{"1422729000":0,"1422815400":1,"1422901800":0,"1422988200":2,"1423074600":1,"1423161000":0,"1423247400":3,"1423333800":1,"1423420200":2,"1423506600":4,"1423593000":0,"1423679400":1,"1423765800":0}

I want the x-axis to be formatted as (%d-%b-%y). Is there any property/attribute that i can use in d3 to achieve this so that my graph data is aligned with the x-axis ?

liquidpele commented 9 years ago

If you want your data rounded to the nearest date, you'll need to process the data first, and only give nvd3 timestamps that have 0 for hour/min/second.