Highcharts - Highmaps - France
by katalin_2003
HTML
<script src="http://code.highcharts.com/maps/highmaps.js"></script>
<script src="http://code.highcharts.com/maps/modules/data.js"></script>
<!--<script src="http://code.highcharts.com/mapdata/countries/us/us-all.js"></script>-->
<script src="http://code.highcharts.com/mapdata/countries/fr/custom/fr-all-all-mainland.js"></script>
<div id="container" style="height: 700px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>
JavaScript
$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=us-population-density.json&callback=?', function (data) {
// Make codes uppercase to match the map data
$.each(data, function () {
this.code = this.code.toUpperCase();
});
// Instanciate the map
$('#container').highcharts('Map', {
chart: {
borderWidth: 0
},
title: {
text: 'FRANCE'
},
legend: {
// layout: 'vertical',
borderWidth: 0,
backgroundColor: 'rgba(255,255,255,0.85)',
floating: true,
// verticalAlign: 'bottom',
y: 0,
x: -150
},
mapNavigation: {
enabled: true
},
colorAxis: {
min: 1,
type: 'logarithmic',
minColor: '#EEEEFF',
maxColor: '#000022',
stops: [
[0, '#EFEFFF'],
[0.67, '#4444FF'],
[1, '#000022']
]
},
xAxis: {
events: {
afterSetExtremes: function (e) {
var enabled = false;
console.log(e.dataMax / e.max);
if (e.dataMax / e.max > 1.5) {
enabled = true;
}
this.series[0].update({
dataLabels: {
enabled: enabled
}
});
}
}
},
series: [{
animation: {
duration: 1000
},
data: data,
mapData:...