Show dates as dates

[angularjs-nvd3-directives]

Show dates as dates

[cmaurer]

There is a way. Create a scope function on your controller like the following
$scope.xAxisTickFormatFunction = function(){
return function(d){
return d3.time.format('%x')(new Date(d)); //uncomment for date format
}
}

Then in the directive element, assign the scope function to the xAxisTickFormat attribute. Like the following

xAxisTickFormat="xAxisTickFormatFunction()"

The directive assigns the function to the xAxis.tickFormat() call in nvd3/d3 behind the scenes.

Check out the lineChart.with.configuration.html as well.

Chris

[cmaurer]

also, you can look at

http://cmaurer.github.io/angularjs-nvd3-directives/axis.formatting.html

Which is the documentation I am working on for formatting an axis. I still need to review it, etc before I 'publish' it. You can access it directly.

[jnmoons]

Thanks for the swift answer! I am going to try right away.

[cmaurer]

Cool. Let me know if you get stuck.

Chris

Sent from my iPhone

On Sep 19, 2013, at 4:17 AM, jnmoons [email protected] wrote:

Thanks for the swift answer! I am going to try right away.

—
Reply to this email directly or view it on GitHub.

[cmaurer]

Also, let me know if I can close the issue/question.

Thanks,
Chris

---

From: jnmoons [email protected]
To: cmaurer/angularjs-nvd3-directives [email protected]
Cc: Christian Maurer [email protected]
Sent: Thursday, September 19, 2013 4:17 AM
Subject: Re: [angularjs-nvd3-directives] Show dates as dates (#18)

Thanks for the swift answer! I am going to try right away.
—
Reply to this email directly or view it on GitHub.

[cmaurer]

@jnmoons - I am going to close this issue. If you need help, email me or open another one.

Thanks,
Chris

[jubalslone]

I'm having problems getting this to display.

Here's my relevant code:

function myCtrl() {
  $scope.chartTest = [
    {
      "key": "Series 1",
      "values": [
        [ "2014-01-15T00:00:00.000-08:00", 1], [ "2014-02-15T00:00:00.000-08:00", 2], [ "2014-03-15T00:00:00.000-08:00", 3]
      ]
    }
  ];

  $scope.xAxisTickFormatFunction = function() {
    return function(d){
      return d3.time.format('%B %Y')(new Date(d));
    }
  };
};

And my HTML:

<nvd3-line-chart
  data="chartTest"
  id="remedyExample"
  yAxisTickFormat="yAxisTickFormatFunction()"
  xAxisTickFormat="xAxisTickFormatFunction()"
  width="550"
  height="350"
  showXAxis="true"
  showYAxis="true"
  showLegend="true">
  <svg></svg>
</nvd3-line-chart>

And my output is a chart with dates displaying along the bottom, but they all say "December 1969."

I can open the console on the page and run d3.time.format('%B %Y')(new Date("2014-01-15T00:00:00.000-08:00")); and it properly returns January 2014.

What does d represent in your $scope.xAxisTickFormatFunction()? It seems like it isn't getting the data I'm trying to send to it.

Any help would be very much appreciated, I've been wrestling this for a couple days now.

[jubalslone]

Switching the "2014-01-15T00:00:00.000-08:00" manually to milliseconds var foo = new Date("2014-01-15T00:00:00.000-08:00").getTime() fixes the issue, but I'm not sure where to programatically change it.