Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow specifying the time axis via t attribute #4533

Merged
merged 1 commit into from Jul 22, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
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.
11 changes: 7 additions & 4 deletions src/core/core.scale.js
Expand Up @@ -433,11 +433,14 @@ module.exports = function(Chart) {
return NaN;
}
// If it is in fact an object, dive in one more level
if (typeof(rawValue) === 'object') {
if ((rawValue instanceof Date) || (rawValue.isValid)) {
return rawValue;
if (rawValue) {
if (this.isHorizontal()) {
if (rawValue.x !== undefined) {
return this.getRightValue(rawValue.x);
}
} else if (rawValue.y !== undefined) {
return this.getRightValue(rawValue.y);
}
return this.getRightValue(this.isHorizontal() ? rawValue.x : rawValue.y);
}

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

/**
* Allows data to be referenced via 't' attribute
*/
getRightValue: function(rawValue) {
if (rawValue && rawValue.t !== undefined) {
rawValue = rawValue.t;
}
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