<!doctype html>
<html>
<head>
<title>CSV or JSON Data to Bubble Chart - RJM Programming - July, 2018</title>
<style>
th { vertical-align: top; }
</style>
<script language="JavaScript" type="text/javascript" src="//code.jquery.com/jquery-1.2.6.min.js"></script>
<script type='text/javascript' src='csv_to_bubblechart.js?x=ffddg'></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 oldval="Life Expectancy,Fertility Rate,'Region',Population";

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

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 != '') {
if (('' + csvdata).substring(0,1) == '[' && csvdata.indexOf(',') != -1) { // JSON
csvdata=JSONToCSVConvertor(csvdata, "JSON", true, true);
}
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;
if (('' + content).substring(0,1) == '[' && content.indexOf(',') != -1) { // JSON
content=JSONToCSVConvertor(content, "JSON", true, true);
}
document.body.style.cursor='progress';
check_if(document.getElementById('myiframe'),content);
document.body.style.cursor='pointer';
} else {
alert("Problem retrieving CSV or JSON file");
}
}
}

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

function blockit(bwhat) {
var huhs=bwhat.replace('?','').split('=');
for (var ihuh=1; ihuh<huhs.length; ihuh++) {
if (huhs[eval(-1 + ihuh)].split('&')[eval(-1 + huhs[eval(-1 + ihuh)].split('&').length)] != 'onclick') {
document.getElementById('myform').style.display='block';
if (('' + document.getElementById(huhs[eval(-1 + ihuh)].split('&')[eval(-1 + huhs[eval(-1 + ihuh)].split('&').length)]).title) == '') {
document.getElementById(huhs[eval(-1 + ihuh)].split('&')[eval(-1 + huhs[eval(-1 + ihuh)].split('&').length)]).title=document.getElementById(huhs[eval(-1 + ihuh)].split('&')[eval(-1 + huhs[eval(-1 + ihuh)].split('&').length)]).id;
}
document.getElementById(huhs[eval(-1 + ihuh)].split('&')[eval(-1 + huhs[eval(-1 + ihuh)].split('&').length)]).style.display='inline';
}
}
return bwhat;
}

function addfextras(infd) {
var outfd=infd, prehuhs=infd.split('&');
if (prehuhs.length > 1) {
var huhs=infd.replace(prehuhs[0] + '&','').split('=');
outfd=decodeURIComponent(prehuhs[0]) + '@!@';
for (var ihuh=1; ihuh<huhs.length; ihuh++) {
if (huhs[eval(-1 + ihuh)].split('&')[eval(-1 + huhs[eval(-1 + ihuh)].split('&').length)] != 'onclick') {
if (document.getElementById(huhs[eval(-1 + ihuh)].split('&')[eval(-1 + huhs[eval(-1 + ihuh)].split('&').length)])) {
document.getElementById(huhs[eval(-1 + ihuh)].split('&')[eval(-1 + huhs[eval(-1 + ihuh)].split('&').length)]).value=huhs[ihuh].split('&')[0];
outfd+='&' + huhs[eval(-1 + ihuh)].split('&')[eval(-1 + huhs[eval(-1 + ihuh)].split('&').length)] + '=' + encodeURIComponent(huhs[ihuh].split('&')[0]);
} else {
document.getElementById('fextras').innerHTML+="<input type='hidden' id='" + huhs[eval(-1 + ihuh)].split('&')[eval(-1 + huhs[eval(-1 + ihuh)].split('&').length)] + "' name='" + huhs[eval(-1 + ihuh)].split('&')[eval(-1 + huhs[eval(-1 + ihuh)].split('&').length)] + "' value='" + huhs[ihuh].split('&')[0] + "'></input>";
outfd+='&' + huhs[eval(-1 + ihuh)].split('&')[eval(-1 + huhs[eval(-1 + ihuh)].split('&').length)] + '=' + encodeURIComponent(huhs[ihuh].split('&')[0]);
}
}
}
} else {
outfd=decodeURIComponent(infd); //.replace(/\'/g,'%27');
//alert('infd=' + infd + ' ... vs ... ' + 'outfd=' + outfd);
}
return outfd;
}

function reassess(bwhat) {
var fa=bwhat.split('?')[0];
if (bwhat.indexOf('?') != -1) {
var huhs=bwhat.split('?')[1].split('=');
var prefix='?', fv='';
for (var ihuh=1; ihuh<huhs.length; ihuh++) {
if (huhs[eval(-1 + ihuh)].split('&')[eval(-1 + huhs[eval(-1 + ihuh)].split('&').length)] != 'onclick') {
fv=addfextras(document.getElementById(huhs[eval(-1 + ihuh)].split('&')[eval(-1 + huhs[eval(-1 + ihuh)].split('&').length)]).value);
fa+=prefix + huhs[eval(-1 + ihuh)].split('&')[eval(-1 + huhs[eval(-1 + ihuh)].split('&').length)] + '=' + encodeURIComponent(fv.split('@!@')[0]).replace(/\'/g,'%27');
if (fv.indexOf('@!@') != -1) {
fa+=fv.split('@!@')[1];
}
} else {
fa+='&onclick=y';
}
prefix='&';
}
}
//alert(fa + ' via ' + bwhat);
return fa;
}

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) {
// http://www.rjmprogramming.com.au/PHP/AnnotatedTimelineChart/annotatedtimeline_chart.php?title=Sold%20Pencils%20and%20Sold%20Pens&desc1=Sold%20Pencils&title1=Sold%20Pencils%20title1&text1=Sold%20Pencils%20text1&desc2=Sold%20Pens&title2=Sold%20Pens%20title2&text2=Sold%20Pens%20text2&data=[newDate(2018,7,1),1,~Sold%20Pencils%20title1~,~Sold%20Pencils%20text1~,2,~Sold%20Pencils%20title2~,~Sold%20Pencils%20text2~],[newDate(2018,7,2),3,~Sold%20Pencils%20title3~,~Sold%20Pencils%20text3~,4,~Sold%20Pencils%20title4~,~Sold%20Pencils%20text5~]
if (sthis.value == 'AnnotatedTimelineDate') {
nfdone+=sthis.id.replace('sel','') + ',' + sthis.value + ',';
idf=document.getElementById(sthis.id.replace('sel','s')).innerHTML;
nf=nf.replace('-1','0' + 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+=blockit('?title=' + encodeURIComponent(document.getElementById('title').value) + '&onclick=yes&desc1=Sold%20Pencils&title1=Sold%20Pencils%20title1&text1=Sold%20Pencils%20text1&desc2=Sold%20Pens&title2=Sold%20Pens%20title2&text2=Sold%20Pens%20text2');
} else if (sthis.value == 'CalendarDate') {
nfdone+=sthis.id.replace('sel','') + ',' + sthis.value + ',';
idf=document.getElementById(sthis.id.replace('sel','s')).innerHTML;
nf=nf.replace('-1','0' + 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+=blockit('?title=' + encodeURIComponent(document.getElementById('title').value) + '&onclick=y&desc=Red%20Sox%20Attendance');
} else if (sthis.value == 'FromDate') {
nfdone+=sthis.id.replace('sel','') + ',' + sthis.value + ',';
idf=document.getElementById(sthis.id.replace('sel','s')).innerHTML;
nf=nf.replace('-1','0' + 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+=blockit('?title=' + encodeURIComponent(document.getElementById('title').value) + '&onclick=y&desc=US%20President');
} else 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+=blockit('?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+=blockit('?title=' + encodeURIComponent(document.getElementById('title').value) + '&onclick=y&width=556&height=347&country=' + encodeURIComponent('Country') + '&area=' + encodeURIComponent('Area') + '&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+=blockit('?title=' + encodeURIComponent(document.getElementById('title').value) + '&onclick=y&width=556&height=347&country=' + encodeURIComponent('Country') + '&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+=blockit('?title=' + encodeURIComponent(document.getElementById('title').value) + '&onclick=y&task=' + encodeURIComponent(document.getElementById('task').value) + '&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+=blockit('?title=' + encodeURIComponent(document.getElementById('title').value) + '&onclick=y&task=' + encodeURIComponent(document.getElementById('task').value) + '&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']";
oldval="'Lon', 'Name']";
document.getElementById('myform').action+=blockit('?title=' + encodeURIComponent(document.getElementById('title').value) + '&onclick=y&label=' + encodeURIComponent(document.getElementById('label').value) + '&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+=blockit('?title=' + encodeURIComponent(document.getElementById('title').value) + '&onclick=y&label=' + encodeURIComponent(document.getElementById('label').value));
} else if (sthis.value == 'TimelineComment') {
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 == 'CalendarMeasure') {
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 == 'Measure1') {
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,5) == 'ToDate') {
nfdone+=sthis.id.replace('sel','') + ',' + ',' + sthis.value + ',';
xf=document.getElementById(sthis.id.replace('sel','s')).innerHTML;
nf=nf.replace('-2','0' + eval(-1 + eval(sthis.id.replace('sel',''))) + '');
} 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 == 'ToDate') {
nfdone+=sthis.id.replace('sel','') + ',' + ',' + sthis.value + ',';
xf=document.getElementById(sthis.id.replace('sel','s')).innerHTML;
nf=nf.replace('-3','0' + eval(-1 + eval(sthis.id.replace('sel',''))) + '');
} else if (sthis.value == 'Title1') {
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 + ' ').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 == 'Text1') {
nfdone+=sthis.id.replace('sel','') + ',' + ',' + sthis.value + ',';
xf=document.getElementById(sthis.id.replace('sel','s')).innerHTML;
nf=nf.replace('-4','' + 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 == 'Measure2') {
nfdone+=sthis.id.replace('sel','') + ',' + ',' + sthis.value + ',';
xf=document.getElementById(sthis.id.replace('sel','s')).innerHTML;
nf=nf.replace('-5','' + 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',''))) + '');
} else if (sthis.value == 'Title2') {
nfdone+=sthis.id.replace('sel','') + ',' + ',' + sthis.value + ',';
xf=document.getElementById(sthis.id.replace('sel','s')).innerHTML;
nf=nf.replace('-6','' + eval(-1 + eval(sthis.id.replace('sel',''))) + '');
} else if (sthis.value == 'Text2') {
nfdone+=sthis.id.replace('sel','') + ',' + ',' + sthis.value + ',';
xf=document.getElementById(sthis.id.replace('sel','s')).innerHTML;
nf=nf.replace('-7','' + eval(-1 + eval(sthis.id.replace('sel',''))) + '');
} else if ((sthis.value + ' ').substring(0,8) == 'NUMBERAT') {
nfdone+=sthis.id.replace('sel','') + ',' + ',' + sthis.value + ',';
xf=document.getElementById(sthis.id.replace('sel','s')).innerHTML;
nf=nf.replace('-' + sthis.value.replace('NUMBERAT',''),'' + 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('annotatedtimeline') != -1) {
fcnt=fcnt;
} else if (verbis.toLowerCase().indexOf('timeline') != -1) {
fcnt=fcnt;
} 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('myform').action=reassess(document.getElementById('myform').action);
//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';
//alert(document.getElementById('myform').outerHTML);
document.getElementById('subb').click();
location.href='#premyiframe';
//alert(11);
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<=Math.abs(jnc); kfc++) {
nf+=',-' + kfc;
}
}
return jnc;
}

function ourdecodeURIComponent(huhd) {
var sparec='',xf='',yf='';
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('calendar') != -1) {
// http://www.rjmprogramming.com.au/PHP/AnnotatedTimelineChart/annotatedtimeline_chart.php
// ?title=Sold%20Pencils%20and%20Sold%20Pens&desc1=Sold%20Pencils&title1=Sold%20Pencils%20title1&text1=Sold%20Pencils%20text1&desc2=Sold%20Pens&title2=Sold%20Pens%20title2&text2=Sold%20Pens%20text2&data=[newDate(2018,7,1),1,~Sold%20Pencils%20title1~,~Sold%20Pencils%20text1~,2,~Sold%20Pencils%20title2~,~Sold%20Pencils%20text2~],[newDate(2018,7,2),3,~Sold%20Pencils%20title3~,~Sold%20Pencils%20text3~,4,~Sold%20Pencils%20title4~,~Sold%20Pencils%20text5~]
numcols=nc(2);
issel="<option value=''>Optionally pick Calendar Chart role</option><option value='CalendarDate'>Date</option><option value='CalendarMeasure'>Numerical Measure</option>";
document.getElementById('title').value=document.getElementById('title').value.replace('Bubble Chart ','Calendar Chart ');
if (issel != wassel) document.getElementById('sel1').innerHTML=issel;
document.getElementById('desc').value="Count";
sparec=blockit('?title=' + encodeURIComponent(document.getElementById('title').value) + '&onclick=y&desc=Red%20Sox%20Attendance');
return '//www.rjmprogramming.com.au/PHP/CalendarChart/calendar_chart.php';
} else if (outd.toLowerCase().indexOf('annotatedtimeline') != -1) {
// http://www.rjmprogramming.com.au/PHP/AnnotatedTimelineChart/annotatedtimeline_chart.php
// ?title=Sold%20Pencils%20and%20Sold%20Pens&desc1=Sold%20Pencils&title1=Sold%20Pencils%20title1&text1=Sold%20Pencils%20text1&desc2=Sold%20Pens&title2=Sold%20Pens%20title2&text2=Sold%20Pens%20text2&data=[newDate(2018,7,1),1,~Sold%20Pencils%20title1~,~Sold%20Pencils%20text1~,2,~Sold%20Pencils%20title2~,~Sold%20Pencils%20text2~],[newDate(2018,7,2),3,~Sold%20Pencils%20title3~,~Sold%20Pencils%20text3~,4,~Sold%20Pencils%20title4~,~Sold%20Pencils%20text5~]
numcols=nc(7);
issel="<option value=''>Optionally pick Annotated Timeline Chart role</option><option value='AnnotatedTimelineDate'>Date</option><option value='Measure1'>Numerical Measure One</option><option value='Title1'>Title One</option><option value='Text1'>Text One</option><option value='Measure2'>Numerical Measure Two</option><option value='Title2'>Title Two</option><option value='Text2'>Text Two</option>";
document.getElementById('title').value=document.getElementById('title').value.replace('Bubble Chart ','Annotated Timeline Chart ');
if (issel != wassel) document.getElementById('sel1').innerHTML=issel;
sparec=blockit('?title=' + encodeURIComponent(document.getElementById('title').value) + '&onclick=yes&desc1=Sold%20Pencils&title1=Sold%20Pencils%20title1&text1=Sold%20Pencils%20text1&desc2=Sold%20Pens&title2=Sold%20Pens%20title2&text2=Sold%20Pens%20text2');
return '//www.rjmprogramming.com.au/PHP/AnnotatedTimelineChart/annotatedtimeline_chart.php';
} else if (outd.toLowerCase().indexOf('timeline') != -1) {
// http://www.rjmprogramming.com.au/PHP/AnnotatedTimelineChart/annotatedtimeline_chart.php
// ?title=Sold%20Pencils%20and%20Sold%20Pens&desc1=Sold%20Pencils&title1=Sold%20Pencils%20title1&text1=Sold%20Pencils%20text1&desc2=Sold%20Pens&title2=Sold%20Pens%20title2&text2=Sold%20Pens%20text2&data=[newDate(2018,7,1),1,~Sold%20Pencils%20title1~,~Sold%20Pencils%20text1~,2,~Sold%20Pencils%20title2~,~Sold%20Pencils%20text2~],[newDate(2018,7,2),3,~Sold%20Pencils%20title3~,~Sold%20Pencils%20text3~,4,~Sold%20Pencils%20title4~,~Sold%20Pencils%20text5~]
numcols=nc(3);
issel="<option value=''>Optionally pick Timeline Chart role</option><option value='FromDate'>Date From</option><option value='TimelineComment'>Description</option><option value='ToDate'>Date To</option>";
document.getElementById('title').value=document.getElementById('title').value.replace('Bubble Chart ','Timeline Chart ');
if (issel != wassel) document.getElementById('sel1').innerHTML=issel;
document.getElementById('desc').value='US President';
sparec=blockit('?title=' + encodeURIComponent(document.getElementById('title').value) + '&onclick=y&desc=US%20President');
return '//www.rjmprogramming.com.au/PHP/TimelineChart/timeline_chart.php';
} else 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;
document.getElementById('label').value="['Lat',";
document.getElementById('value').value="'Lon', 'Name']";
sparec=blockit('?title=' + encodeURIComponent(document.getElementById('title').value) + '&onclick=y&label=' + encodeURIComponent(document.getElementById('label').value) + '&value=' + encodeURIComponent(document.getElementById('value').value));
return '//www.rjmprogramming.com.au/PHP/Map/map.php';
} else if (outd.toLowerCase().indexOf('bubble') != -1) {
numcols=nc(5);
if (issel != wassel) document.getElementById('sel1').innerHTML=issel;
sparec=blockit('?title=' + encodeURIComponent(document.getElementById('title').value) + '&onclick=y&label=' + encodeURIComponent(document.getElementById('label').value) + '&value=' + encodeURIComponent(document.getElementById('value').value));
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;
document.getElementById('label').value='Year';
xf='Sales';
yf='Expenditure';
document.getElementById('value').value=xf + ',' + yf;
oldval=document.getElementById('value').value;
sparec=blockit('?title=' + encodeURIComponent(document.getElementById('title').value) + '&onclick=y&label=' + encodeURIComponent(document.getElementById('label').value) + '&value=' + encodeURIComponent(document.getElementById('value').value));
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;
document.getElementById('label').value='Year';
xf='Sales';
yf='Expenditure';
document.getElementById('value').value=xf + ',' + yf;
oldval=document.getElementById('value').value;
sparec=blockit('?title=' + encodeURIComponent(document.getElementById('title').value) + '&onclick=y&label=' + encodeURIComponent(document.getElementById('label').value) + '&value=' + encodeURIComponent(document.getElementById('value').value));
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;
document.getElementById('label').value='Year';
xf='Sales';
yf='Expenditure';
document.getElementById('value').value=xf + ',' + yf;
oldval=document.getElementById('value').value;
sparec=blockit('?title=' + encodeURIComponent(document.getElementById('title').value) + '&onclick=y&label=' + encodeURIComponent(document.getElementById('label').value) + '&value=' + encodeURIComponent(document.getElementById('value').value));
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;
document.getElementById('label').value='Year';
xf='Sales';
yf='Expenditure';
document.getElementById('value').value=xf + ',' + yf;
oldval=document.getElementById('value').value;
sparec=blockit('?title=' + encodeURIComponent(document.getElementById('title').value) + '&onclick=y&label=' + encodeURIComponent(document.getElementById('label').value) + '&value=' + encodeURIComponent(document.getElementById('value').value));
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;
document.getElementById('task').value="Task";
document.getElementById('desc').value="Percentage";
sparec=blockit('?title=' + encodeURIComponent(document.getElementById('title').value) + '&onclick=y&task=' + encodeURIComponent(document.getElementById('task').value) + '&desc=' + encodeURIComponent(document.getElementById('desc').value));
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;
document.getElementById('task').value="Subject";
document.getElementById('desc').value="Measure";
sparec=blockit('?title=' + encodeURIComponent(document.getElementById('title').value) + '&onclick=y&task=' + encodeURIComponent(document.getElementById('task').value) + '&desc=' + encodeURIComponent(document.getElementById('desc').value));
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;
sparec=blockit('?title=' + encodeURIComponent(document.getElementById('title').value) + '&onclick=y&width=556&height=347&country=' + encodeURIComponent('Country') + '&popularity=' + encodeURIComponent('Popularity'));
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;
sparec=blockit('?title=' + encodeURIComponent(document.getElementById('title').value) + '&onclick=y&width=556&height=347&country=' + encodeURIComponent('Country') + '&area=' + encodeURIComponent('Area') + '&popularity=' + encodeURIComponent('Popularity'));
return '//www.rjmprogramming.com.au/PHP/IntensityChart/intensity_chart.php';
}
}
return outd;
}

function shownow(swhat) {
document.getElementById('myform').style.display='block';
return swhat;
}

function atstart() {
var wasv=verbis, spareq='';
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;
if (verbis.indexOf('map') == -1 && document.getElementById('value').title == 'value') {
document.getElementById('value').title+=' ... feel free to add fields or rename fields';
}
} else {
spareq=ourdecodeURIComponent(verbis);
}
document.getElementById('myform').action=shownow(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);
}
wast=document.getElementById('title').value;
}

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;
if (('' + evt.target.result).substring(0,1) == '[') { // JSON
csvdata=JSONToCSVConvertor(evt.target.result, "JSON", true, true);
}
document.getElementById('maybetitle').value=' ';
ob(document.getElementById('maybetitle').value);
process(csvdata);
} else {
document.getElementById('fil').value='';
done=false;
alert('Not a CSV nor JSON 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) {
if (('' + evt.target.result).substring(0,1) == '[') { // JSON
csvdata=JSONToCSVConvertor(evt.target.result, "JSON", true, true);
document.getElementById('maybetitle').value=' ';
ob(document.getElementById('maybetitle').value);
} else {
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) {
if (towhat.indexOf('annotatedtimeline') != -1 || towhat.indexOf('timeline') != -1 || towhat.indexOf('calendar') != -1) {
location.href=document.URL.replace('https:','HTTP:').split('#')[0].split('?')[0] + '?chart=' + encodeURIComponent(towhat.replace('https:','HTTP:'));
} else {
location.href=document.URL.split('#')[0].split('?')[0] + '?chart=' + encodeURIComponent(towhat);
}
}

function innone(incd) {
var inps=document.getElementsByTagName('input');
var oktodo=false;
for (ji=0; ji<inps.length; ji++) {
if (('' + inps[ji].id) == 'title') oktodo=true;
if (oktodo) inps[ji].style.display='none';
}
document.getElementById('myform').style.display='none';
return incd;
}

function JSONToCSVConvertor(JSONData, ReportTitle, ShowLabel, ReturnString) { // thanks to https://stackoverflow.com/questions/8847766/how-to-convert-json-to-csv-format-and-store-in-a-variable

//If JSONData is not an object then JSON.parse will parse the JSON string in an Object
var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;
var CSV = '';
//This condition will generate the Label/Header
if (ShowLabel) {
var hrow = "", delim="";

//This loop will extract the label from 1st index of on array
for (var index in arrData[0]) {
//Now convert each value to string and comma-separated
hrow += index + ',';
}
hrow = hrow.slice(0, -1);
//append Label row with line break
CSV += hrow + '\r\n';
}

//1st loop is to extract each row
for (var i = 0; i < arrData.length; i++) {
var row = "";
delim="";
//2nd loop will extract each column and convert it in string comma-separated
for (var index in arrData[i]) {
row += delim + '"' + arrData[i][index]; // + '",';
delim='",';
}
row.slice(0, row.length - 1);
//add a line break after each row
CSV += row + '"\r\n';
}

if (ReturnString) {
return CSV;
} else {
if (CSV == '') {
alert("Invalid data");
return;
}

//this trick will generate a temp "a" tag
var link = document.createElement("a");
link.id="lnkDwnldLnk";

//this part will append the anchor tag and remove it after automatic click
document.body.appendChild(link);

var csv = CSV;
blob = new Blob([csv], { type: 'text/csv' });
var csvUrl = window.URL.createObjectURL(blob);
var filename = 'UserExport.csv';
$("#lnkDwnldLnk")
.attr({
'download': filename,
'href': csvUrl
});
}
}

function checkon(vwhat) {
var fs=("label," + vwhat).split(',');
var wasv=encodeURIComponent(oldval);
if (fs.length == numcols) {
if (document.getElementById('myform').action.indexOf(wasv) == -1 && document.getElementById('myform').action.indexOf("value=") != -1) {
wasv=document.getElementById('myform').action.split('value=')[1].split('&')[0];
}
document.getElementById('myform').action=document.getElementById('myform').action.replace(wasv,encodeURIComponent(vwhat));
oldval=vwhat;
return vwhat;
} else if (eval('' + fs.length) < eval('' + numcols)) {
return oldval;
} else if (verbis.toLowerCase().indexOf('bubble') == -1) {
oldval=vwhat;
for (var iyt=eval(1 + numcols); iyt<=eval('' + fs.length); iyt++) {
document.getElementById('sel1').innerHTML+='<option value="NUMBERAT' + iyt + '">Numerical in column ' + iyt + ' (' + fs[eval(-1 + iyt)].replace(/\'/g,'').replace(/\"/g,'') + ')</option>';
}
numcols=eval('' + fs.length);
nc(eval(0 - numcols));
if (document.getElementById('myform').action.indexOf(wasv) == -1 && document.getElementById('myform').action.indexOf("value=") != -1) {
wasv=document.getElementById('myform').action.split('value=')[1].split('&')[0];
}
document.getElementById('myform').action=document.getElementById('myform').action.replace(wasv,encodeURIComponent(vwhat));
return vwhat;
} else {
return oldval;
}
return vwhat;
}

</script>
</head>
<body style='background:linear-gradient(rgb(13,254,105),rgb(113,154,205));' onload='atstart();'>
<h1 id=myh1>CSV or JSON 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>
<option value='//www.rjmprogramming.com.au/PHP/AnnotatedTimelineChart/annotatedtimeline_chart.php'>Annotated Timeline Chart</option>
<option value='//www.rjmprogramming.com.au/PHP/CalendarChart/calendar_chart.php'>Calendar Chart</option>
<option value='//www.rjmprogramming.com.au/PHP/TimelineChart/timeline_chart.php'>Timeline Chart</option>
</select><h1>
<h3>RJM Programming - July, 2018</h3><br>

CSV or JSON 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 onsubmit="this.style.display=innone('none'); return true;" enctype='application/x-www-urlencoded' style='display:none;' id='myform' target='myiframe' action='//www.rjmprogramming.com.au/PHP/BubbleChart/bubble_chart.php' method='POST'>
<br><input title='title ... value of ? previews this' onblur="if (this.value == '?') { window.open(verbis.split('?')[0],'_blank','top=50,left=50,width=800,height=620'); this.value=wast; } else { wast=this.value; }" type='text' style=display:none; id='title' name='title' placeholder='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='text' style=display:none; title='' id='task' name='task' value='Task' placeholder='task'></input>
<input type='text' style=display:none; title='' id='desc' name='desc' value='Percentage' placeholder='desc'></input>
<input type='text' style=display:none; title='' id='label' name='label' value="'ID'" placeholder='label'></input>
<input type='text' style=display:none; title='value' id='value' name='value' onblur="this.value=checkon(this.value);" value="Life Expectancy,Fertility Rate,'Region',Population" placeholder='value'></input>
<input type='text' style=display:none; title='' id='country' name='country' value='Country' placeholder='country'></input>
<input type='text' style=display:none; title='' id='popularity' name='popularity' value='Popularity' placeholder='popularity'></input>
<input type='text' style=display:none; title='' id='area' name='area' value='Area' placeholder='area'></input>
<input type='text' style=display:none; title='' id='width' name='width' value='556' placeholder='width'></input>
<input type='text' style=display:none; title='' id='height' name='height' value='347' placeholder='height'></input>
<input type='text' style=display:none; title='' id='desc1' name='desc1' value='Sold Pencils' placeholder='desc1'></input>
<input type='text' style=display:none; title='' id='title1' name='title1' value='Sold Pencils title1' placeholder='title1'></input>
<input type='text' style=display:none; title='' id='text1' name='text1' value='Sold Pencils text1' placeholder='text1'></input>
<input type='text' style=display:none; title='' id='desc2' name='desc2' value='Sold Pens' placeholder='desc2'></input>
<input type='text' style=display:none; title='' id='title2' name='title2' value='Sold Pens title2' placeholder='title2'></input>
<input type='text' style=display:none; title='' id='text2' name='text2' value='Sold Pens text2' placeholder='text2'></input>
<div id=fextras></div>
<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>
<a id=premyiframe href='#myh1' title='Back to top'>^</a><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>