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...