Not logged in.  Login/Logout/Register | List snippets | | Create snippet | Upload image | Upload data

84
LINES

< > BotCompany Repo | #1013912 // Dummy Line Chart

HTML

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
</head>
<body>
<div style="width:75%;"><canvas id="canvas"></canvas>
<script>

window.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)'
};

	// INITIALIZATION
	
	function randomScalingFactor() { return 5; }

		var config = {
			type: 'line',
			data: {
				labels: ['1:00'],
				datasets: [{
					label: 'Frames calculated',
					backgroundColor: window.chartColors.red,
					borderColor: window.chartColors.red,
					data: [
						0
					],
					fill: false,
				}]
			},
			options: {
				responsive: true,
				title: {
					display: true,
					text: 'Distributed Mandelbrot'
				},
				tooltips: {
					mode: 'index',
					intersect: false,
				},
				hover: {
					mode: 'nearest',
					intersect: true
				},
				scales: {
					xAxes: [{
						display: true,
						scaleLabel: {
							display: true,
							labelString: 'Time'
						}
					}],
					yAxes: [{
						display: true,
						scaleLabel: {
							display: true,
							labelString: 'Value'
						}
					}]
				}
			}
		};

		window.onload = function() {
			var ctx = document.getElementById('canvas').getContext('2d');
			window.myLine = new Chart(ctx, config);
		};

		setInterval(function() {
			if (config.data.datasets.length > 0) {
				config.data.labels.push('?');
				config.data.datasets[0].data.push(Math.random()*5);
				window.myLine.update();
			}
		}, 1000);
	</script>
</body>
</html>

download  render html  show line numbers   

Travelled to 12 computer(s): aoiabmzegqzx, bhatertpkbcr, cbybwowwnfue, gwrvuhgaqvyk, ishqpsrjomds, lpdgvwnxivlt, mqqgnosmbjvj, pyentgdyhuwx, pzhvpgtvlbxg, tslmcundralx, tvejysmllsmz, vouqrxazstgt

No comments. add comment

Snippet ID: #1013912
Snippet name: Dummy Line Chart
Eternal ID of this version: #1013912/6
Text MD5: 26a61c0f22e483718962c7f971eebd6b
Author: stefan
Category: javax / web
Type: HTML
Public (visible to everyone): Yes
Archived (hidden from active list): No
Created/modified: 2018-03-15 16:42:36
Source code size: 1728 bytes / 84 lines
Pitched / IR pitched: No / No
Views / Downloads: 399 / 248
Version history: 5 change(s)
Referenced in: [show references]