<!doctype html>
<html>
<head>
<title>CSV Data to Bubble Chart - RJM Programming - July, 2018</title>
<script type='text/javascript' src='csv_to_bubblechart.js?x=ff'></script>
<script type='text/javascript'>

// https://www.rjmprogramming.com.au/HTMLCSS/csv_to_bubblechart.html?sel1=X&sel2=&sel3=Legend&sel4=ID&sel5=Sizer&sel6=Y&csv=https://www.rjmprogramming.com.au/HTMLCSS/mp.csv#Most Popular Baby Names by Mother Ethnic Group in New York City USA

var cdone=true;
var fcnt=0;
var xf='', yf='', uf='', lf='', idf='', nf='-1,-2,-3,-4,-5';
var xmlhttp;
var csvdata='';

var w = null;
var done=false;
var okay=true;

function process(infilecontents) {
if (infilecontents != null) {
document.getElementById('fil').value='';
done=false;
}
}

function aalater() {
readBlob(0,0); //document.getElementById('pbutton').click();
}

function alater() {
if (!done) {
var files = document.getElementById('file').files;
if (files.length) {
w = files[0].name;
//alert(w);
document.getElementById('fil').value = w;
}
if (document.getElementById('fil').value != '') {
done=true;
setTimeout(aalater, 5000);
} else {
setTimeout(alater, 1000);
}
}
}



// Thanks to https://groups.google.com/forum/#!topic/comp.lang.javascript/b4NvyJB2Ml4 below
function loadCSV(inurl) {
var url=document.URL.split(":")[0] + ":" + inurl.replace("http:","").replace("HTTP:","").replace("Http:","").replace("https:","").replace("HTTPS:","").replace("Https:","");
if (inurl != '' && inurl.trim() == '') {
if (csvdata != '') {
check_if(document.getElementById('myiframe'),csvdata);
//alert('' + rawcsv.length + ' ... ' + csvlines.length);
}
} else {
xmlhttp=null;
cdone=true;
// code for Mozilla, etc.
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}
// code for IE
else if (window.ActiveXObject) {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

if (xmlhttp!=null) {
xmlhttp.onreadystatechange=state_Change;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
else
{
alert("Your browser does not support XMLHTTP.");
}
}
}

function state_Change() {
// if xmlhttp shows "loaded"
if (xmlhttp.readyState==4) {
// if "OK"
if (xmlhttp.status==200) {
var content = xmlhttp.responseText;
check_if(document.getElementById('myiframe'),content);
} else {
alert("Problem retrieving CSV file");
}
}
}

function cdonet() {
cdone=true;
}

function lockin(sthis) {
// http://www.rjmprogramming.com.au/PHP/BubbleChart/bubble_chart.php?title=Correlation%20between%20life%20expectancy,%20fertility%20rate%20and%20population%20of%20some%20world%20countries%20(2010)&label=%27ID%27&value=Life%20Expectancy,Fertility%20Rate,%27Region%27,Population&data=,%20[~ID1~,1,2,%27three%27,4]
if (sthis.value != '') {
fcnt++;
if (fcnt <= 5) {
if (sthis.value == 'ID') {
idf=document.getElementById(sthis.id.replace('sel','s')).innerHTML;
nf=nf.replace('-1','' + eval(-1 + eval(sthis.id.replace('sel',''))) + '');
document.getElementById('label').value="'" + idf.replace(/\'/g,'`') + "'";
var dfs=document.getElementById('maybetitle').value.split('#');
if (dfs.length > 1) {
document.getElementById('title').value=dfs[1];
}
document.getElementById('myform').action+='?title=' + encodeURIComponent(document.getElementById('title').value) + '&onclick=y';
document.getElementById('myform').action+='&label=' + encodeURIComponent(document.getElementById('label').value);
} else if (sthis.value == 'X') {
xf=document.getElementById(sthis.id.replace('sel','s')).innerHTML;
nf=nf.replace('-2','' + eval(-1 + eval(sthis.id.replace('sel',''))) + '');
} else if (sthis.value == 'Y') {
yf=document.getElementById(sthis.id.replace('sel','s')).innerHTML;
nf=nf.replace('-3','' + eval(-1 + eval(sthis.id.replace('sel',''))) + '');
} else if (sthis.value == 'Legend') {
lf=document.getElementById(sthis.id.replace('sel','s')).innerHTML;
nf=nf.replace('-4','' + eval(-1 + eval(sthis.id.replace('sel',''))) + '');
} else if (sthis.value == 'Sizer') {
uf=document.getElementById(sthis.id.replace('sel','s')).innerHTML;
nf=nf.replace('-5','' + eval(-1 + eval(sthis.id.replace('sel',''))) + '');
}
if (fcnt == 5) {
document.getElementById('value').value=xf + ',' + yf + ',' + "'" + lf + "'," + uf;
document.getElementById('myform').action+='&value=' + encodeURIComponent(document.getElementById('value').value);
document.getElementById('data').value=extractcsv(nf);
document.getElementById('myiframe').style.display='block';
document.getElementById('subb').click();
}
}
}
}

function ob(thisvalue) {
if (thisvalue != '') { document.getElementById('bctable').border='2'; document.getElementById('bctable').style.display='block'; cdone=false; loadCSV(thisvalue); if (!cdone) { document.getElementById('myiframe').src=thisvalue; } setTimeout(cdonet,2000); }
}

function atstart() {
setTimeout(alater, 1000);
var qw=location.search.split('csv=')[1] ? decodeURIComponent(location.search.split('csv=')[1].split('&')[0]) : '';
if (qw != '') {
if (location.hash != '') {
document.getElementById('title').value=decodeURIComponent(location.hash).replace('#','');
qw+=decodeURIComponent(location.hash);
}
document.getElementById('maybetitle').value=qw;
ob(qw);
setTimeout(postob, 5000);
}
}

function postob() {
var pob='', ipob=1;
while (document.URL.indexOf('sel' + ipob + '=') != -1) {
pob=location.search.split('sel' + ipob + '=')[1] ? decodeURIComponent(location.search.split('sel' + ipob + '=')[1].split('&')[0]) : '';
if (pob != '') {
document.getElementById('sel' + ipob).value=pob;
lockin(document.getElementById('sel' + ipob));
}
ipob++;
}
}

function readBlob(opt_startByte, opt_stopByte) {

var files = document.getElementById('file').files;
if (!files.length) {
alert('Please select a CSV file!');
return;
} else {
w = files[0].name;
//alert(w);
document.getElementById('fil').value = w;
}

var file = files[0];
var start = parseInt(opt_startByte) || 0;
var stop = parseInt(opt_stopByte) || file.size - 1;

var readertwo = new FileReader();
var reader = new FileReader();

// If we use onloadend, we need to check the readyState.
reader.onloadend = function(evt) {
if (evt.target.readyState == FileReader.DONE) { // DONE == 2
if (okay) {
csvdata=evt.target.result;
document.getElementById('maybetitle').value=' ';
ob(document.getElementById('maybetitle').value);
//document.getElementById('pdf').style.display='none';
//document.getElementById('pdf').innerHTML = evt.target.result;
//alert('preclick ... ' + evt.target.result);
//document.getElementById('submit').click();
//cis.document.write(evt.target.result.replace(/</g, '<').replace(/>/g, '>'));
//document.body.innerHTML = document.body.innerHTML + '<div id=be style=display:block;>' + evt.target.result.replace(/</g, '<').replace(/>/g, '>') + '</div>';
//document.getElementById('byte_content').textContent = evt.target.result;
//document.getElementById('byte_range').textContent =
// ['Read bytes: ', start + 1, ' - ', stop + 1,
// ' of ', file.size, ' byte file'].join('');
process(evt.target.result);
} else {
document.getElementById('fil').value='';
done=false;
alert('Not a CSV file!');
okay=true;
document.getElementById('pdf').style.display='block';
location.href=document.URL;
}
}
};

readertwo.onloadend = function(evt) {
if (evt.target.readyState == FileReader.DONE) { // DONE == 2
if (('' + evt.target.result + ' ').indexOf(',') != -1) {
csvdata=evt.target.result;
//alert(csvdata);
document.getElementById('maybetitle').value=' ';
ob(document.getElementById('maybetitle').value);
//document.getElementById('pdf').style.display='none';
//document.getElementById('showpdf').style.display='block';
//document.getElementById('showpdf').innerHTML = evt.target.result;
} else {
okay=false;
}
}
};

var blob = file.slice(start, stop + 1);
readertwo.readAsBinaryString(blob); //BinaryString(blob);
//reader.readAsDataURL(blob); //BinaryString(blob);

}

</script>
</head>
<body style='background-color:yellow;' onload='atstart();'>
<h1>CSV Data to Bubble Chart<h1>
<h3>RJM Programming - July, 2018</h3><br>

CSV File URL (Bubble Chart Title via #Title suffix): <input style='width:50%;' id='maybetitle' type='text' onblur='ob(this.value);' value=''></input> or <input type='hidden' id='fil' name='fil' value='' /><input id='file' type='file' name='file'><span id='mode' name='mode'>  </span><span class='readBytesButtons'><button style='display:none;' data-endbyte='4' data-startbyte='0'>1-5</button><button style='display:none;' data-endbyte='14' data-startbyte='5'>6-15</button><button style='display:none;' data-endbyte='7' data-startbyte='6'>7-8</button><button style='display:none;' id=pbutton onclick='readBlob(0,0);'>Process</button></span><br>

<table id='bctable'>
<tr id='trhead' style='background-color:pink;'><th id='th1'><select style='display:none;' id='sel1' onchange='lockin(this);'><option value=''>Optionally pick Bubble Chart role</option><option value='ID'>The ID column that is uniquifier</option><option value='X'>Numerical for X axis</option><option value='Y'>Numerical for Y axis</option><option value='Legend'>Character changes form legend</option><option value='Sizer'>Numerical determines Bubble size</option></select></th></tr>
</table>
<form enctype='application/x-www-urlencoded' style='display:none;' id='myform' target='myiframe' action='//www.rjmprogramming.com.au/PHP/BubbleChart/bubble_chart.php' method='POST'>
<input type='hidden' id='title' name='title' value='Bubble Chart via CSV'></input>
<input type='hidden' name='onclick' value='y'></input>
<input type='hidden' id='label' name='label' value="'ID'"></input>
<input type='hidden' id='value' name='value' value="Life Expectancy,Fertility Rate,'Region',Population"></input>
<input type='hidden' id='data' name='data' value=''></input>
<input align='center' id='subb' style='display:none;' value='ShowBubble Chart Below' type='submit'></input>
</form>
<br>
<iframe style='display:none;width:100%;height:800px;' name='myiframe' id='myiframe' src='//www.rjmprogramming.com.au/About_Us.html' onload="if (!cdone) { check_if(this,''); }"></iframe>
</body>
</html>