studies/world-map.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Highcharts Example</title>
		<!-- 1. Add these JavaScript inclusions in the head of your page -->
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
		
		<script type="text/javascript" src="https://code.highcharts.com/3.0.1/highcharts.js"></script>
		<script type="text/javascript" src="https://github.highcharts.com/75c66eb3/modules/map.src.js"></script>
		<script type="text/javascript" src="https://github.highcharts.com/75c66eb3/modules/data.src.js"></script>
		
		<!-- 2. Insert the shapes -->
		<script type="text/javascript" src="world-map-shapes.js"></script>
		
		<!-- 3. Add the JavaScript to initialize the chart on document ready -->
		<script type="text/javascript">
			
			var chart;

			$(function() {
				
				// Load the data from a Google Spreadsheet 
				// https://docs.google.com/a/highsoft.com/spreadsheet/pub?hl=en_GB&hl=en_GB&key=0AoIaUO7wH1HwdFJHaFI4eUJDYlVna3k5TlpuXzZubHc&output=html
				Highcharts.data({

				    
				    googleSpreadsheetKey: '0AoIaUO7wH1HwdFJHaFI4eUJDYlVna3k5TlpuXzZubHc',
				    
				    // custom handler when the spreadsheet is parsed
				    parsed: function(columns) {
				    	
				    	// Make the columns easier to read
				    	var countryCodes = columns[0],
				    		countryNames = columns[1],
				    		populationDensities = columns[2];

						var options = {
							chart : {
								renderTo : 'container',
								borderWidth : 1,
								zoomType: 'xy'
							},
							
							title : {
								text : 'Population density by country (/km²)'
							},
							
							subtitle: {
								text: 'This is a work in progress'
							},
							
							legend: {
								align: 'left',
								verticalAlign: 'bottom',
								floating: true,
								layout: 'vertical',
								valueDecimals: 0
							},
							
							tooltip: {
								ySuffix: '/km²'
							},
		
							series : [{
								data : [],
								name: 'Population density',
								valueRanges: [{
									to: 3,
									color: 'rgba(19,64,117,0.05)'
								}, {
									from: 3,
									to: 10,
									color: 'rgba(19,64,117,0.2)'
								}, {
									from: 10,
									to: 30,
									color: 'rgba(19,64,117,0.4)'
								}, {
									from: 30,
									to: 100,
									color: 'rgba(19,64,117,0.5)'
								}, {
									from: 100,
									to: 300,
									color: 'rgba(19,64,117,0.6)'
								}, {
									from: 300,
									to: 1000,
									color: 'rgba(19,64,117,0.8)'
								}, {
									from: 1000,
									color: 'rgba(19,64,117,1)'
								}],
								states: {
									hover: {
										color: '#DD6E28'
									}
								}
							}]
						};
		
						// Populate the data points
						//countryCodes = countryCodes.splice(0, 3);
						for (var i = 1; i < countryCodes.length; i++) {
		
							if (shapes[countryCodes[i]]) {
								options.series[0].data.push({
									y : parseFloat(populationDensities[i]),
									name : countryNames[i],
									path : Highcharts.pathToArray(shapes[countryCodes[i]]),
									states: {
										hover: {
											color: '#FF7F00' // orange
										}
									}
								
								});
							}
						}
						
						// Initiate the chart
						chart = new Highcharts.Map(options);
				    }
				});
				
			});

		</script>
	</head>
	<body>
		<!-- 3. Add the container -->
		<div id="container" style="width: 800px; height: 500px; margin: 0 auto"></div>
	</body>
</html>