Untitled

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>World Distribution of Dash Masternodes</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>
<script src="https://nazar-pc.github.io/PickMeUp/js/jquery.pickmeup.js"></script>
<link rel="stylesheet" type="text/css" href="https://nazar-pc.github.io/PickMeUp/css/pickmeup.css"/>
<script type="text/javascript">
$(function () {
        var timestamp = new Date();
        var beginOfDay = (timestamp - (timestamp % 86400000));
        var file = timestamp.getFullYear() + ('0' + (timestamp.getMonth()+1)).slice(-2) + '/' + beginOfDay / 1000 + '.json';
        var a = $.getJSON(file, function (data) {
		var b = $.parseJSON(a.responseText);
		var totalMNs = 0;
		$.each(b, function() {
			totalMNs += this.z;
		});
        var mapData = Highcharts.geojson(Highcharts.maps['custom/world']);
        $('#container').highcharts('Map', {
            chart: {
                borderWidth : 0
            },

            title: {
                text: 'World Distribution of Dash Masternodes'
            },

            subtitle: {
				useHTML: true,
                text: 'Total: '+totalMNs+', updated: <span id="date">' + a.getResponseHeader("Last-Modified") + '</span>'
            },

            legend: {
                enabled: false
            },

            mapNavigation: {
                enabled: true,
                buttonOptions: {
                    verticalAlign: 'bottom'
                }
            },

            series: [{
                name: 'Countries',
                mapData: mapData,
                color: '#E0E0E0',
                enableMouseTracking: false
            }, {
                type: 'mapbubble',
                mapData: mapData,
				color: '#1c75bc',
                name: 'count',
                joinBy: ['iso-a2', 'code'],
                data: data,
                minSize: 3,
                maxSize: '15%',
                tooltip: {
                    headerFormat: '',
                    pointFormat: '{point.code}: {point.z}'
                }
            }]
        },function(){
			$('#date').click(function(){
				$('#datepicker').toggle();
			});
		});
	});
	tMax = new Date(timestamp.getUTCFullYear(), timestamp.getUTCMonth(), timestamp.getUTCDate(), 0, 0, 0);
	$('#datepicker').pickmeup({
		flat: true,
		min: new Date(2016,3,9),
		max: tMax,
		change: function () {
			$('#datepicker').toggle();
			var pDate = new Date(parseInt($('#datepicker').pickmeup('get_date', 's')) * 1000)
			var uDate = Date.UTC(pDate.getFullYear(), pDate.getMonth(), pDate.getDate(), 0, 0, 0);
			var file = pDate.getFullYear() + ('0' + (pDate.getMonth()+1)).slice(-2) + '/' + uDate / 1000 + '.json';
			var a = $.getJSON(file, function (data) {
				var chart = $('#container').highcharts();
				chart.series[1].setData(data);
				var b = $.parseJSON(a.responseText);
				var totalMNs = 0;
				$.each(b, function() {
					totalMNs += this.z;
				});
				chart.setTitle(null, { text: 'Total: '+totalMNs+', updated: <span id="date">' + a.getResponseHeader("Last-Modified") + '</span>'});
				$('#date').click(function(){
					$('#datepicker').toggle();
				});
			})
		}
	});
});
</script>
<style>
body {margin:0;padding:0;}
#container {
	width: 100%;
	height: 100%;
	margin: 0 auto;
}
#dp-container {
	width: 100%;
	top: 58px;
	position: absolute;
	text-align: center;
}
#date {
	border-bottom: #333 1px dotted;
	cursor: pointer;
	position: relative;
}
#datepicker {
	display: none;
	//position: absolute;
	//left: calc(50% - 50px);
	margin: 0 auto;
	top: 58px;
}
</style>
</head>
<body>
	<noscript><p align="center">JavaScript not allowed :(</p></noscript>
    <div id="container"></div>
	<div id="dp-container"><div id="datepicker"></div></div>
</body>
</html>