<!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=ffdg'></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 nfdone=',';

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

var verbis='//www.rjmprogramming.com.au/PHP/BubbleChart/bubble_chart.php';
var numcols=5;

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 != '') {
document.body.style.cursor='progress';
check_if(document.getElementById('myiframe'),csvdata);
document.body.style.cursor='pointer';
//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;
document.body.style.cursor='progress';
check_if(document.getElementById('myiframe'),content);
document.body.style.cursor='pointer';
} else {
alert("Problem retrieving CSV file");
}
}
}

function cdonet() {
cdone=true;
document.getElementById('bctable').style.cursor='pointer';
}

function lockin(sthis) {
var dfs;
// 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 != '' && nfdone.indexOf(',' + sthis.id.replace('sel','') + ',') == -1 && nfdone.indexOf(',' + sthis.value + ',') != -1) {
sthis.value='';
} else if (sthis.value != '' && nfdone.indexOf(',' + sthis.id.replace('sel','') + ',') == -1) {
fcnt++;
if (fcnt <= numcols) {
if ((sthis.value + ' ').substring(0,4) == 'Year') {
nfdone+=sthis.id.replace('sel','') + ',' + sthis.value + ',';
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,'`') + "";
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 == 'CountryCode') {
nfdone+=sthis.id.replace('sel','') + ',' + sthis.value + ',';
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,'`') + "'";
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&width=556&height=347';
document.getElementById('myform').action+='&country=' + encodeURIComponent('Country');
document.getElementById('myform').action+='&area=' + encodeURIComponent('Area');
document.getElementById('myform').action+='&popularity=' + encodeURIComponent('Popularity');
} else if (sthis.value == 'Country') {
nfdone+=sthis.id.replace('sel','') + ',' + sthis.value + ',';
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,'`') + "'";
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&width=556&height=347';
document.getElementById('myform').action+='&country=' + encodeURIComponent('Country');
document.getElementById('myform').action+='&popularity=' + encodeURIComponent('Popularity');
} else if (sthis.value == 'Subject') {
nfdone+=sthis.id.replace('sel','') + ',' + ',' + sthis.value + ',';
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,'`') + "'";
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+='&task=' + encodeURIComponent(document.getElementById('task').value);
document.getElementById('myform').action+='&desc=' + encodeURIComponent(document.getElementById('desc').value);
} else if (sthis.value == 'Task') {
nfdone+=sthis.id.replace('sel','') + ',' + ',' + sthis.value + ',';
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,'`') + "'";
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+='&task=' + encodeURIComponent(document.getElementById('task').value);
document.getElementById('myform').action+='&desc=' + encodeURIComponent(document.getElementById('desc').value);
} else if (sthis.value == 'Latitude') {
nfdone+=sthis.id.replace('sel','') + ',' + ',' + sthis.value + ',';
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,'`') + "'";
dfs=document.getElementById('maybetitle').value.split('#');
if (dfs.length > 1) {
document.getElementById('title').value=dfs[1];
}
document.getElementById('label').value="['Lat',";
document.getElementById('value').value="'Lon', 'Name']";
document.getElementById('myform').action+='?title=' + encodeURIComponent(document.getElementById('title').value) + '&onclick=y';
document.getElementById('myform').action+='&label=' + encodeURIComponent(document.getElementById('label').value);
document.getElementById('myform').action+='&value=' + encodeURIComponent(document.getElementById('value').value);
} else if (sthis.value == 'ID') {
nfdone+=sthis.id.replace('sel','') + ',' + ',' + sthis.value + ',';
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,'`') + "'";
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 + ' ').substring(0,5) == 'Sales') {
nfdone+=sthis.id.replace('sel','') + ',' + ',' + sthis.value + ',';
xf=document.getElementById(sthis.id.replace('sel','s')).innerHTML;
nf=nf.replace('-2','' + eval(-1 + eval(sthis.id.replace('sel',''))) + '');
} else if (sthis.value == 'PopularityValue') {
nfdone+=sthis.id.replace('sel','') + ',' + ',' + sthis.value + ',';
xf=document.getElementById(sthis.id.replace('sel','s')).innerHTML;
nf=nf.replace('-2','' + eval(-1 + eval(sthis.id.replace('sel',''))) + '');
} else if (sthis.value == 'Popularity') {
nfdone+=sthis.id.replace('sel','') + ',' + ',' + sthis.value + ',';
xf=document.getElementById(sthis.id.replace('sel','s')).innerHTML;
nf=nf.replace('-2','' + eval(-1 + eval(sthis.id.replace('sel',''))) + '');
} else if (sthis.value == 'Measure') {
nfdone+=sthis.id.replace('sel','') + ',' + ',' + sthis.value + ',';
xf=document.getElementById(sthis.id.replace('sel','s')).innerHTML;
nf=nf.replace('-2','' + eval(-1 + eval(sthis.id.replace('sel',''))) + '');
} else if (sthis.value == 'Percentage') {
nfdone+=sthis.id.replace('sel','') + ',' + ',' + sthis.value + ',';
xf=document.getElementById(sthis.id.replace('sel','s')).innerHTML;
nf=nf.replace('-2','' + eval(-1 + eval(sthis.id.replace('sel',''))) + '');
} else if (sthis.value == 'Longitude') {
nfdone+=sthis.id.replace('sel','') + ',' + ',' + sthis.value + ',';
xf=document.getElementById(sthis.id.replace('sel','s')).innerHTML;
nf=nf.replace('-2','' + eval(-1 + eval(sthis.id.replace('sel',''))) + '');
} else if (sthis.value == 'X') {
nfdone+=sthis.id.replace('sel','') + ',' + ',' + sthis.value + ',';
xf=document.getElementById(sthis.id.replace('sel','s')).innerHTML;
nf=nf.replace('-2','' + eval(-1 + eval(sthis.id.replace('sel',''))) + '');
} else if ((sthis.value + ' ').substring(0,11) == 'Expenditure') {
nfdone+=sthis.id.replace('sel','') + ',' + ',' + sthis.value + ',';
xf=document.getElementById(sthis.id.replace('sel','s')).innerHTML;
nf=nf.replace('-3','' + eval(-1 + eval(sthis.id.replace('sel',''))) + '');
} else if (sthis.value == 'AreaValue') {
nfdone+=sthis.id.replace('sel','') + ',' + ',' + sthis.value + ',';
yf=document.getElementById(sthis.id.replace('sel','s')).innerHTML;
nf=nf.replace('-3','' + eval(-1 + eval(sthis.id.replace('sel',''))) + '');
} else if (sthis.value == 'Placename') {
nfdone+=sthis.id.replace('sel','') + ',' + ',' + sthis.value + ',';
yf=document.getElementById(sthis.id.replace('sel','s')).innerHTML;
nf=nf.replace('-3','' + eval(-1 + eval(sthis.id.replace('sel',''))) + '');
} else if (sthis.value == 'Y') {
nfdone+=sthis.id.replace('sel','') + ',' + ',' + sthis.value + ',';
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') {
nfdone+=sthis.id.replace('sel','') + ',' + ',' + sthis.value + ',';
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') {
nfdone+=sthis.id.replace('sel','') + ',' + ',' + sthis.value + ',';
uf=document.getElementById(sthis.id.replace('sel','s')).innerHTML;
nf=nf.replace('-5','' + eval(-1 + eval(sthis.id.replace('sel',''))) + '');
}
if (fcnt == numcols) {
if (verbis.toLowerCase().indexOf('bubble') != -1) {
document.getElementById('value').value=xf + ',' + yf + ',' + "'" + lf + "'," + uf;
document.getElementById('myform').action+='&value=' + encodeURIComponent(document.getElementById('value').value);
} else if (verbis.toLowerCase().indexOf('line') != -1) {
document.getElementById('label').value='Year';
xf='Sales';
yf='Expenditure';
document.getElementById('value').value=xf + ',' + yf;
document.getElementById('myform').action+='&value=' + encodeURIComponent(document.getElementById('value').value);
} else if (verbis.toLowerCase().indexOf('area') != -1) {
document.getElementById('label').value='Year';
xf='Sales';
yf='Expenditure';
document.getElementById('value').value=xf + ',' + yf;
document.getElementById('myform').action+='&value=' + encodeURIComponent(document.getElementById('value').value);
} else if (verbis.toLowerCase().indexOf('bar') != -1) {
document.getElementById('label').value='Year';
xf='Sales';
yf='Expenditure';
document.getElementById('value').value=xf + ',' + yf;
document.getElementById('myform').action+='&value=' + encodeURIComponent(document.getElementById('value').value);
} else if (verbis.toLowerCase().indexOf('column') != -1) {
document.getElementById('label').value='Year';
xf='Sales';
yf='Expenditure';
document.getElementById('value').value=xf + ',' + yf;
document.getElementById('myform').action+='&value=' + encodeURIComponent(document.getElementById('value').value);
}
//document.getElementById('bctable').style.cursor='progress';
document.body.style.cursor='progress';
document.getElementById('data').value=extractcsv(nf);
//document.getElementById('bctable').style.cursor='pointer';
document.body.style.cursor='pointer';
document.getElementById('myiframe').style.display='block';
document.getElementById('subb').click();
fcnt=0;
nfdone=',';
}
}
}
}

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

function nc(jnc) {
if (jnc != 5) {
nf='-1';
for (var kfc=2; kfc<=jnc; kfc++) {
nf+=',-' + kfc;
}
}
return jnc;
}

function ourdecodeURIComponent(huhd) {
var outd=decodeURIComponent(huhd);
// <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>
var wassel=document.getElementById('sel1').innerHTML;
var issel=wassel;
if (outd.indexOf('/') == -1 || 1 == 1) {
if (outd.toLowerCase().indexOf('map') != -1) {
numcols=nc(3);
issel="<option value=''>Optionally pick Map Chart role</option><option value='Latitude'>Latitude (decimal degrees)</option><option value='Longitude'>Longitude (decimal degrees)</option><option value='Placename'>Placename</option>";
document.getElementById('title').value=document.getElementById('title').value.replace('Bubble Chart ','Map Chart ');
if (issel != wassel) document.getElementById('sel1').innerHTML=issel;
return '//www.rjmprogramming.com.au/PHP/Map/map.php';
} else if (outd.toLowerCase().indexOf('bubble') != -1) {
numcols=nc(3);
if (issel != wassel) document.getElementById('sel1').innerHTML=issel;
return '//www.rjmprogramming.com.au/PHP/BubbleChart/bubble_chart.php';
} else if (outd.toLowerCase().indexOf('line') != -1) {
numcols=nc(3);
issel="<option value=''>Optionally pick Line Chart role</option><option value='YearLine'>X Axis Numeric (often Year)</option><option value='SalesLine'>Numeric Measure 1 (eg. Sales)</option><option value='ExpenditureLine'>Numeric Measure 2 (eg. Expenditure)</option>";
document.getElementById('title').value=document.getElementById('title').value.replace('Bubble Chart ','Line Chart ');
if (issel != wassel) document.getElementById('sel1').innerHTML=issel;
return '//www.rjmprogramming.com.au/PHP/LineChart/line_chart.php';
} else if (outd.toLowerCase().indexOf('area') != -1) {
numcols=nc(3);
issel="<option value=''>Optionally pick Area Chart role</option><option value='YearArea'>X Axis Numeric (often Year)</option><option value='SalesArea'>Numeric Measure 1 (eg. Sales)</option><option value='ExpenditureArea'>Numeric Measure 2 (eg. Expenditure)</option>";
document.getElementById('title').value=document.getElementById('title').value.replace('Bubble Chart ','Area Chart ');
if (issel != wassel) document.getElementById('sel1').innerHTML=issel;
return '//www.rjmprogramming.com.au/PHP/AreaChart/area_chart.php';
} else if (outd.toLowerCase().indexOf('column') != -1) {
numcols=nc(3);
issel="<option value=''>Optionally pick Column Chart role</option><option value='YearColumn'>X Axis Numeric (often Year)</option><option value='SalesColumn'>Numeric Measure 1 (eg. Sales)</option><option value='ExpenditureColumn'>Numeric Measure 2 (eg. Expenditure)</option>";
document.getElementById('title').value=document.getElementById('title').value.replace('Bubble Chart ','Column Chart ');
if (issel != wassel) document.getElementById('sel1').innerHTML=issel;
return '//www.rjmprogramming.com.au/PHP/ColumnChart/column_chart.php';
} else if (outd.toLowerCase().indexOf('bar') != -1) {
numcols=nc(3);
issel="<option value=''>Optionally pick Bar Chart role</option><option value='YearBar'>X Axis Numeric (often Year)</option><option value='SalesBar'>Numeric Measure 1 (eg. Sales)</option><option value='ExpenditureBar'>Numeric Measure 2 (eg. Expenditure)</option>";
document.getElementById('title').value=document.getElementById('title').value.replace('Bubble Chart ','Bar Chart ');
if (issel != wassel) document.getElementById('sel1').innerHTML=issel;
return '//www.rjmprogramming.com.au/PHP/BarChart/bar_chart.php';
} else if (outd.toLowerCase().indexOf('pie') != -1) {
numcols=nc(2);
issel="<option value=''>Optionally pick Pie Chart role</option><option value='Task'>Task</option><option value='Percentage'>Numeric (could be percentage)</option>";
document.getElementById('title').value=document.getElementById('title').value.replace('Bubble Chart ','Pie Chart ');
if (issel != wassel) document.getElementById('sel1').innerHTML=issel;
return '//www.rjmprogramming.com.au/PHP/PieChart/pie_chart.php';
} else if (outd.toLowerCase().indexOf('histogram') != -1) {
numcols=nc(2);
issel="<option value=''>Optionally pick Histogram Chart role</option><option value='Subject'>Subject</option><option value='Measure'>Numeric Measure (often count)</option>";
document.getElementById('title').value=document.getElementById('title').value.replace('Bubble Chart ','Histogram Chart ');
if (issel != wassel) document.getElementById('sel1').innerHTML=issel;
return '//www.rjmprogramming.com.au/PHP/HistogramChart/histogram_chart.php';
} else if (outd.toLowerCase().indexOf('geo') != -1) {
numcols=nc(2);
issel="<option value=''>Optionally pick Geo Chart role</option><option value='Country'>Country Two Letter Code</option><option value='Popularity'>Numeric Measure</option>";
document.getElementById('title').value=document.getElementById('title').value.replace('Bubble Chart ','Geo Chart ');
if (issel != wassel) document.getElementById('sel1').innerHTML=issel;
return '//www.rjmprogramming.com.au/PHP/GeoChart/geo_chart.php';
} else if (outd.toLowerCase().indexOf('intensity') != -1) {
numcols=nc(3);
issel="<option value=''>Optionally pick Intensity Chart role</option><option value='CountryCode'>Country Two Letter Code</option><option value='PopularityValue'>Numeric Measure 1</option><option value='AreaValue'>Numeric Measure 2</option>";
document.getElementById('title').value=document.getElementById('title').value.replace('Bubble Chart ','Intensity Chart ');
if (issel != wassel) document.getElementById('sel1').innerHTML=issel;
return '//www.rjmprogramming.com.au/PHP/IntensityChart/intensity_chart.php';
}
}
return outd;
}

function atstart() {
var wasv=verbis;
setTimeout(alater, 1000);
verbis=location.search.split('chart=')[1] ? ourdecodeURIComponent(location.search.split('chart=')[1].split('&')[0]) : wasv;
if (verbis != wasv) {
document.getElementById('topsel').value=verbis;
}
document.getElementById('myform').action=verbis;
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;
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);
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);
} else {
okay=false;
}
}
};

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

}

function changeverb(towhat) {
location.href=document.URL.split('#')[0].split('?')[0] + '?chart=' + encodeURIComponent(towhat);
}

</script>
</head>
<body style='background-color:yellow;' onload='atstart();'>
<h1>CSV Data to <select id=topsel onchange='changeverb(this.value);'>
<option value='//www.rjmprogramming.com.au/PHP/BubbleChart/bubble_chart.php'>Bubble Chart</option>
<option value='//www.rjmprogramming.com.au/PHP/Map/map.php'>Map Chart</option>
<option value='//www.rjmprogramming.com.au/PHP/GeoChart/geo_chart.php'>Geo Chart</option>
<option value='//www.rjmprogramming.com.au/PHP/IntensityChart/intensity_chart.php'>Intensity Chart</option>
<option value='//www.rjmprogramming.com.au/PHP/LineChart/line_chart.php'>Line Chart</option>
<option value='//www.rjmprogramming.com.au/PHP/AreaChart/area_chart.php'>Area Chart</option>
<option value='//www.rjmprogramming.com.au/PHP/ColumnChart/column_chart.php'>Column Chart</option>
<option value='//www.rjmprogramming.com.au/PHP/BarChart/bar_chart.php'>Bar Chart</option>
<option value='//www.rjmprogramming.com.au/PHP/PieChart/pie_chart.php'>Pie Chart</option>
<option value='//www.rjmprogramming.com.au/PHP/HistogramChart/histogram_chart.php'>Histogram Chart</option>
</select><h1>
<h3>RJM Programming - July, 2018</h3><br>

CSV File URL (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' name='wouldlikeyoutoseekpermission' value='y'></input>
<input type='hidden' id='task' name='task' value='Task'></input>
<input type='hidden' id='desc' name='desc' value='Percentage'></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='country' name='country' value='Country'></input>
<input type='hidden' id='popularity' name='popularity' value='Popularity'></input>
<input type='hidden' id='area' name='area' value='Area'></input>
<input type='hidden' id='width' name='width' value='556'></input>
<input type='hidden' id='height' name='height' value='347'></input>
<input type='hidden' id='data' name='data' value=''></input>
<input align='center' id='subb' style='display:none;' value='Show 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>