<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<style>#containerMaps {
    min-width: 320px;
    max-width: 800px;
    height: 500px;
    margin: 1em auto;
}</style>
	</head>
	<body>
		<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

<div id="containerMaps"></div>

<div id="containerLuar" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

		<script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script><script type="text/javascript" src="https://code.highcharts.com/maps/modules/map.js"></script><script type="text/javascript" src="https://code.highcharts.com/mapdata/countries/id/id-all.js"></script><script>function init(callback){
	// https://pemilu2019.kpu.go.id/static/json/hhcw/ppwp.json
	var dataKPU = {"ts": "2019-04-26 12:45:03", "chart": {"21": 33420229, "22": 25912818, "persen": 38.8408434253396447}, "table": {"1": {"21": 240901, "22": 1221678, "persen": 51.0214537303874480}, "-99": {"21": 329624, "22": 119081, "persen": 59.6723377441713926}, "6728": {"21": 1913583, "22": 1566633, "persen": 46.4258929408455986}, "12920": {"21": 260184, "22": 1680577, "persen": 66.9059154255637299}, "14086": {"21": 651278, "22": 955116, "persen": 50.0963609568076182}, "15885": {"21": 565734, "22": 713312, "persen": 62.4404866866513842}, "17404": {"21": 1036771, "22": 1540720, "persen": 53.1667061517807786}, "20802": {"21": 582564, "22": 585521, "persen": 100.0000000000000000}, "22328": {"21": 1268355, "22": 911407, "persen": 44.8581762802208262}, "24993": {"21": 424175, "22": 242522, "persen": 84.8014725216933999}, "25405": {"21": 400660, "22": 326830, "persen": 72.2658389629359138}, "25823": {"21": 1160697, "22": 1029538, "persen": 34.7864982968034959}, "26141": {"21": 2267687, "22": 2733413, "persen": 18.8549336460980430}, "32676": {"21": 7204256, "22": 2158510, "persen": 42.8916790142712314}, "41863": {"21": 752696, "22": 318700, "persen": 44.9197860962566845}, "42385": {"21": 4380092, "22": 1972122, "persen": 25.7476244248304258}, "51578": {"21": 755081, "22": 1236742, "persen": 30.5040184039915150}, "53241": {"21": 1620839, "22": 134925, "persen": 69.1102858065557888}, "54020": {"21": 351064, "22": 772963, "persen": 38.3701294640065045}, "55065": {"21": 1163310, "22": 150637, "persen": 49.9232258495226651}, "58285": {"21": 1103317, "22": 877684, "persen": 66.5373659009636948}, "60371": {"21": 533661, "22": 346734, "persen": 64.1337759744251814}, "61965": {"21": 285129, "22": 495141, "persen": 33.6425150155857979}, "64111": {"21": 500365, "22": 351752, "persen": 42.4053533779448162}, "65702": {"21": 531296, "22": 177887, "persen": 44.1732685918732430}, "67393": {"21": 398351, "22": 314082, "persen": 43.3623503808487486}, "69268": {"21": 1093601, "22": 1428553, "persen": 51.5348131284386264}, "72551": {"21": 500542, "22": 748313, "persen": 89.8938211590124089}, "74716": {"21": 332627, "22": 306985, "persen": 89.7740784780023781}, "75425": {"21": 261958, "22": 147539, "persen": 56.6882276843467012}, "76096": {"21": 207030, "22": 116302, "persen": 32.3316437364228820}, "77085": {"21": 119297, "22": 150885, "persen": 40.3679369250985545}, "78203": {"21": 47062, "22": 13402, "persen": 2.3168810711472828}, "81877": {"21": 34940, "22": 8187, "persen": 7.4348492590700051}, "928068": {"21": 141502, "22": 58425, "persen": 55.9011893870082342}}, "progress": {"total": 813350, "proses": 315912}};
	var provinsi = ["Aceh", "Sumatera Utara", "Sumatera Barat", "Riau", "Jambi", "Sumatera Selatan", "Bengkulu", "Lampung", "Kepulauan Bangka Belitung", "Kepulauan Riau", "Jakarta Raya", "Jawa Barat", "Jawa Tengah", "Yogyakarta", "Jawa Timur", "Banten", "Bali", "Nusa Tenggara Barat", "Nusa Tenggara Timur", "Kalimantan Barat", "Kalimantan Tengah", "Kalimantan Selatan", "Kalimantan Timur", "Sulawesi Utara", "Sulawesi Tengah", "Sulawesi Selatan", "Sulawesi Tenggara", "Gorontalo", "Sulawesi Barat", "Maluku", "Maluku Utara", "Papua", "Irian Jaya Barat", "Kalimantan Utara"];
	var luarnegri = dataKPU.table["-99"];
	delete dataKPU.table["-99"];

	var arr = [];
	var i = 0;
	for(var index in dataKPU.table) { 
		var item = dataKPU.table[index];
		var ar = [];
		ar.push(provinsi[i]);
		ar.push(item["22"]);
		ar.push(item["21"]);
		ar.push((item["21"]+item["22"]));
		var m = 1;
		if(item["22"] > item["21"]){
			m = -1;
		}
		ar.push(m);
		ar.push({ lat: -1.5, lon: 1 });
		arr.push(ar);
		i++;
	}
	var tot = (dataKPU.chart["21"]+dataKPU.chart["22"]);
	var oo = [
		{
			name: "Prabowo<br>Suara: " + dataKPU.chart["22"],
			y: (dataKPU.chart["22"]/tot*100),
			color: "rgba(74,131,240,0.80)"
		},
		{
			name: "Jokowi<br>Suara: " + dataKPU.chart["21"],
			y: (dataKPU.chart["21"]/tot*100),
			color: "rgba(220,71,71,0.80)"
		}
	];
	var tot2 = (luarnegri["21"]+luarnegri["22"]);
	var oo2 = [
		{
			name: "Prabowo<br>Suara: " + luarnegri["22"],
			y: (luarnegri["22"]/tot2*100),
			color: "rgba(74,131,240,0.80)"
		},
		{
			name: "Jokowi<br>Suara: " + luarnegri["21"],
			y: (luarnegri["21"]/tot2*100),
			color: "rgba(220,71,71,0.80)"
		}
	];
	var ob = {
		date: dataKPU.ts,
		progress: dataKPU.progress,
		chart: oo,
		dalam: arr,
		luar: oo2
	}
	callback(ob);
}

init(function(res) {

    Highcharts.chart('container', {
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        title: {
            text: 'TINGKAT NASIONAL'
        },
        subtitle: {
            text: res.date + " Progress: " + res.progress.proses + " dari " + res.progress.total + " TPS (" + (res.progress.proses / res.progress.total * 100) + "%)"
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        series: [{
            name: 'Persentase',
            colorByPoint: true,
            data: res.chart
        }]
    });

    Highcharts.chart('containerLuar', {
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        title: {
            text: ''
        },
        subtitle: {
            text: '+Luar Negeri'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        series: [{
            name: 'Persentase',
            colorByPoint: true,
            data: res.luar
        }]
    });

    var data = res.dalam,
        maxVotes = 0,
        jokowiColor = 'rgba(220,71,71,0.80)',
        prabowoColor = 'rgba(74,131,240,0.80)';


    // Compute max votes to find relative sizes of bubbles
    Highcharts.each(data, function(row) {
        maxVotes = Math.max(maxVotes, row[5]);
    });

    // Build the chart
    var chart = Highcharts.mapChart('containerMaps', {
        title: {
            text: ''
        },

        chart: {
            animation: false // Disable animation, especially for zooming
        },

        colorAxis: {
            dataClasses: [{
                from: 0,
                to: 1,
                color: 'rgba(220,71,71,0.80)',
                name: 'Jokowi'
            }, {
                from: -1,
                to: 0,
                color: 'rgba(74,131,240,0.80)',
                name: 'Prabowo'
            }]
        },

        mapNavigation: {
            enabled: true
        },
        // Limit zoom range
        yAxis: {
            minRange: 2300
        },

        tooltip: {
            useHTML: true
        },

        series: [{
            mapData: Highcharts.maps['countries/id/id-all'],
            data: data,
            name: 'States',
            borderColor: '#FFF',
            showInLegend: false,
            joinBy: ['name', 'id'],
            keys: ['id', 'prabowoVotes', 'jokowiVotes',
                'sumVotes', 'value', 'pieOffset'
            ],
            tooltip: {
                headerFormat: '',
                pointFormatter: function() {
                    var hoverVotes = this.hoverVotes; // Used by pie only
                    return '<b>' + this.id + ' votes</b><br/>' +
                        Highcharts.map([
                            ['Jokowi', this.jokowiVotes, jokowiColor],
                            ['Prabowo', this.prabowoVotes, prabowoColor]
                        ].sort(function(a, b) {
                            return b[1] - a[1]; // Sort tooltip by most votes
                        }), function(line) {
                            return '<span style="color:' + line[2] +
                                // Colorized bullet
                                '">\u25CF</span> ' +
                                // Party and votes
                                (line[0] === hoverVotes ? '<b>' : '') +
                                line[0] + ': ' +
                                Highcharts.numberFormat(line[1], 0) +
                                (line[0] === hoverVotes ? '</b>' : '') +
                                '<br/>';
                        }).join('') +
                        '<hr/>Total: ' + Highcharts.numberFormat(this.sumVotes, 0);
                }
            }
        }, {
            name: 'Separators',
            type: 'mapline',
            data: Highcharts.geojson(Highcharts.maps['countries/id/id-all'], 'mapline'),
            color: '#707070',
            showInLegend: false,
            enableMouseTracking: false
        }, {
            name: 'Connectors',
            type: 'mapline',
            color: 'rgba(130, 130, 130, 0.5)',
            zIndex: 5,
            showInLegend: false,
            enableMouseTracking: false
        }]
    });

});</script>
	</body>
</html>