Add a financial time series sample (#4554)

2024-10-06 12:19:08 +02:00 · 2017-09-10 01:54:12 -07:00 · 2017-09-10 01:54:12 -07:00 · fb4357ea91
commit fb4357ea91
parent b2beb6f451
2 changed files with 107 additions and 0 deletions
--- a/samples/samples.js
+++ b/samples/samples.js
@ -112,6 +112,9 @@
 		}, {
 			title: 'Line (point data)',
 			path: 'scales/time/line-point-data.html'
+		}, {
+			title: 'Time Series',
+			path: 'scales/time/financial.html'
 		}, {
 			title: 'Combo',
 			path: 'scales/time/combo.html'
--- a/samples/scales/time/financial.html
+++ b/samples/scales/time/financial.html
@ -0,0 +1,104 @@
+<!doctype html>
+<html>
+
+<head>
+	<title>Line Chart</title>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/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:1000px">
+		<canvas id="chart1"></canvas>
+	<div>
+	<br>
+	<br>
+	Chart Type:
+	<select id="type">
+		<option value="line">Line</option>
+		<option value="bar">Bar</option>
+	</select>
+	<button id="update">update</button>
+	<script>
+		function randomNumber(min, max) {
+			return Math.random() * (max - min) + min;
+		}
+
+		function randomBar(date, lastClose) {
+			var open = randomNumber(lastClose * .95, lastClose * 1.05);
+			var close = randomNumber(open * .95, open * 1.05);
+			var high = randomNumber(Math.max(open, close), Math.max(open, close) * 1.1);
+			var low = randomNumber(Math.min(open, close) * .9, Math.min(open, close));
+			return {
+				t: date.valueOf(),
+				y: close
+			};
+		}
+
+		var dateFormat = 'MMMM DD YYYY';
+		var date = moment('April 01 2017', dateFormat);
+		var data = [randomBar(date, 30)];
+		var labels = [date];
+		while (data.length < 60) {
+			date = date.clone().add(1, 'd');
+			if (date.isoWeekday() <= 5) {
+				data.push(randomBar(date, data[data.length - 1].y));
+				labels.push(date);
+			}
+		}
+
+		var ctx = document.getElementById("chart1").getContext("2d");
+		ctx.canvas.width = 1000;
+		ctx.canvas.height = 300;
+		var cfg = {
+			type: 'bar',
+			data: {
+				labels: labels,
+				datasets: [{
+					label: "CHRT - Chart.js Corporation",
+					data: data,
+					type: 'line',
+					pointRadius: 0,
+					fill: false,
+					lineTension: 0,
+					borderWidth: 2
+				}]
+			},
+			options: {
+				scales: {
+					xAxes: [{
+						type: 'time',
+						distribution: 'series',
+						ticks: {
+							source: 'labels'
+						}
+					}],
+					yAxes: [{
+						scaleLabel: {
+							display: true,
+							labelString: 'Closing price ($)'
+						}
+					}]
+				}
+			}
+		};
+		var chart = new Chart(ctx, cfg);
+
+		document.getElementById('update').addEventListener('click', function() {
+			var type = document.getElementById('type').value;
+ 			chart.config.data.datasets[0].type = type;
+			chart.update();
+		});
+
+	</script>
+</body>
+
+</html>