Highmaps! Demo

author(s): Torstein Hønsi

by Nivaldo

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/maps/modules/map.js"></script>
<script src="http://code.highcharts.com/mapdata/custom/world.js"></script>

<!-- Flag sprites service provided by Martijn Lafeber, https://github.com/lafeber/world-flags-sprite/blob/master/LICENSE -->
<link rel="stylesheet" type="text/css" href="http://cloud.github.com/downloads/lafeber/world-flags-sprite/flags32.css" />


<div id="wrapper">
	<div id="container"></div>
	<div id="info">
		<span class="f32"><span id="flag"></span></span>
		<h2></h2>
		<div class="subheader">Click countries to view history</div>
		<div id="country-chart"></div>
	</div>
</div>

CSS

#wrapper {
	height: 500px;
	width: 1000px;
	margin: 0 auto;
	padding: 0;
}
#container {
	float: left;
	height: 500px; 
	width: 700px; 
	margin: 0;
}
#info {
	float: left;
	width: 270px;
	padding-left: 20px;
	margin: 100px 0 0 0;
	border-left: 1px solid silver;
}
#info h2 {
	display: inline;
}
#info .f32 .flag {
	vertical-align: bottom !important;
}

#info h4 {
	margin: 1em 0 0 0;
}

JavaScript

$(function () {

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

        // Parse the CSV Data
        /*Highcharts.data({
            csv: data,
            switchRowsAndColumns: true,
            parsed: function () {
                console.log(this.columns);
            }
        });*/

        // Very simple and case-specific CSV string splitting
        function CSVtoArray(text) {
            return text.replace(/^"/, '')
                .replace(/",$/, '')
                .split('","');
        };

        csv = csv.split(/\n/);

        var countries = {},
            mapChart,
            countryChart,
            numRegex = /^[0-9\.]+$/,
            quoteRegex = /\"/g,
            categories = CSVtoArray(csv[1]).slice(4);

        // Parse the CSV into arrays, one array each country
        $.each(csv.slice(2), function (j, line) {
            var row = CSVtoArray(line),
                data = row.slice(4);

            $.each(data, function (i, val) {
                
                val = val.replace(quoteRegex, '');
                if (numRegex.test(val)) {
                    val = parseInt(val);
                } else if (!val) {
                    val = null;
                }
                data[i] = val;
            });
            countries[row[1]] = {
                name: row[0],
                code3: row[1],
                data: data
            };
        });

        // For each country, use the latest value for current population
        var data = [];
        for (var code3 in countries) {
            var value = null,
                year,
                itemData = countries[code3].data,
                i = itemData.length;

            while (i--) {
                if (typeof itemData[i] === 'number') {
                    value = itemData[i];
                    year = categories[i];
                    break;
                }
            }
    ...