Chart.js/samples/scales/time/line-point-data.html

<!doctype html>
<html>

<head>
	<title>Time Scale Point Data</title>
	<script src="../../../dist/Chart.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/moment@2.24.0"></script>
	<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@0.1.1"></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="addData">Add Data</button>
	<button id="removeData">Remove Data</button>
	<script>
		function newDate(days) {
			return moment().add(days, 'd').toDate();
		}

		function newDateString(days) {
			return moment().add(days, 'd').format();
		}

		var color = Chart.helpers.color;
		var config = {
			type: 'line',
			data: {
				datasets: [{
					label: 'Dataset with string point data',
					backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
					borderColor: window.chartColors.red,
					fill: false,
					data: [{
						x: newDateString(0),
						y: randomScalingFactor()
					}, {
						x: newDateString(2),
						y: randomScalingFactor()
					}, {
						x: newDateString(4),
						y: randomScalingFactor()
					}, {
						x: newDateString(5),
						y: randomScalingFactor()
					}],
				}, {
					label: 'Dataset with date object point data',
					backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
					borderColor: window.chartColors.blue,
					fill: false,
					data: [{
						x: newDate(0),
						y: randomScalingFactor()
					}, {
						x: newDate(2),
						y: randomScalingFactor()
					}, {
						x: newDate(4),
						y: randomScalingFactor()
					}, {
						x: newDate(5),
						y: randomScalingFactor()
					}]
				}]
			},
			options: {
				responsive: true,
				title: {
					display: true,
					text: 'Chart.js Time Point Data'
				},
				scales: {
					x: {
						type: 'time',
						display: true,
						scaleLabel: {
							display: true,
							labelString: 'Date'
						},
						ticks: {
							major: {
								enabled: true
							},
							fontStyle: function(context) {
								return context.tick && context.tick.major ? 'bold' : undefined;
							},
							fontColor: function(context) {
								return context.tick && context.tick.major ? '#FF0000' : undefined;
							}
						}
					},
					y: {
						display: true,
						scaleLabel: {
							display: true,
							labelString: 'value'
						}
					}
				}
			}
		};

		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.forEach(function(dataObj) {
					dataObj.y = randomScalingFactor();
				});
			});

			window.myLine.update();
		});
		document.getElementById('addData').addEventListener('click', function() {
			if (config.data.datasets.length > 0) {
				config.data.datasets[0].data.push({
					x: newDateString(config.data.datasets[0].data.length + 2),
					y: randomScalingFactor()
				});
				config.data.datasets[1].data.push({
					x: newDate(config.data.datasets[1].data.length + 2),
					y: randomScalingFactor()
				});

				window.myLine.update();
			}
		});

		document.getElementById('removeData').addEventListener('click', function() {
			config.data.datasets.forEach(function(dataset) {
				dataset.data.pop();
			});

			window.myLine.update();
		});
	</script>
</body>

</html>
Labels are now optional for the time scale. 2015-10-20 01:20:08 +02:00			`<!doctype html>`
			`<html>`

			`<head>`
Add tooltipFormat option to time scale options. Fix bars when displayed on a time scale. Updated sample files. 2015-12-05 22:45:31 +01:00			`<title>Time Scale Point Data</title>`
Use `Chart.min.js` in samples (#5958) Samples are supposed to show good practices and in most cases we don't use the time scale but require `Chart.bundle.js`, which is not correct. Instead, we should require the non-bundled version in its minified version (`Chart.min.js`). Paradoxically, time based examples don't use `Chart.bundle.js` but require moment manually side to `Chart.min.js`, which IMO is also the correct way since it allows users to configure and use moment globally (TZ, locales, etc.) and doesn't enforce a specific moment version. Also remove the `data-labelling.html` example because we now have an [official plugin](https://github.com/chartjs/chartjs-plugin-datalabels) that implements this feature and don't want to deal with user custom code anymore. 2019-01-06 15:56:58 +01:00			`<script src="../../../dist/Chart.min.js"></script>`
Give the boot to chartjs-adapter-moment (#7155) Remove default of using chartjs-adapter-moment 2020-02-28 01:40:31 +01:00			`<script src="https://cdn.jsdelivr.net/npm/moment@2.24.0"></script>`
			`<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@0.1.1"></script>`
Update chartColors.js to utils.js and move randomScalingFactor function there 2016-10-23 20:04:00 +02:00			`<script src="../../utils.js"></script>`
Add tooltipFormat option to time scale options. Fix bars when displayed on a time scale. Updated sample files. 2015-12-05 22:45:31 +01:00			`<style>`
Setup HTML and JS linters for samples (#5195) 2018-02-03 13:28:54 +01:00			`canvas {`
			`-moz-user-select: none;`
			`-webkit-user-select: none;`
			`-ms-user-select: none;`
			`}`
Add tooltipFormat option to time scale options. Fix bars when displayed on a time scale. Updated sample files. 2015-12-05 22:45:31 +01:00			`</style>`
Labels are now optional for the time scale. 2015-10-20 01:20:08 +02:00			`</head>`

			`<body>`
improve progress-bar sample - set title - set same size canvas as other samples - fix adding data after all data has been removed - remove user select from canvas - remove html legend 2016-02-28 08:43:21 +01:00			`<div style="width:75%;">`
			`<canvas id="canvas"></canvas>`
Add tooltipFormat option to time scale options. Fix bars when displayed on a time scale. Updated sample files. 2015-12-05 22:45:31 +01:00			`</div>`
			`<br>`
			`<br>`
			`<button id="randomizeData">Randomize Data</button>`
			`<button id="addData">Add Data</button>`
			`<button id="removeData">Remove Data</button>`
			`<script>`
			`function newDate(days) {`
			`return moment().add(days, 'd').toDate();`
			`}`
New Chart.js.zip package Samples need to be packaged with built libraries (which one have been removed from the repository), so create a new `gulp package` task to generate a ZIP archive with dist files, samples and the license file. This archive is generated in the ./dist/ folder and will be deployed by Travis along the GH release. Note that the ./dist/ folder is not preserved but merged in the archive root. Also change samples requiring moment.js to load this lib from the CDN instead of the ./node_module folder. 2016-05-15 01:19:57 +02:00
Add tooltipFormat option to time scale options. Fix bars when displayed on a time scale. Updated sample files. 2015-12-05 22:45:31 +01:00			`function newDateString(days) {`
			`return moment().add(days, 'd').format();`
			`}`

Reorganized sample files into sub directories. Added a helper containing colours that should be used by all samples. I added new samples to explain behaviour and modified all samples to have consistent styling. In updating the samples, I removed the use of jQuery and instead use standard methods. For the custom tooltip samples, I updated the styling to show color boxes like the regular tooltips. 2016-10-21 05:12:10 +02:00			`var color = Chart.helpers.color;`
Add tooltipFormat option to time scale options. Fix bars when displayed on a time scale. Updated sample files. 2015-12-05 22:45:31 +01:00			`var config = {`
			`type: 'line',`
			`data: {`
			`datasets: [{`
Setup HTML and JS linters for samples (#5195) 2018-02-03 13:28:54 +01:00			`label: 'Dataset with string point data',`
Reorganized sample files into sub directories. Added a helper containing colours that should be used by all samples. I added new samples to explain behaviour and modified all samples to have consistent styling. In updating the samples, I removed the use of jQuery and instead use standard methods. For the custom tooltip samples, I updated the styling to show color boxes like the regular tooltips. 2016-10-21 05:12:10 +02:00			`backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),`
			`borderColor: window.chartColors.red,`
			`fill: false,`
Add tooltipFormat option to time scale options. Fix bars when displayed on a time scale. Updated sample files. 2015-12-05 22:45:31 +01:00			`data: [{`
			`x: newDateString(0),`
			`y: randomScalingFactor()`
			`}, {`
			`x: newDateString(2),`
			`y: randomScalingFactor()`
			`}, {`
			`x: newDateString(4),`
			`y: randomScalingFactor()`
			`}, {`
			`x: newDateString(5),`
			`y: randomScalingFactor()`
			`}],`
			`}, {`
Setup HTML and JS linters for samples (#5195) 2018-02-03 13:28:54 +01:00			`label: 'Dataset with date object point data',`
Reorganized sample files into sub directories. Added a helper containing colours that should be used by all samples. I added new samples to explain behaviour and modified all samples to have consistent styling. In updating the samples, I removed the use of jQuery and instead use standard methods. For the custom tooltip samples, I updated the styling to show color boxes like the regular tooltips. 2016-10-21 05:12:10 +02:00			`backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),`
			`borderColor: window.chartColors.blue,`
			`fill: false,`
Add tooltipFormat option to time scale options. Fix bars when displayed on a time scale. Updated sample files. 2015-12-05 22:45:31 +01:00			`data: [{`
			`x: newDate(0),`
			`y: randomScalingFactor()`
			`}, {`
			`x: newDate(2),`
			`y: randomScalingFactor()`
			`}, {`
			`x: newDate(4),`
			`y: randomScalingFactor()`
			`}, {`
			`x: newDate(5),`
			`y: randomScalingFactor()`
Reorganized sample files into sub directories. Added a helper containing colours that should be used by all samples. I added new samples to explain behaviour and modified all samples to have consistent styling. In updating the samples, I removed the use of jQuery and instead use standard methods. For the custom tooltip samples, I updated the styling to show color boxes like the regular tooltips. 2016-10-21 05:12:10 +02:00			`}]`
Add tooltipFormat option to time scale options. Fix bars when displayed on a time scale. Updated sample files. 2015-12-05 22:45:31 +01:00			`}]`
			`},`
			`options: {`
			`responsive: true,`
Setup HTML and JS linters for samples (#5195) 2018-02-03 13:28:54 +01:00			`title: {`
			`display: true,`
			`text: 'Chart.js Time Point Data'`
Implemented aligment by senior unit in time axis. (#4267) Implemented alignment by major unit in the time scale. This allows showing the first tick of a larger unit like days in a special way and is part of the basis of the time series scale. 2017-05-30 00:40:10 +02:00			`},`
Add tooltipFormat option to time scale options. Fix bars when displayed on a time scale. Updated sample files. 2015-12-05 22:45:31 +01:00			`scales: {`
Convert axis options from arrays to objects (#6773) * Convert axis options from arrays to objects * Updated all chart type defaults * Throw errors when axis type or position are not specified * Avoid raising unnecessary errors when merging options into the default configs * Fix additional tests * Ensure scale defaults are set if type is not explicitly defined * Another step * Include `scale` as `firstIDs.r` * update docs * Update for buildOrUpdateScales * Update migration guide * Add test back 2019-11-22 00:46:49 +01:00			`x: {`
Setup HTML and JS linters for samples (#5195) 2018-02-03 13:28:54 +01:00			`type: 'time',`
Add tooltipFormat option to time scale options. Fix bars when displayed on a time scale. Updated sample files. 2015-12-05 22:45:31 +01:00			`display: true,`
			`scaleLabel: {`
			`display: true,`
			`labelString: 'Date'`
Time axis tick formatting with major and minor units (#4268) Working towards creating the TimeSeries scale, this PR adds formatting for major and minor ticks on axes. 2017-06-15 13:20:16 +02:00			`},`
Setup HTML and JS linters for samples (#5195) 2018-02-03 13:28:54 +01:00			`ticks: {`
			`major: {`
Finishing removing old major/minor options (#7042) * Finishing removing old major/minor options * Fix samples 2020-02-06 00:20:01 +01:00			`enabled: true`
			`},`
			`fontStyle: function(context) {`
			`return context.tick && context.tick.major ? 'bold' : undefined;`
			`},`
			`fontColor: function(context) {`
			`return context.tick && context.tick.major ? '#FF0000' : undefined;`
Setup HTML and JS linters for samples (#5195) 2018-02-03 13:28:54 +01:00			`}`
			`}`
Convert axis options from arrays to objects (#6773) * Convert axis options from arrays to objects * Updated all chart type defaults * Throw errors when axis type or position are not specified * Avoid raising unnecessary errors when merging options into the default configs * Fix additional tests * Ensure scale defaults are set if type is not explicitly defined * Another step * Include `scale` as `firstIDs.r` * update docs * Update for buildOrUpdateScales * Update migration guide * Add test back 2019-11-22 00:46:49 +01:00			`},`
			`y: {`
Add tooltipFormat option to time scale options. Fix bars when displayed on a time scale. Updated sample files. 2015-12-05 22:45:31 +01:00			`display: true,`
			`scaleLabel: {`
			`display: true,`
			`labelString: 'value'`
			`}`
Convert axis options from arrays to objects (#6773) * Convert axis options from arrays to objects * Updated all chart type defaults * Throw errors when axis type or position are not specified * Avoid raising unnecessary errors when merging options into the default configs * Fix additional tests * Ensure scale defaults are set if type is not explicitly defined * Another step * Include `scale` as `firstIDs.r` * update docs * Update for buildOrUpdateScales * Update migration guide * Add test back 2019-11-22 00:46:49 +01:00			`}`
Add tooltipFormat option to time scale options. Fix bars when displayed on a time scale. Updated sample files. 2015-12-05 22:45:31 +01:00			`}`
			`}`
			`};`

			`window.onload = function() {`
Setup HTML and JS linters for samples (#5195) 2018-02-03 13:28:54 +01:00			`var ctx = document.getElementById('canvas').getContext('2d');`
Add tooltipFormat option to time scale options. Fix bars when displayed on a time scale. Updated sample files. 2015-12-05 22:45:31 +01:00			`window.myLine = new Chart(ctx, config);`
			`};`

Reorganized sample files into sub directories. Added a helper containing colours that should be used by all samples. I added new samples to explain behaviour and modified all samples to have consistent styling. In updating the samples, I removed the use of jQuery and instead use standard methods. For the custom tooltip samples, I updated the styling to show color boxes like the regular tooltips. 2016-10-21 05:12:10 +02:00			`document.getElementById('randomizeData').addEventListener('click', function() {`
			`config.data.datasets.forEach(function(dataset) {`
			`dataset.data.forEach(function(dataObj) {`
Add tooltipFormat option to time scale options. Fix bars when displayed on a time scale. Updated sample files. 2015-12-05 22:45:31 +01:00			`dataObj.y = randomScalingFactor();`
			`});`
			`});`

			`window.myLine.update();`
			`});`
Reorganized sample files into sub directories. Added a helper containing colours that should be used by all samples. I added new samples to explain behaviour and modified all samples to have consistent styling. In updating the samples, I removed the use of jQuery and instead use standard methods. For the custom tooltip samples, I updated the styling to show color boxes like the regular tooltips. 2016-10-21 05:12:10 +02:00			`document.getElementById('addData').addEventListener('click', function() {`
Add tooltipFormat option to time scale options. Fix bars when displayed on a time scale. Updated sample files. 2015-12-05 22:45:31 +01:00			`if (config.data.datasets.length > 0) {`
Time Point Data sample works correctly (#5328) 2018-03-13 23:52:19 +01:00			`config.data.datasets[0].data.push({`
			`x: newDateString(config.data.datasets[0].data.length + 2),`
			`y: randomScalingFactor()`
			`});`
			`config.data.datasets[1].data.push({`
			`x: newDate(config.data.datasets[1].data.length + 2),`
			`y: randomScalingFactor()`
			`});`
Add tooltipFormat option to time scale options. Fix bars when displayed on a time scale. Updated sample files. 2015-12-05 22:45:31 +01:00
			`window.myLine.update();`
			`}`
			`});`

Reorganized sample files into sub directories. Added a helper containing colours that should be used by all samples. I added new samples to explain behaviour and modified all samples to have consistent styling. In updating the samples, I removed the use of jQuery and instead use standard methods. For the custom tooltip samples, I updated the styling to show color boxes like the regular tooltips. 2016-10-21 05:12:10 +02:00			`document.getElementById('removeData').addEventListener('click', function() {`
Setup HTML and JS linters for samples (#5195) 2018-02-03 13:28:54 +01:00			`config.data.datasets.forEach(function(dataset) {`
Add tooltipFormat option to time scale options. Fix bars when displayed on a time scale. Updated sample files. 2015-12-05 22:45:31 +01:00			`dataset.data.pop();`
			`});`

			`window.myLine.update();`
			`});`
			`</script>`
Labels are now optional for the time scale. 2015-10-20 01:20:08 +02:00			`</body>`

			`</html>`