test/pyram.html

<!DOCTYPE html>
<!--[if lt IE 7]><html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]><html class="lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]><html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<title>Idescat Visual sample page</title>
		<link href="../visual.css" rel="stylesheet" type="text/css" />
		<script src="../lazyvisual.js"></script>
		<script src="../visual.setup.js"></script>
	</head>

	<body>
		<div id="visual" class="visual"></div>
		<script>
			visual(
				{
					lang: "en", //Default language is Catalan ("ca"). Set in visual.setup.js
					title: "PYRAM example",
					geo: "A country",
					time: "2012",
					unit: {label: "people"},
					dec: 0,
					type: "pyram",
					by: ["0-4","5-9","10-14","15-19","20-24","25-29","30-34","35-39","40-44","45-49","50-54","55-59","60-64","65-69","70-74","75-79","80-84","85-89","90-94","95-99","100+"], //Required if type: "pyram"
					data: [
						{ label: "Men", val: [130229, 132460, 109072, 115983, 133972, 166757, 207016, 211782, 195472, 176832, 152151, 122107, 117375, 99405, 80274, 73283, 47597, 24195, 6997, 1532, 260] },
						{ label: "Women", val: [124757, 112944, 103163, 104773, 122879, 152743, 196767, 193411, 194849, 174780, 155177, 133712, 126386, 117169, 98444, 99468, 76448, 47515,17929, 4284, 548]}
					]
				}
			);
		</script>
	</body>
</html>