Coronavirus-Tracking-Web/indo.html

115 lines
6.2 KiB
HTML
Raw Normal View History

2020-03-27 11:56:23 +00:00
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Indonesia Map</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<style src="map.css" type="text/css"></style>
</head>
<body>
<div id="error"></div>
2020-03-27 11:56:23 +00:00
<div id="container" width="600px" height="200px"></div>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
2020-03-27 11:56:23 +00:00
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/id/id-all.js"></script>
2020-03-27 11:56:23 +00:00
<script>
const showError = document.getElementById('error')
var request = new XMLHttpRequest()
request.open('GET', 'https://api.kawalcorona.com/indonesia/provinsi/', true)
request.onload = function () {
//Begin accessing the data
var dataprov = JSON.parse(this.response)
if(request.status >= 200 && request.status < 400){
var output = [
2020-03-31 08:55:10 +00:00
['id-ac', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // Aceh
['id-su', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // Sumatera Utara
['id-sb', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // Sumatera Barat
['id-ri', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // Riau
['id-ja', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // Jambi
['id-sl', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // Sumatera Selatan
['id-be', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // Bengkulu !
['id-bb', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // Bangka Belitung
['id-1024', 'Po<br>sitif : 0<br>Meninggal : 0<br>Sembuh : 0'], // Lampung
['id-kr', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // Kepulauan Riau
['id-jk', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // DKI Jakarta
['id-jr', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // Jawa Barat
['id-jt', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // Jawa Tengah
['id-yo', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // DIY Jogjakarta
['id-ji', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // Jawa Timur
['id-bt', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // Banten
['id-ba', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // Bali
['id-nb', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // NTB
['id-nt', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // NTT !
['id-kb', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // Kalimantan Barat
['id-kt', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // Kalimantan Tengah
['id-ks', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // Kalimantan Selatan
['id-ki', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // Kalimantan Timur
['id-ku', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // Kalimantan Utara
['id-sw', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // Sulawesi Utara
['id-st', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // Sulawesi Tengah
['id-se', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // Sulawesi Selatan
['id-sg', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // Sulawesi Tenggara
['id-go', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // Gorontalo !
['id-sr', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // Sulawesi Barat
['id-ma', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // Maluku
['id-la', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // Maluku Utara
['id-pa', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // Irian Jaya
['id-ib', '<br>Positif : 0<br>Meninggal : 0<br>Sembuh : 0'], // Irian Jaya Barat
];
2020-03-27 11:56:23 +00:00
dataprov.forEach(attrib => {
2020-03-31 08:55:10 +00:00
output[attrib.attributes.FID - 1][1] = '<br>Positif : '+ attrib.attributes.Kasus_Posi + '<br>Meninggal : ' + attrib.attributes.Kasus_Meni + '<br>Sembuh : ' + attrib.attributes.Kasus_Semb;
});
getMap(output);
}else{
const errorMSG = document.createElement('marquee')
errorMSG.textContent = 'Server mungkin bermasalah'
showError.appendChild(errorMSG)
}
}
request.send()
function getMap(output){
// Create the chart
Highcharts.mapChart('container', {
chart: {
map: 'countries/id/id-all'
},
title: {
text: 'Corona Virus Indonesia'
},
subtitle: {
text: 'Source map: <a href="http://code.highcharts.com/mapdata/countries/id/id-all.js">Indonesia</a>'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
series: [{
data: output,
2020-03-31 08:55:10 +00:00
name: 'Data Provinsi',
states: {
hover: {
2020-03-31 08:43:10 +00:00
color: '#dc3545'
}
},
dataLabels: {
enabled: true,
format: '{point.name}'
}
}]
});
}
</script>
</body>
2020-03-27 11:56:23 +00:00
</html>