econlife.com

by amcharts

HTML

<script type="text/javascript" src="http://www.amcharts.com/lib/3/ammap.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<div id="chartdiv"></div>
<div id="listdiv"></div>

CSS

#chartdiv {
	width	: 60%;
	height	: 500px;
    float: left;
}			
#listdiv {
	width	: 150px;
	height	: 500px;
    float: left;
    margin-left: 15px;
    border-left: 1px solid #ccc;
    overflow: hidden;
    font-family: Verdana;
    font-size: 12px;
}
#listdiv li a {
    padding: 3px 10px;
    display: block;
    cursor: pointer;
}
#listdiv li a:hover, #listdiv li a.selected {
    background: #bbb;
    color: #fff;
}

JavaScript

var map = AmCharts.makeChart("chartdiv", {
	type: "map",
    pathToImages: "http://www.amcharts.com/lib/3/images/",

	colorSteps: 10,

	dataProvider: {
		map: "worldLow",
		areas: [
            { id: 'AU', value: 30.0 },
            { id: 'AT', value: 25.0 },
            { id: 'BE', value: 33.9 },
            { id: 'CA', value: 15.0 },
            { id: 'CL', value: 20.0 },
            { id: 'CZ', value: 19.0 },
            { id: 'DK', value: 24.5 },
            { id: 'EE', value: 21.0 },
            { id: 'FI', value: 20.0 },
            { id: 'FR', value: 34.4 },
            { id: 'DE', value: 15.8 },
            { id: 'GR', value: 26.0 },
            { id: 'HU', value: 19.0 },
            { id: 'IS', value: 20.0 },
            { id: 'IE', value: 12.5 },
            { id: 'IL', value: 26.5 },
            { id: 'IT', value: 27.5 },
            { id: 'JP', value: 28.1 },
            { id: 'KR', value: 22.0 },
            { id: 'LU', value: 22.5 },
            { id: 'MX', value: 30.0 },
            { id: 'NL', value: 25.0 },
            { id: 'NZ', value: 28.0 },
            { id: 'NO', value: 27.0 },
            { id: 'PL', value: 19.0 },
            { id: 'PT', value: 30.0 },
            { id: 'SK', value: 22.0 },
            { id: 'SI', value: 17.0 },
            { id: 'ES', value: 30.0 },
            { id: 'SE', value: 22.0 },
            { id: 'CH', value: 8.5 },
            { id: 'TR', value: 20.0 },
            { id: 'GB', value: 21.0 },
            { id: 'US', value: 35.0 }

		]
	},

	areasSettings: {
		autoZoom: true,
        balloonText: "[[title]]: <b>[[value]]%</b>"
	},
    
    objectList: {
        container: "listdiv"
    },

	valueLegend: {
		right: 10,
		minValue: "Lowest",
		maxValue: "Highest"
	}

});

// using events to highlight object list item
var currentItem;

map.addListener("rollOverMapObject", function (event) {
    var list = document.getElementById('listdiv').getElementsByTagName('a');
    for (var key in list) {
        if...