Skip to content

Commit

Permalink
Allow specifying the time axis via t attribute
Browse files Browse the repository at this point in the history
  • Loading branch information
benmccann committed Jul 20, 2017
1 parent 5ad1b4a commit db43cb4
Show file tree
Hide file tree
Showing 4 changed files with 86 additions and 10 deletions.
29 changes: 22 additions & 7 deletions docs/axes/cartesian/time.md
Expand Up @@ -2,6 +2,25 @@

The time scale is used to display times and dates. When building its ticks, it will automatically calculate the most comfortable unit base on the size of the scale.

## Data Sets

### Input Data

The x-axis data points may additionally be specified via the `t` attribute when using the time scale.

data: [{
x: new Date(),
y: 1
}, {
t: new Date(),
y: 10
}]


### Date Formats

When providing data for the time scale, Chart.js supports all of the formats that Moment.js accepts. See [Moment.js docs](http://momentjs.com/docs/#/parsing/) for details.

## Configuration Options

The following options are provided by the time scale. They are all located in the `time` sub options. These options extend the [common tick configuration](README.md#tick-configuration).
Expand All @@ -19,11 +38,7 @@ The following options are provided by the time scale. They are all located in th
| `stepSize` | `Number` | `1` | The number of units between grid lines.
| `minUnit` | `String` | `'millisecond'` | The minimum display format to be used for a time unit.

## Date Formats

When providing data for the time scale, Chart.js supports all of the formats that Moment.js accepts. See [Moment.js docs](http://momentjs.com/docs/#/parsing/) for details.

## Time Units
### Time Units

The following time measurements are supported. The names can be passed as strings to the `time.unit` config option to force a certain unit.

Expand Down Expand Up @@ -55,7 +70,7 @@ var chart = new Chart(ctx, {
})
```

## Display Formats
### Display Formats
The following display formats are used to configure how different time units are formed into strings for the axis tick marks. See [moment.js](http://momentjs.com/docs/#/displaying/format/) for the allowable format strings.

Name | Default | Example
Expand Down Expand Up @@ -91,7 +106,7 @@ var chart = new Chart(ctx, {
})
```

## Parser
### Parser
If this property is defined as a string, it is interpreted as a custom format to be used by moment to parse the date.

If this is a function, it must return a moment.js object given the appropriate data value.
3 changes: 0 additions & 3 deletions src/core/core.scale.js
Expand Up @@ -434,9 +434,6 @@ module.exports = function(Chart) {
}
// If it is in fact an object, dive in one more level
if (typeof(rawValue) === 'object') {
if ((rawValue instanceof Date) || (rawValue.isValid)) {
return rawValue;
}
return this.getRightValue(this.isHorizontal() ? rawValue.x : rawValue.y);
}

Expand Down
16 changes: 16 additions & 0 deletions src/scales/scale.time.js
Expand Up @@ -176,6 +176,22 @@ module.exports = function(Chart) {
Chart.Scale.prototype.initialize.call(this);
},

/**
* Handles date types and allows x-axis to be accessed via x or t attribute
*/
getRightValue: function(rawValue) {
if (helpers.isNullOrUndef(rawValue)) {
return NaN;
}
if (typeof(rawValue) === 'object') {
if ((rawValue instanceof Date) || (rawValue instanceof moment)) {
return rawValue;
}
return this.getRightValue(this.isHorizontal() ? (!helpers.isNullOrUndef(rawValue.t) ? rawValue.t : rawValue.x) : rawValue.y);
}
return Chart.Scale.prototype.getRightValue.call(this, rawValue);
},

determineDataLimits: function() {
var me = this;
var chart = me.chart;
Expand Down
48 changes: 48 additions & 0 deletions test/specs/scale.time.tests.js
Expand Up @@ -204,6 +204,54 @@ describe('Time scale tests', function() {

expect(ticks).toEqual(['Jan 2015', 'Jan 2', 'Jan 3', 'Jan 4', 'Jan 5', 'Jan 6', 'Jan 7', 'Jan 8', 'Jan 9', 'Jan 10', 'Jan 11']);
});

it('should accept data as ty points', function() {
var chart = window.acquireChart({
type: 'line',
data: {
datasets: [{
xAxisID: 'tScale0',
data: [{
t: newDateFromRef(0),
y: 1
}, {
t: newDateFromRef(1),
y: 10
}, {
t: newDateFromRef(2),
y: 0
}, {
t: newDateFromRef(4),
y: 5
}, {
t: newDateFromRef(6),
y: 77
}, {
t: newDateFromRef(7),
y: 9
}, {
t: newDateFromRef(9),
y: 5
}]
}],
},
options: {
scales: {
xAxes: [{
id: 'tScale0',
type: 'time',
position: 'bottom'
}],
}
}
});

var tScale = chart.scales.tScale0;
tScale.update(800, 200);
var ticks = getTicksValues(tScale.ticks);

expect(ticks).toEqual(['Jan 2015', 'Jan 2', 'Jan 3', 'Jan 4', 'Jan 5', 'Jan 6', 'Jan 7', 'Jan 8', 'Jan 9', 'Jan 10', 'Jan 11']);
});
});

it('should allow custom time parsers', function() {
Expand Down

0 comments on commit db43cb4

Please sign in to comment.