08.html 1.17 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64
<!DOCTYPE HTML>
<html>

<head>
	<meta charset="UTF-8">
	<script>
		window.onload = function () {

			var chart = new CanvasJS.Chart("chartContainer", {
				animationEnabled: true,
				exportEnabled: true,
				theme: "light2", // "light1", "light2", "dark1", "dark2"
				title: {
					text: "Depth of Ocean at Different Levels"
				},
				axisY: {
					title: "Depth (in meters)",
					suffix: " m",
					reversed: true
				},
				axisX2: {
					tickThickness: 0,
					labelAngle: 0
				},
				data: [{
					type: "column",
					axisXType: "secondary",
					yValueFormatString: "#,##0 meters",
					dataPoints: [{
							y: 300,
							label: "Continental Shelf"
						},
						{
							y: 3000,
							label: "Continental Slope"
						},
						{
							y: 4000,
							label: "Continental Rise"
						},
						{
							y: 6000,
							label: "Abyssal Plain",
							indexLabel: "Deepest"
						},
						{
							y: 4400,
							label: "Sea Mount"
						}
					]
				}]
			});
			chart.render();

		}
	</script>
</head>

<body>
	<div id="chartContainer" style="height: 370px; max-width: 920px; margin: 0px auto;"></div>
	<script src="../../asset/js/canvasjs/canvasjs.min.js"></script>
</body>

</html>