TimeSeries scale added; time series refactoring (chartjs#4189)

IlyaBeliaev · Jul 9, 2017 · 97cc62b · 97cc62b
1 parent f16d8a3
commit 97cc62b
Show file tree

Hide file tree

Showing 13 changed files with 1,285 additions and 83 deletions.
diff --git a/docs/SUMMARY.md b/docs/SUMMARY.md
@@ -34,7 +34,8 @@
     * [Category](axes/cartesian/category.md)
     * [Linear](axes/cartesian/linear.md)
     * [Logarithmic](axes/cartesian/logarithmic.md)
-    * [Time](axes/cartesian/time.md) 
+    * [Time](axes/cartesian/time.md)
+    * [TimeSeries](axes/cartesian/timeseries.md)
   * [Radial](axes/radial/README.md)
     * [Linear](axes/radial/linear.md)
   * [Labelling](axes/labelling.md)

diff --git a/docs/axes/cartesian/timeseries.md b/docs/axes/cartesian/timeseries.md
@@ -0,0 +1,93 @@
+# TimeSeries Cartesian Axis
+
+The timeseries scale is used to display times and dates. When building its ticks, it automatically calculate dates display format. Unlike time scale it shows all points from all datasets with same distance by x axes.
+
+## Configuration Options
+
+The following options are provided by the timeseries scale. They are all located in the `time` sub options. These options extend the [common tick configuration](README.md#tick-configuration).
+
+| Name | Type | Default | Description
+| -----| ---- | --------| -----------
+| `displayFormats` | `Object` | | Sets how different time units are displayed. [more...](#display-formats)
+| `parser` | `String` or `Function` | | Custom parser for dates. [more...](#parser)
+| `round` | `String` | `false` | If defined, dates will be rounded to the start of this unit. See [Time Units](#scales-time-units) below for the allowed units.
+| `tooltipFormat` | `String` | | The moment js format string to use for the tooltip.
+| `unit` | `String` | `false` | If defined, will force the unit to be a certain type. See [Time Units](#scales-time-units) section below for details.
+| `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
+
+The following time measurements are supported. The names can be passed as strings to the `time.unit` config option to force a certain unit.
+
+* millisecond
+* second
+* minute
+* hour
+* day
+* week
+* month
+* quarter
+* year
+
+For example, to create a chart with a time scale that always displayed units per month, the following config could be used.
+
+```javascript
+var chart = new Chart(ctx, {
+    type: 'line',
+    data: data,
+    options: {
+        scales: {
+            xAxes: [{
+                time: {
+                    unit: 'month'
+                }
+            }]
+        }
+    }
+})
+```
+
+## 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
+--- | ---
+millisecond | 'SSS [ms]'
+second | 'h:mm:ss a'
+minute | 'h:mm:ss a'
+hour | 'MMM D, hA'
+day | 'll'
+week | 'll'
+month | 'MMM YYYY'
+quarter | '[Q]Q - YYYY'
+year | 'YYYY'
+
+For example, to set the display format for the 'quarter' unit to show the month and year, the following config would be passed to the chart constructor.
+
+```javascript
+var chart = new Chart(ctx, {
+    type: 'line',
+    data: data,
+    options: {
+        scales: {
+            xAxes: [{
+                type: 'timeseries',
+                time: {
+                    displayFormats: {
+                        quarter: 'MMM YYYY'
+                    }
+                }
+            }]
+        }
+    }
+})
+```
+
+## 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.
diff --git a/samples/samples.js b/samples/samples.js
@@ -116,6 +116,18 @@
 			title: 'Combo',
 			path: 'scales/time/combo.html'
 		}]
+	}, {
+		title: 'TimeSeries scale',
+		items: [{
+			title: 'Line',
+			path: 'scales/timeseries/line.html'
+		}, {
+			title: 'Line (point data)',
+			path: 'scales/timeseries/line-point-data.html'
+		}, {
+			title: 'Combo',
+			path: 'scales/timeseries/combo.html'
+		}]
 	}, {
 		title: 'Scale options',
 		items: [{

diff --git a/samples/scales/timeseries/combo.html b/samples/scales/timeseries/combo.html
@@ -0,0 +1,175 @@
+<!doctype html>
+<html>
+
+<head>
+	<title>Line Chart - Combo Time Scale</title>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
+	<script src="../../../dist/Chart.js"></script>
+	<script src="../../utils.js"></script>
+	<style>
+    canvas {
+        -moz-user-select: none;
+        -webkit-user-select: none;
+        -ms-user-select: none;
+    }
+	</style>
+</head>
+
+<body>
+	<div style="width:75%;">
+		<canvas id="canvas"></canvas>
+	</div>
+	<br>
+	<br>
+	<button id="randomizeData">Randomize Data</button>
+	<button id="addDataset">Add Dataset</button>
+	<button id="removeDataset">Remove Dataset</button>
+	<button id="addData">Add Data</button>
+	<button id="removeData">Remove Data</button>
+	<script>
+		var timeFormat = 'MM/DD/YYYY HH:mm';
+
+		function newDateString(days) {
+			return moment().add(days, 'd').format(timeFormat);
+		}
+
+		var color = Chart.helpers.color;
+		var config = {
+			type: 'bar',
+			data: {
+				labels: [
+					newDateString(0),
+					newDateString(1),
+					newDateString(2),
+					newDateString(3),
+					newDateString(4),
+					newDateString(5),
+					newDateString(6)
+				],
+				datasets: [{
+					type: 'bar',
+					label: 'Dataset 1',
+					backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
+					borderColor: window.chartColors.red,
+					data: [
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor()
+					],
+				}, {
+					type: 'bar',
+					label: 'Dataset 2',
+					backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
+					borderColor: window.chartColors.blue,
+					data: [
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor()
+					],
+				}, {
+					type: 'line',
+					label: 'Dataset 3',
+					backgroundColor: color(window.chartColors.green).alpha(0.5).rgbString(),
+					borderColor: window.chartColors.green,
+					fill: false,
+					data: [
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor(),
+						randomScalingFactor()
+					],
+				}, ]
+			},
+			options: {
+                title: {
+                    text:"Chart.js Combo Time Scale"
+                },
+				scales: {
+					xAxes: [{
+						type: "timeseries",
+						display: true,
+						time: {
+							format: timeFormat,
+							// round: 'day'
+						}
+					}],
+				},
+			}
+		};
+
+		window.onload = function() {
+			var ctx = document.getElementById("canvas").getContext("2d");
+			window.myLine = new Chart(ctx, config);
+
+		};
+
+		document.getElementById('randomizeData').addEventListener('click', function() {
+			config.data.datasets.forEach(function(dataset) {
+				dataset.data = dataset.data.map(function() {
+					return randomScalingFactor();
+				});
+			});
+
+			window.myLine.update();
+		});
+
+		var colorNames = Object.keys(window.chartColors);
+		document.getElementById('addDataset').addEventListener('click', function() {
+			var colorName = colorNames[config.data.datasets.length % colorNames.length];
+			var newColor = window.chartColors[colorName];
+			var newDataset = {
+				label: 'Dataset ' + config.data.datasets.length,
+				borderColor: newColor,
+				backgroundColor: color(newColor).alpha(0.5).rgbString(),
+				data: [],
+			};
+
+			for (var index = 0; index < config.data.labels.length; ++index) {
+				newDataset.data.push(randomScalingFactor());
+			}
+
+			config.data.datasets.push(newDataset);
+			window.myLine.update();
+		});
+
+		document.getElementById('addData').addEventListener('click', function() {
+			if (config.data.datasets.length > 0) {
+				config.data.labels.push(newDateString(config.data.labels.length));
+
+				for (var index = 0; index < config.data.datasets.length; ++index) {
+					config.data.datasets[index].data.push(randomScalingFactor());
+				}
+
+				window.myLine.update();
+			}
+		});
+
+		document.getElementById('removeDataset').addEventListener('click', function() {
+			config.data.datasets.splice(0, 1);
+			window.myLine.update();
+		});
+
+		document.getElementById('removeData').addEventListener('click', function() {
+			config.data.labels.splice(-1, 1); // remove the label first
+
+			config.data.datasets.forEach(function(dataset, datasetIndex) {
+				config.data.datasets[datasetIndex].data.pop();
+			});
+
+			window.myLine.update();
+		});
+	</script>
+</body>
+
+</html>