allen
/
coffeeproject20230512


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js'></script>
	<script src='https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js'></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/0.3.0/Chart.Zoom.min.js"></script>
</head>
<body>
    <div id="div_linechart">
		<button id="reset_zoom" style="float:right;color:black;">Reset</button>
		<canvas id="linechart"></canvas>
	</div>
</body>
    <script>
        		var ctx = document.getElementById("linechart").getContext("2d");
					window.myChart = new Chart(ctx, {
						type: 'line',
						data: window.chartdata,
						options: {
							responsive: true,
							animation: false,
							tooltips: {
								mode: 'nearest', //'label'
								intersect: false,
								position: 'nearest',
							},
							legend: {
								display: false,
								labels: {
									fontColor: "#FFFFFF",
									fontSize: 12
								}
							},
							hover: {
								mode: 'x'
							},
							scales: {
								xAxes: [{
									ticks: {
										fontColor: "#FFFFFF",
										fontSize: 12
									},
									display: true,
									type: 'time',
									time: {
										tooltipFormat:'ddd MMM DD YYYY hh A',
									},
									gridLines: {
										color: "#595959",
									}
								}],
								yAxes: [{
									ticks: {
										fontColor: "#FFFFFF",
										fontSize: 14
									},
									gridLines: {
										color: "#999999",
									}
								}],
							},
							pan: {
								enabled: true,
								mode: 'x',
							},
							zoom: {
								enabled: true,
								mode: 'x',
							}
						}
					});
    </script>
</html>