CODEWITHSUNDEEP
angularjsd3.jsn3-charts
d9120
d9120

Reputation: 511

n3-charts plot data with dates as the x-axis

I have a some data that I would like to plot using n3-charts and this is what I have.

$scope.options = {
          axes: {
            x: {
              key: "dateRecorded",
              type: "date",
              labelFunction: function(d) { return d3.time.format("%Y-%m-%d").parse(d); }
            },
            y: {type: "linear"}
          },
          series: [
            {
              y: "weight",
              key: "weight",
              label: "Weight",
              color: "#2ca02c"
            }
          ]
        };

This is a sample piece of data that I would like to plot.

[{dateRecorded: "2015-04-15", weight: 15}, {dateRecorded: 2015-04-16, weight: 16}, {dateRecorded: "2015-04-17", weight: 17}]

The chart shows up but no data is plotted. The browser console outputs the following.

TypeError: undefined is not a function
    at d3_time_parseFullYear

So it cannot parse the date correctly but I am not sure what I am doing wrong.

Any help would be appreciated.

Upvotes: 0

Views: 1706

Answers (2)

Damine T
Damine T

Reputation: 489

It's a data problem, your data should look like this, then the labels will display correctly.

[
 {dateRecorded: new Date("2015-04-15"), weight: 15},
 {dateRecorded: new Date("2015-04-16"), weight: 16},
 {dateRecorded: new Date("2015-04-17"), weight: 17}
]

And in order to make it work remove the following line from axis options:

labelFunction: function(d) { return d3.time.format("%Y-%m-%d").parse(d);

See docs explanation regarding the type:

type : optional, can be either 'date' or 'linear' (default is 'linear'). If set to 'date', the chart will expect Date objects as abscissas. No transformation is done by the chart itself, so the behavior is basically D3.js' time scale's.

No need for the labelFunction.

Upvotes: 1

liron_hazan
liron_hazan

Reputation: 1546

Remove the labelFunction it is redundant - type:date is enough

Upvotes: 0

Related Questions