Add a push data feed sample chart

nagix · Oct 2, 2018 · 8fb782e · 8fb782e
1 parent bc6a5d0
commit 8fb782e
Show file tree

Hide file tree

Showing 2 changed files with 172 additions and 0 deletions.
diff --git a/samples/index.html b/samples/index.html
@@ -38,6 +38,7 @@ <h2>
             <a href="./zoom.html">Zoom plugin</a><br />
             <a href="./financial.html">Financial chart</a><br />
             <a href="./interactions.html">Interactions</a><br />
+            <a href="./push.html">Push data feed</a><br />
           </h2>
         </li>
       </ul>

diff --git a/samples/push.html b/samples/push.html
@@ -0,0 +1,171 @@
+<!doctype html>
+<html>
+
+<head>
+	<title>chartjs-plugin-streaming sample</title>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
+	<script src="../dist/chartjs-plugin-streaming.js"></script>
+	<style>
+		canvas {
+			-moz-user-select: none;
+			-webkit-user-select: none;
+			-ms-user-select: none;
+		}
+		.chart {
+			margin: auto;
+			width: 75%;
+		}
+		.text-center {
+			text-align: center;
+		}
+	</style>
+</head>
+
+<body>
+	<div class="chart">
+		<canvas id="myChart"></canvas>
+	</div>
+	<div>
+		<p class="text-center">
+			<button id="randomizeData">Randomize Data</button>
+			<button id="addDataset">Add Dataset</button>
+			<button id="removeDataset">Remove Dataset</button>
+			<button id="addData">Add Data</button>
+		</p>
+	</div>
+
+	<script>
+		var chartColors = {
+			red: 'rgb(255, 99, 132)',
+			orange: 'rgb(255, 159, 64)',
+			yellow: 'rgb(255, 205, 86)',
+			green: 'rgb(75, 192, 192)',
+			blue: 'rgb(54, 162, 235)',
+			purple: 'rgb(153, 102, 255)',
+			grey: 'rgb(201, 203, 207)'
+		};
+
+		function randomScalingFactor() {
+			return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
+		}
+
+		function onReceive(event) {
+			window.myChart.config.data.datasets[event.index].data.push({
+				x: event.timestamp,
+				y: event.value
+			});
+			window.myChart.update({
+				preservation: true
+			});
+		}
+
+		var color = Chart.helpers.color;
+		var config = {
+			type: 'line',
+			data: {
+				datasets: [{
+					label: 'Dataset 1 (linear interpolation)',
+					backgroundColor: color(chartColors.red).alpha(0.5).rgbString(),
+					borderColor: chartColors.red,
+					fill: false,
+					lineTension: 0,
+					borderDash: [8, 4],
+					data: []
+				}, {
+					label: 'Dataset 2 (cubic interpolation)',
+					backgroundColor: color(chartColors.blue).alpha(0.5).rgbString(),
+					borderColor: chartColors.blue,
+					fill: false,
+					cubicInterpolationMode: 'monotone',
+					data: []
+				}]
+			},
+			options: {
+				title: {
+					display: true,
+					text: 'Push data feed sample'
+				},
+				scales: {
+					xAxes: [{
+						type: 'realtime',
+						realtime: {
+							duration: 20000,
+							delay: 2000,
+						}
+					}],
+					yAxes: [{
+						scaleLabel: {
+							display: true,
+							labelString: 'value'
+						}
+					}]
+				},
+				tooltips: {
+					mode: 'nearest',
+					intersect: false
+				},
+				hover: {
+					mode: 'nearest',
+					intersect: false
+				}
+			}
+		};
+
+		window.onload = function() {
+			var ctx = document.getElementById('myChart').getContext('2d');
+			window.myChart = 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.myChart.update();
+		});
+
+		var colorNames = Object.keys(chartColors);
+		document.getElementById('addDataset').addEventListener('click', function() {
+			var colorName = colorNames[config.data.datasets.length % colorNames.length];
+			var newColor = chartColors[colorName];
+			var newDataset = {
+				label: 'Dataset ' + (config.data.datasets.length + 1),
+				backgroundColor: color(newColor).alpha(0.5).rgbString(),
+				borderColor: newColor,
+				fill: false,
+				lineTension: 0,
+				data: []
+			};
+
+			config.data.datasets.push(newDataset);
+			window.myChart.update();
+		});
+
+		document.getElementById('removeDataset').addEventListener('click', function() {
+			config.data.datasets.pop();
+			window.myChart.update();
+		});
+
+		document.getElementById('addData').addEventListener('click', function() {
+			onRefresh(window.myChart);
+			window.myChart.update();
+		});
+
+		[0, 1].forEach(function(index) {
+			var receive = function() {
+				onReceive({
+					index: index,
+					timestamp: Date.now(),
+					value: randomScalingFactor()
+				});
+				setTimeout(receive, Math.random() * 1000 + 500);
+			}
+			setTimeout(receive, Math.random() * 1000 + 500);
+		});
+
+	</script>
+</body>
+
+</html>