Floating _ Highcharts Demo

author(s): Torstein Hønsi

by amrutaJgtp

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://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 () {

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


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

            title : {
                text : 'Legend padding and item margin'
            },

            mapNavigation: {
                enabled: true
            },

            legend: {
                title: {
                    text: 'Individuals per km²'
                },
                align: 'left',
                verticalAlign: 'bottom',
                //floating: true,
                labelFormatter: function () {
                    return (this.from || '<') + ' - ' + (this.to || '>');
                },
                layout: 'vertical',
                valueDecimals: 0,
                backgroundColor: 'rgba(255,255,255,0.9)',
                padding: 12,
                itemMarginTop: 0,
                itemMarginBottom: 0,
                symbolRadius: 0,
                symbolHeight: 14,
                symbolWidth: 24
            },

            colorAxis: {
                dataClasses: [{
                    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:...