ElementStacks

HTML

<script src="http://highcharts.com/js/testing.js"></script>
<div id="highMap" style="float: left; width: 953px; height: 500px;"></div>

JavaScript

var chart,
    symbols = {};

$(document).ready(function(){
    init();
    
    // get some JSON!
    reloadMap(simulateAjax());
});

function init(){
    
    for( iso in worldMap ){
        (function(){
            var thisIso = iso;
            symbols[iso] = function(){ // we can ignore the parms x,y and radius
                return worldMap[thisIso];
            };
        })();
    }

    $.extend(Highcharts.Renderer.prototype.symbols, symbols);
    
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'highMap',
            zoomType: '',
            defaultSeriesType: 'scatter',
            borderWidth: 1,
            margin: 0
        },
        xAxis: {
            min: 0,
            max: 953, // TODO: should be automatically set to container width
            labels: {
                enabled: false
            },
            tickWidth: 0

        },
        title: {text: null},
        min: 0,
        max: 500, // TODO: should be automatically set to container height
        yAxis: {
            labels: {
                enabled: false
            },
            gridLineWidth: 0,
            title: {
                text: null
            }
        },
        tooltip: {
            formatter: function() {
                //return this.point.name+' '+this.point.x+' '+this.point.y+' '+this.series.color; // tooltip for debugging
                return '<b>'+this.point.name+'</b> '+Highcharts.numberFormat(this.point.value, 0, '.', ',');
            }
        },
        exporting: {
            enabled: false
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            series: {
                // animation is slow with all those symbols, disable
                animation: false,
                dataLabels: { 
                    enabled: false 
                },
                marker: {
                    states: {
                        /* TODO: for big countries, changing the fillColor...