test/index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://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="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

		<script type="text/javascript" src="https://raw.github.com/highslide-software/highcharts.com/master/js/highcharts.src.js"></script>
		<script type="text/javascript" src="https://raw.github.com/highslide-software/highcharts.com/master/js/modules/map.src.js"></script>
		<script type="text/javascript" src="https://raw.github.com/highslide-software/highcharts.com/master/js/modules/googlespreadsheet.src.js"></script>


		<!-- 2. Insert the shapes -->
		<script type="text/javascript" src="http://futuregrid.github.com/virtual-cluster/test/world-map-shapes.js"></script>

		<!-- 3. Add the JavaScript to initialize the chart on document ready -->
		<script type="text/javascript">

			var chart;

			$(document).ready(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.getGoogleSpreadsheet({

				    key: '0AoIaUO7wH1HwdFJHaFI4eUJDYlVna3k5TlpuXzZubHc',

				    // custom handler for columns
				    columns: 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
							},

							title : {
								text : 'Population density by country (/km²)'
							},

							subtitle: {
								text: 'Please excuse the creative projection - 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
						for (var i = 1; i < countryCodes.length; i++) {

							if (shapes[countryCodes[i]]) {
								options.series[0].data.push({
									y : populationDensities[i],
									name : countryNames[i],
									path : Highcharts.pathToArray(shapes[countryCodes[i]]),
									states: {
										hover: {
											color: 'orange'
										}
									}

								});
							}
						}

						// Initiate the chart
						chart = new Highcharts.Map(options);
				    }
				});
			});

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