1

When I am passing numbers to the x-axis the graph is showing up. But when i tried to pass dates in the x-axis it displays nothing. I have given for x-axis like this

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

One more issue with the y axis the label is not showing up in any graph.

Here is the jsfiddle of my code.

Sam
  • 7,252
  • 16
  • 46
  • 65
vvr02
  • 611
  • 2
  • 12
  • 22
  • Have you looked at this thread? http://stackoverflow.com/questions/14058876/how-do-i-display-dates-on-the-x-axis-for-nvd3-d3-js –  Feb 21 '13 at 13:22
  • Tried with it no use......... – vvr02 Feb 21 '13 at 13:28

2 Answers2

2

There are two things:

  1. you can setup the ticker;
  2. and you can convert your value from a random string to something NVD3 understands

If you provide a String on the X-axis, NVD3 doesn't know how to order it, so a Date object is required. You can setup your chart like this:

chart.xAxis
  .x(function(d) { new Date(d.x) }) // this convert the data object
  .axisLabel('Date')
  .tickFormat(function(d) { return d3.time.format('%Y-%m-%d')(new Date(d)); }); // this convert the ticker
Théo Reichel
  • 21
  • 2
1

What I did wrong is giving the date string instead of date obj.

So I split the JSON and create date object using date string for the x-axis labels. like below.

new Date(dateStr)

Now it is working fine

vvr02
  • 611
  • 2
  • 12
  • 22
  • The function given as an argument to `tickFormat` will receive the `x` property of each of your data values as `d`. Your data must then be generated with `x: new Date(dateStr)`; the `tickFormat` callback will receive, in `d`, this date expressed as a timestamp, which you can then transform back to a Date object and feed it to `d3.time.format`. At least, that's how I understood it and made my code work :) – Olivier Lance Mar 26 '14 at 00:40