<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>World Bank API Population Data Google Chart Pie Chart - RJM Programming - February, 2016</title>
<style>
body { background-color: lightgreen; }
table { background-color: #f0f0f0; border: 1px solid red; }
a:hover { background-color: orange; }
</style>
<script type='text/javascript'>
var startswith=location.search.split('startswith=')[1] ? location.search.split('startswith=')[1].split('&')[0] : '';
var year=location.search.split('year=')[1] ? location.search.split('year=')[1].split('&')[0] : '2015';
var yearvs=location.search.split('yearvs=')[1] ? ('&yearvs=' + location.search.split('yearvs=')[1].split('&')[0]) : '';
var justletters=location.search.split('justletters=')[1] ? ('&justletters=' + location.search.split('justletters=')[1].split('&')[0]) : '';
var yearvsuffix=location.search.split('chart=')[1] ? ('&chart=' + location.search.split('chart=')[1].split('&')[0]) : '';
var indicatorsuffix=location.search.split('indicator=')[1] ? ('&indicator=' + location.search.split('indicator=')[1].split('&')[0]) : '';
var minsuffix=location.search.split('min=')[1] ? ('&min=' + location.search.split('min=')[1].split('&')[0]) : '';
var maxsuffix=location.search.split('max=')[1] ? ('&max=' + location.search.split('max=')[1].split('&')[0]) : '';
var regexsuffix=location.search.split('regex=')[1] ? ('®ex=' + location.search.split('regex=')[1].split('&')[0]) : '';
function childiframeviaurl() {
var whsuffix='';
var deviceWidth = window.orientation == 0 ? window.screen.height: window.screen.width;
var deviceHeight = window.orientation == 0 ? window.screen.width : window.screen.height;
var rectis=document.body.getBoundingClientRect();
if (('' + rectis.width).replace('px','').replace(/0/g,'') != '' && ('' + rectis.height).replace('px','').replace(/0/g,'') != '') {
deviceWidth=('' + rectis.width).replace('px','');
deviceHeight=('' + rectis.height).replace('px','');
}
whsuffix='&swidth=' + ('' + eval(('' + deviceWidth).replace('px','')) * 1.0) + '&sheight=' + ('' + eval(('' + deviceHeight).replace('px','')) * 1.0);
//alert(whsuffix);
var trinnards="", yearsel="<select onchange='year=this.value; childiframeviaurl();' id=syear></select>", yearselvs="<select onchange=\" if (this.value.indexOf('-') != -1) { document.getElementById('schart').style.display='inline'; } yearvs=this.value; childiframeviaurl();\" id=syearvs><option value=''>Year</option></select>";
if (document.getElementById('mytr').innerHTML == '') {
var nd=new Date();
for (var ii=eval(nd.getFullYear()); ii>=1900; ii--) {
xsel="";
if (ii == 2015) xsel=" selected";
yearsel=yearsel.replace("</select>", "<option value=" + ii + xsel + ">" + ii + "</option></select>");
yearselvs=yearselvs.replace("</select>", "<option value='&yearvs=" + ii + xsel + "'>" + ii + " compared to </option><option value='&yearvs=-" + ii + "'>" + ii + " through to </option></select>");
}
if (startswith == "") {
trinnards+="<td>" + yearselvs + " " + yearsel + "<select id='sindicator' onchange=\"minsuffix=''; maxsuffix=''; indicatorsuffix=this.value; childiframeviaurl();\"><option value=''>Population</option><option value='&indicator=NY.GDP.MKTP.CD'>Gross Domestic Product</option><option value='&indicator=EG.ELC.ACCS.ZS'>Access to electricity (% of population)</option></select>  <select style='display:none;' id='schart' onchange='yearvsuffix=this.value; childiframeviaurl();'><option value=''>Line Chart</option><option value='&chart=column'>Column Chart</option><option value='&chart=bar'>Bar Chart</option><option value='&chart=area'>Area Chart</option></select></td><td style='width:260px;background-color:yellow;'><a href='#' onclick=\"startswith=' '; childiframeviaurl();\">All</a> From<input style='width:40px;' name='minrange' id='minrange' type='number' onblur=\"minsuffix='&min=' + this.value;\" onchange=\"minsuffix='&min=' + this.value;\" min='0.0000000' step='0.0000001' value='0.0000000'></input> To<input style='width:115px;' name='maxrange' id='maxrange' type='number' onblur=\"maxsuffix='&max=' + this.value;\" onchange=\"maxsuffix='&max=' + this.value;\" min='0.0000000' step='0.0000001' value='999000000000000.0000000'></input><br><a target=_blank title='Javascript RegExp information from w3schools' href='https://www.w3schools.com/jsref/jsref_obj_regexp.asp'>RegExp</a> <input style='width:80px;' onblur=\" if (this.value.length == 0) { regexsuffix=''; } else { regexsuffix='®ex=' + encodeURIComponent(this.value); } \" type='text' name='regex' id='regex' value=''></input>  Starts With ...</td>";
} else {
trinnards+="<td>" + yearselvs + " " + yearsel + "  <select style='display:none;' id='schart' onchange='yearvsuffix=this.value; childiframeviaurl();'><option value=''>Line Chart</option><option value='&chart=column'>Column Chart</option><option value='&chart=bar'>Bar Chart</option><option value='&chart=area'>Area Chart</option></select></td><td><a href='#' onclick=\"startswith=' '; childiframeviaurl();\">All</a> From <input name='minrange' id='minrange' type='number' onblur=\"minsuffix='&min=' + this.value;\" onchange=\"minsuffix='&min=' + this.value;\" min='0.0000000' step='0.0000001' value='0.0000000'></input> To <input name='maxrange' id='maxrange' type='number' onblur=\"maxsuffix='&max=' + this.value;\" onchange=\"maxsuffix='&max=' + this.value;\" min='0.0000000' step='0.0000001' value='999000000000000.0000000'></input> ... versus Starts With ...</td>";
}
for (var i=65; i<=90; i++) {
trinnards+="<td id=" + String.fromCharCode(i) + "><a href='#' onclick='startswith=this.innerHTML; childiframeviaurl();' id=a_" + String.fromCharCode(i) + " title=" + String.fromCharCode(i) + ">" + String.fromCharCode(i) + "</a></td>";
}
trinnards+="<td>  Just Letter Report <input onchange=\" if (this.checked) { justletters='&justletters=y'; } else { justletters=''; } \" type=checkbox id=justletters></input></td>";
document.getElementById('mytr').innerHTML=trinnards;
if (yearvsuffix != '') {
document.getElementById('schart').value=yearvsuffix;
}
if (indicatorsuffix != '') {
document.getElementById('sindicator').value=indicatorsuffix;
}
}
if (startswith != '') {
if (startswith == ' ') {
startswith='';
//alert('http://www.rjmprogramming.com.au/PHP/worldbank_population_data.php?startswith=' + startswith + '&year=' + year + justletters);
}
document.getElementById('childiframe').style.display='block';
document.getElementById('childiframe').src='//www.rjmprogramming.com.au/PHP/worldbank_population_data.php?rand=' + Math.floor(Math.random() * 198765453) + '&startswith=' + startswith + '&year=' + year + yearvs + yearvsuffix + indicatorsuffix + minsuffix + maxsuffix + regexsuffix + justletters + whsuffix;
startswith=decodeURIComponent(startswith);
if (document.getElementById(startswith.toUpperCase())) {
document.getElementById(startswith.toUpperCase()).style.backgroundColor='yellow';
}
} else if (year != '') {
document.getElementById('childiframe').style.display='block';
document.getElementById('childiframe').src='//www.rjmprogramming.com.au/PHP/worldbank_population_data.php?rand=' + Math.floor(Math.random() * 198765453) + '&year=' + year + yearvs + yearvsuffix + indicatorsuffix + minsuffix + maxsuffix + regexsuffix + justletters + whsuffix;
} else {
document.getElementById('childiframe').style.display='block';
document.getElementById('childiframe').src=('//www.rjmprogramming.com.au/PHP/worldbank_population_data.php' + justletters.replace('&','?') + yearvs + yearvsuffix + indicatorsuffix + minsuffix + maxsuffix + regexsuffix).replace('.php&','.php?') + '&rand=' + + Math.floor(Math.random() * 198765453) + whsuffix;
}
}
</script>
</head>
<body onload='childiframeviaurl();'>

<table id='mytable'><tbody id='mytbody'><tr id='mytr'></tr></tbody></table><br>
<iframe style='width:100%;height:1200px;display:none;' name='childiframe' id='childiframe' src='about:blank'></iframe>
</body>
</html>