Highcharts Demo

author(s): Torstein Hønsi

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script src="http://code.highcharts.com/maps/highmaps.src.js"></script>
<script src="http://code.highcharts.com/maps/modules/data.js"></script>
<script src="http://code.highcharts.com/mapdata/custom/world.js"></script>


<div id="container">
	<div class="loading">
		<i class="icon-spinner icon-spin icon-large"></i>
		Loading data from Google Spreadsheets...
	</div>
</div>

CSS

#container {
	height: 500px; 
	min-width: 310px; 
	max-width: 800px; 
	margin: 0 auto; 
}
.loading {
	margin-top: 10em;
	text-align: center;
	color: gray;
}

JavaScript

$(function () {
    
        (function (H) {
        H.wrap(H.Chart.prototype, 'renderMapNavigation', function (proceed) {
            var merge = H.merge,
                pick = H.pick,
                extend = H.extend;
    //Chart.prototype, {
	//renderMapNavigation: function () {
		var chart = this,
			options = this.options.mapNavigation,
			buttons = options.buttons,
			n,
			button,
			buttonOptions,
			attr,
			states,
			outerHandler = function () { 
				this.handler.call(chart); 
			};

		if (pick(options.enableButtons, options.enabled) && !chart.renderer.forExport) {
			for (n in buttons) {
				if (buttons.hasOwnProperty(n)) {
					buttonOptions = merge(options.buttonOptions, buttons[n]);
					attr = buttonOptions.theme;
					attr.style = merge(buttonOptions.theme.style, buttonOptions.style); // #3203
					states = attr.states;
					button = chart.renderer.button(
							buttonOptions.text, 
							0, 
							0, 
							outerHandler, 
							attr, 
							states && states.hover,
							states && states.select, 
							0, 
							n === 'zoomIn' ? 'topbutton' : 'bottombutton'
						)
						.attr({
							width: buttonOptions.width,
							height: buttonOptions.height,
							title: chart.options.lang[n],
							zIndex: 5
						})					
						.add();
					button.handler = buttonOptions.onclick;

                    buttonOptions.y += options.buttonOptions.y || 0; //custom
                    
                    button.align(extend(buttonOptions, { width: button.width, height: 2 * button.height }), null, buttonOptions.alignTo);
				}
			}
		}
            
            // do not run original proceed method
            //proceed.apply(this, [].slice.call(arguments, 1));
        });
    }(Highcharts));
    
    
    

    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=world-population-density.json&callback=?', function (data) {


        // Initiate the chart
        $('#container').highcharts('Map', {
            chart : {
              ...