test/xy.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: "XY example",
					unit: {
						label: {
							x: "M",
							y: "M"
						},
						symbol: {
							x: "$",
							y: "$"
						},
						position: {
							x: "start",
							y: "start"
						}
					},
					dec: 0,
					grid: {
						point: 5,
						markings: [
							{
							  color: "brown",
							  lineWidth: 2,
								yaxis: { from: 50000, to: 50000 }
							},
							{
							  color: "brown",
							  lineWidth: 2,
								xaxis: { from: 50000, to: 50000 }
							}
						]
					},
					type: "xy",
					data: [
						{
							by: ["1998", "1999", "2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014", "2015", "2016"],
							x: {
							  label: "Imports",
							  val: [78349.40,76988.20,72908.70,67859.80,70323.90,72173.20,67621.10,57663.80,77233.90,80337.70,74787.80,67813.30,60731.00,54344.70,51891.80,50497.90,48761.70,40316.50,36203.70]
							},
						  y: {
							  label: "Exports",
							  val: [65160.60,63906.30,60313.70,58981.30,58880.70,54989.20,48871.60,41461.70,50515.70,49678.40,47216.00,42703.40,39485.10,37648.50,37275.90,36694.50,33796.50,27890.60,27147.80]
						  }
							/*Same as
							x: "Imports",
							y: "Exports",
							val: [ [78349.40,65160.60], [76988.20,63906.30], ... ]
							*/
					  }
					]
				}
			);
		</script>
	</body>
</html>