Skip to content

N
nodejs-60-2
Switch branch/tag
Find file
Normal viewHistoryPermalink
03.html 1.74 KB
Newer Older
winai buttasart's avatar
ส่งงาน desktop application
dca3e62d
 
winai buttasart committed
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 
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">	
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	zoomEnabled: true,
	theme: "light2",
	title:{
		text: "Employment in Agriculture Vs Agri-Land and Population"
	},
	axisX: {
		title:"Employment - Agriculture",
		suffix: "%",
		minimum: 0,
		maximum: 61,
		gridThickness: 1
	},
	axisY:{
		title: "Agricultural Land (million sq.km)",
		suffix: "mn"
	},
	data: [{
		type: "bubble",
		toolTipContent: "<b>{name}</b><br/>Employment: {x}% <br/> Agri-Land: {y}mn sq. km<br/> Population: {z}mn",
		dataPoints: [
			{ x: 39.6, y: 5.225, z:1347, name:"China" },
			{ x: 3.3, y: 4.17, z:21.49, name:"Australia" },
			{ x: 1.5, y: 4.043, z:304.09, name:"US" },
			{ x: 17.4, y: 2.647, z:2.64, name:"Brazil" },
			{ x: 8.6, y: 2.154, z:141.95, name:"Russia" },
			{ x: 52.98, y: 1.797, z:1190.86, name:"India" },
			{ x: 4.3, y: 1.735, z:26.16, name:"Saudi Arabia" },
			{ x: 1.21, y: 1.41, z:39.71, name:"Argentina" },
			{ x: 5.7, y: .993, z:48.79, name:"SA" },
			{ x: 13.1, y: 1.02, z:110.42, name:"Mexico" },
			{ x: 2.4, y: .676, z:33.31, name:"Canada" },
			{ x: 2.8, y: .293, z:64.37, name:"France" },
			{ x: 3.8, y: .46, z:127.70, name:"Japan" },
			{ x: 40.3, y: .52, z:234.95, name:"Indonesia" },
			{ x: 42.3, y: .197, z:68.26, name:"Thailand" },
			{ x: 31.6, y: .35, z:78.12, name:"Egypt" },
			{ x: 1.1, y: .176, z:61.39, name:"U.K" },
			{ x: 3.7, y: .144, z:59.83, name:"Italy" },
			{ x: 1.8, y: .169, z:82.11, name:"Germany" }
		]
	}]
});
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>