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

<!doctype html>
<html>

<head>
	<title>Time Scale Point Data</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="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: {
					xAxes: [{
						type: 'time',
						display: true,
						scaleLabel: {
							display: true,
							labelString: 'Date'
						},
						ticks: {
							major: {
								fontStyle: 'bold',
								fontColor: '#FF0000'
							}
						}
					}],
					yAxes: [{
						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();
		});

		// TODO : fix issue with addData
		// See https://github.com/chartjs/Chart.js/issues/5197
		// The Add Data button for this sample has no effect.
		// An error is logged in the console.
		document.getElementById('addData').addEventListener('click', function() {
			if (config.data.datasets.length > 0) {
				var numTicks = window.myLine.scales['x-axis-0'].ticksAsTimestamps.length;
				var lastTime = numTicks ? moment(window.myLine.scales['x-axis-0'].ticksAsTimestamps[numTicks - 1]) : moment();

				var newTime = lastTime
					.clone()
					.add(1, 'day')
					.format('MM/DD/YYYY HH:mm');

				for (var index = 0; index < config.data.datasets.length; ++index) {
					config.data.datasets[index].data.push({
						x: newTime,
						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 https to load scripts from CDN in samples (#4255) 2017-05-13 17:24:00 +02:00			`<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>`
Update chartColors.js to utils.js and move randomScalingFactor function there 2016-10-23 20:04:00 +02:00			`<script src="../../../dist/Chart.js"></script>`
			`<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: {`
			`xAxes: [{`
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: {`
			`fontStyle: 'bold',`
			`fontColor: '#FF0000'`
			`}`
			`}`
Fixed a syntax error in the sample 2016-05-17 01:14:14 +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			`yAxes: [{`
			`display: true,`
			`scaleLabel: {`
			`display: true,`
			`labelString: 'value'`
			`}`
			`}]`
			`}`
			`}`
			`};`

			`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();`
			`});`

Setup HTML and JS linters for samples (#5195) 2018-02-03 13:28:54 +01:00			`// TODO : fix issue with addData`
			`// See https://github.com/chartjs/Chart.js/issues/5197`
			`// The Add Data button for this sample has no effect.`
			`// An error is logged in the console.`
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) {`
Setup HTML and JS linters for samples (#5195) 2018-02-03 13:28:54 +01:00			`var numTicks = window.myLine.scales['x-axis-0'].ticksAsTimestamps.length;`
			`var lastTime = numTicks ? moment(window.myLine.scales['x-axis-0'].ticksAsTimestamps[numTicks - 1]) : moment();`

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			`var newTime = lastTime`
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			`.clone()`
			`.add(1, 'day')`
			`.format('MM/DD/YYYY HH:mm');`

			`for (var index = 0; index < config.data.datasets.length; ++index) {`
			`config.data.datasets[index].data.push({`
			`x: newTime,`
			`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('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>`