usky-oa
/
jnpf-web-datareport


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171
							<!doctype html>
<html>

<head>
	<title>Scatter Chart</title>
	<script src="../../../dist/Chart.bundle.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>
	<script>
	var color = Chart.helpers.color;
	var scatterChartData = {
		datasets: [{
			borderColor: window.chartColors.red,
			backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
			label: 'V(node2)',
			data: [{
				x: 1,
				y: -1.711e-2,
			}, {
				x: 1.26,
				y: -2.708e-2,
			}, {
				x: 1.58,
				y: -4.285e-2,
			}, {
				x: 2.0,
				y: -6.772e-2,
			}, {
				x: 2.51,
				y: -1.068e-1,
			}, {
				x: 3.16,
				y: -1.681e-1,
			}, {
				x: 3.98,
				y: -2.635e-1,
			}, {
				x: 5.01,
				y: -4.106e-1,
			}, {
				x: 6.31,
				y: -6.339e-1,
			}, {
				x: 7.94,
				y: -9.659e-1,
			}, {
				x: 10.00,
				y: -1.445,
			}, {
				x: 12.6,
				y: -2.110,
			}, {
				x: 15.8,
				y: -2.992,
			}, {
				x: 20.0,
				y: -4.102,
			}, {
				x: 25.1,
				y: -5.429,
			}, {
				x: 31.6,
				y: -6.944,
			}, {
				x: 39.8,
				y: -8.607,
			}, {
				x: 50.1,
				y: -1.038e1,
			}, {
				x: 63.1,
				y: -1.223e1,
			}, {
				x: 79.4,
				y: -1.413e1,
			}, {
				x: 100.00,
				y: -1.607e1,
			}, {
				x: 126,
				y: -1.803e1,
			}, {
				x: 158,
				y: -2e1,
			}, {
				x: 200,
				y: -2.199e1,
			}, {
				x: 251,
				y: -2.398e1,
			}, {
				x: 316,
				y: -2.597e1,
			}, {
				x: 398,
				y: -2.797e1,
			}, {
				x: 501,
				y: -2.996e1,
			}, {
				x: 631,
				y: -3.196e1,
			}, {
				x: 794,
				y: -3.396e1,
			}, {
				x: 1000,
				y: -3.596e1,
			}]
		}]
	};

	window.onload = function() {
		var ctx = document.getElementById('canvas').getContext('2d');
		window.myScatter = Chart.Scatter(ctx, {
			data: scatterChartData,
			options: {
				title: {
					display: true,
					text: 'Chart.js Scatter Chart - Logarithmic X-Axis'
				},
				scales: {
					xAxes: [{
						type: 'logarithmic',
						position: 'bottom',
						ticks: {
							userCallback: function(tick) {
								var remain = tick / (Math.pow(10, Math.floor(Chart.helpers.log10(tick))));
								if (remain === 1 || remain === 2 || remain === 5) {
									return tick.toString() + 'Hz';
								}
								return '';
							},
						},
						scaleLabel: {
							labelString: 'Frequency',
							display: true,
						}
					}],
					yAxes: [{
						type: 'linear',
						ticks: {
							userCallback: function(tick) {
								return tick.toString() + 'dB';
							}
						},
						scaleLabel: {
							labelString: 'Voltage',
							display: true
						}
					}]
				}
			}
		});
	};
	</script>
</body>

</html>