5c5
< <script type='text/javascript' src='csv_to_bubblechart.js?x=ffdg'></script>
---
> <script type='text/javascript' src='csv_to_bubblechart.js?x=ff'></script>
15d14
<  var nfdone=',';
20,22d18
< 
< var verbis='//www.rjmprogramming.com.au/PHP/BubbleChart/bubble_chart.php';
< var numcols=5;
59d54
<          document.body.style.cursor='progress';
61d55
<          document.body.style.cursor='pointer';
94d87
<          document.body.style.cursor='progress';
96d88
<          document.body.style.cursor='pointer';
105d96
<    document.getElementById('bctable').style.cursor='pointer';
109d99
<    var dfs;
111,113c101
<    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) {
---
>    if (sthis.value != '') {
115,165c103,104
<      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 + ',';
---
>      if (fcnt <= 5) {
>        if (sthis.value == 'ID') {
169c108
<          dfs=document.getElementById('maybetitle').value.split('#');
---
>          var dfs=document.getElementById('maybetitle').value.split('#');
174,187d112
<          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';
189,224d113
<          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',''))) + '');
226d114
<          nfdone+=sthis.id.replace('sel','') + ',' + ',' + sthis.value + ',';
229,240d116
<        } 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',''))) + '');
242d117
<          nfdone+=sthis.id.replace('sel','') + ',' + ',' + sthis.value + ',';
246d120
<          nfdone+=sthis.id.replace('sel','') + ',' + ',' + sthis.value + ',';
250d123
<          nfdone+=sthis.id.replace('sel','') + ',' + ',' + sthis.value + ',';
254,284c127,129
<        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';
---
>        if (fcnt == 5) {
>          document.getElementById('value').value=xf + ',' + yf + ',' + "'" + lf + "'," + uf;
>          document.getElementById('myform').action+='&value=' + encodeURIComponent(document.getElementById('value').value);
286,287d130
<          //document.getElementById('bctable').style.cursor='pointer';
<          document.body.style.cursor='pointer';
290,291d132
<          fcnt=0;
<          nfdone=',';
298,377c139
<   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;
---
>   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); } 
381d142
<    var wasv=verbis;
383,387d143
<    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;
419a176
>       //alert(w);
436a194,203
>         //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, '&lt;').replace(/>/g, '&gt;'));
>         //document.body.innerHTML = document.body.innerHTML + '<div id=be style=display:block;>' + evt.target.result.replace(/</g, '&lt;').replace(/>/g, '&gt;') + '</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('');
455a223,225
>         //document.getElementById('pdf').style.display='none';
>         //document.getElementById('showpdf').style.display='block';
>         //document.getElementById('showpdf').innerHTML = evt.target.result;
468,471d237
< function changeverb(towhat) {
<     location.href=document.URL.split('#')[0].split('?')[0] + '?chart=' + encodeURIComponent(towhat);
< }
< 
475,486c241
< <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>
---
> <h1>CSV Data to Bubble Chart<h1>
489c244
< 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'>&nbsp;&nbsp;</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>
---
> 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'>&nbsp;&nbsp;</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>
497,499d251
< <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>
502,506d253
< <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>
508c255
< <input align='center' id='subb' style='display:none;' value='Show Chart Below' type='submit'></input>
---
> <input align='center' id='subb' style='display:none;' value='ShowBubble Chart Below' type='submit'></input>