ix4/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    Unemployment rate has followed a completely different trend in the US and in the EU.
In this example, data is retrieved from Eurostat in the JSON-stat format, processed with the JSON-stat Javascript Toolkit and visualized with Idescat Visual.

  
## index.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> <!--<![endif]-->
	<head>
		<title>Visual + JSON-stat: simple line chart</title>

		<!-- DO NOT DO THIS IN PRODUCTION -->
		<!-- github.io and json-stat.org ARE NOT CDNs! Link to your own copies or to a CDN. -->
		<link href="https://idescat.github.io/visual/visual.css" rel="stylesheet" type="text/css" />
		<script src="https://cdn.jsdelivr.net/npm/jsonstat@latest/json-stat.js"></script>
		<script src="https://idescat.github.io/visual/lazyvisualsetup.js"></script>
		<!-- /DO NOT DO THIS IN PRODUCTION -->
	</head>

	<body>
		<div id="visual" class="visual"></div>
		<script>
			var
				//tesem120: Unemployment rate
				url="https://ec.europa.eu/eurostat/wdds/rest/data/v2.1/json/en/tesem120?sex=T&precision=1&age=TOTAL&s_adj=NSA",
				eu={
					label: "European Union (28)",
					geo: "EU28",
					val: []
				},
				us={
					label: "United States",
					geo: "US",
					val: []
				}
			;

			JSONstat(url, function(){
				var
					ds=this.Dataset( 0 ),
					time=ds.Dimension( "time" ).id
				;

				time.forEach(function(t){
					eu.val.push( ds.Data( { "time": t, "geo": eu.geo } ).value );
					us.val.push( ds.Data( { "time": t, "geo": us.geo } ).value );
				});

				visual({
					lang: "en",
					title: "Unemployment rate: EU <i>vs</i> US",
					time: time,
					footer: "Source: Eurostat.",
					unit: { label: "%" },
					dec: 1,
					range: [0, 15],
					grid: {
						line: 5,
						shadow: 6,
						point: 0
					},
					type: "tsline",
					data: [
						{ label: eu.label, val: eu.val },
						{ label: us.label, val: us.val }
					]
				});
			});
		</script>
	</body>
</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> <!--<![endif]-->
	<head>
	<title>Visual + JSON-stat: simple line chart</title>

	<!-- DO NOT DO THIS IN PRODUCTION -->
	<!-- github.io and json-stat.org ARE NOT CDNs! Link to your own copies or to a CDN. -->
	<link href="https://idescat.github.io/visual/visual.css" rel="stylesheet" type="text/css" />
	<script src="https://cdn.jsdelivr.net/npm/jsonstat@latest/json-stat.js"></script>
	<script src="https://idescat.github.io/visual/lazyvisualsetup.js"></script>
	<!-- /DO NOT DO THIS IN PRODUCTION -->
	</head>

	<body>
	<div id="visual" class="visual"></div>
	<script>
	var
	//tesem120: Unemployment rate
	url="https://ec.europa.eu/eurostat/wdds/rest/data/v2.1/json/en/tesem120?sex=T&precision=1&age=TOTAL&s_adj=NSA",
	eu={
	label: "European Union (28)",
	geo: "EU28",
	val: []
	},
	us={
	label: "United States",
	geo: "US",
	val: []
	}
	;

	JSONstat(url, function(){
	var
	ds=this.Dataset( 0 ),
	time=ds.Dimension( "time" ).id
	;

	time.forEach(function(t){
	eu.val.push( ds.Data( { "time": t, "geo": eu.geo } ).value );
	us.val.push( ds.Data( { "time": t, "geo": us.geo } ).value );
	});

	visual({
	lang: "en",
	title: "Unemployment rate: EU <i>vs</i> US",
	time: time,
	footer: "Source: Eurostat.",
	unit: { label: "%" },
	dec: 1,
	range: [0, 15],
	grid: {
	line: 5,
	shadow: 6,
	point: 0
	},
	type: "tsline",
	data: [
	{ label: eu.label, val: eu.val },
	{ label: us.label, val: us.val }
	]
	});
	});
	</script>
	</body>
	</html>