{"id":64466,"date":"2024-08-19T03:01:00","date_gmt":"2024-08-18T17:01:00","guid":{"rendered":"https:\/\/65.254.95.247\/ITblog\/?p=64466"},"modified":"2024-08-19T09:35:30","modified_gmt":"2024-08-18T23:35:30","slug":"javascript-map-array-aggregates-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-map-array-aggregates-tutorial\/","title":{"rendered":"Javascript Map Array Aggregates Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Javascript Map Array Aggregates Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test_aggregates.jpg\" title=\"Javascript Map Array Aggregates Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Javascript Map Array Aggregates Tutorial<\/p><\/div>\n<p>The SQL emphasis, recently, regarding our current Arrays and Map web application talked about in yesterday&#8217;s <a title='Javascript Map Array Delimiter Tutorial' href='#jmadt'>Javascript Map Array Delimiter Tutorial<\/a> had us thinking about if we could incorporate those &#8230;<\/p>\n<ul>\n<li>count(*)<\/li>\n<li>sum(*)<\/li>\n<li>min(*)<\/li>\n<li>max(*)<\/li>\n<li>avg(*)<\/li>\n<\/ul>\n<p> &#8230; <a target=\"_blank\" href='https:\/\/www.w3schools.com\/sql\/sql_aggregate_functions.asp' rel=\"noopener\">SQL aggregate function<\/a> concepts in some way shape or form.   Given we&#8217;ve gone down the &#8220;delimiters logic&#8221; road so far, we decided on a pre-emptive approach, where we calculate all the &#8220;aggregate&#8221; concept values we could think of, ahead of the user even wondering about them, and display them as they are seeing the other data be displayed.  Sounds good?  We hope so.<\/p>\n<p>Well, see this in action, along with Median and Mode and Standard deviation calculations, as well, in <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html---------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html---------GETME\" rel=\"noopener\">map_test.html<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html\" rel=\"noopener\">Array and Map Tester<\/a> web application you can <a href='#ifmap'>also try below<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-map-array-aggregrates-tutorial\/' rel=\"noopener\">Javascript Map Array Aggregates Tutorial<\/a>.<\/p-->\n<hr>\n<p id='jmadt'>Previous relevant <a target=\"_blank\" title='Javascript Map Array Delimiter Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-map-array-delimiter-tutorial\/' rel=\"noopener\">Javascript Map Array Delimiter Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Javascript Map Array Delimiter Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test_orand.jpg\" title=\"Javascript Map Array Delimiter Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Javascript Map Array Delimiter Tutorial<\/p><\/div>\n<p>Regular readers will have tweaked to the &#8220;largely delimiter based&#8221; logic surrounding the workings of the Array and Map web application of yesterday&#8217;s <a title='Javascript Map Array SQL Tutorial' href='#jmasqlt'>Javascript Map Array SQL Tutorial<\/a>.  To explain our changes, it&#8217;s back to <font color=blue>a modified<\/font> <font color=purple>blurb<\/font> &#8230;<\/p>\n<blockquote><p>\n   xenterall=prompt(&#8216;<font color=purple>Optionally enter a # (hashtag) delimited composite field scenario to apply for next input data (perhaps CSV) file application, such as in examples below where +-*^%\/ (maths) and !&lt;&gt;= (conditions) and ~<\/font><font color=blue>`<\/font><font color=purple> (for ascending descending order)<\/font><font color=blue> and | (for OR rather than AND conditions)<\/font><font color=purple>.  &#8216; + String.fromCharCode(10) + &#8216;Examples &#8230;&#8217; + String.fromCharCode(10) + &#8216;#1,3&#038;2&#038;4&#8217; + String.fromCharCode(10) + <strike>&#8216;#4,2*3&#8217; + String.fromCharCode(10) + <\/strike>&#8216;#1&#038;4,3+2&#8217; + String.fromCharCode(10) + &#8216;#1&#038;4,3&#038;2,2&gt;100<\/font><font color=blue>|2&lt;-100,`<\/font><font color=purple>2<\/font>&#8216;, &#8221;);\n<\/p><\/blockquote>\n<p> &#8230; giving a &#8220;one role per interesting delimiter&#8221; paradigm we&#8217;d like to keep, if possible <font size=1>(though behind the scenes we have incorporated backward compatibility)<\/font>.<\/p>\n<p>Can such a delimiter approach handle everything SQL can do?  Not a chance, but by the same token, we are not reinventing any wheels with all this, but rather opening up ideas you might want to pick up and run with yourself &#8230; or not.<\/p>\n<p>In <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html--------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html--------GETME\" rel=\"noopener\">map_test.html<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html\" rel=\"noopener\">Array and Map Tester<\/a> web application you can <a href='#ifmap'>also try below<\/a>, you may notice other nuances, with logic now supporting &#8230;<\/p>\n<ol>\n<li>logic change &#8230;\n<ul>\n<li>OR &#8230; WHERE clause parts logic (using that | delimiter mentioned above) &#8230; in addition to pre-existing &#8230;<\/li>\n<li>AND &#8230; WHERE clause default logic<\/li>\n<\/ul>\n<\/li>\n<li>changes allowing for yellow cell report toggling between default two column data format and, perhaps, a more extensive report, via a newly introduced ondblclick (on double click) Javascript event function &#8230; the changing of which flows through to &#8230;<\/li>\n<li>appropriately catering logic to pass this through to email and SMS functionality (and the clicking of links within these)<\/li>\n<\/ol>\n<p> &#8230; nuances pretty critical for many real data set scenarios, we figure.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-map-array-delimiter-tutorial\/' rel=\"noopener\">Javascript Map Array Delimiter Tutorial<\/a>.<\/p-->\n<hr>\n<p id='jmasqlt'>Previous relevant <a target=\"_blank\" title='Javascript Map Array SQL Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-map-array-sql-tutorial\/' rel=\"noopener\">Javascript Map Array SQL Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Javascript Map Array SQL Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test_sql.jpg\" title=\"Javascript Map Array SQL Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Javascript Map Array SQL Tutorial<\/p><\/div>\n<p>Finishing off the SQL work start that yesterday&#8217;s <a title='Javascript Map Array Conditions Tutorial' href='#jmact'>Javascript Map Array Conditions Tutorial<\/a> represents, today a user can <font color=blue>follow the advice<\/font> &#8230;<\/p>\n<blockquote><p>\n   xenterall=prompt(&#8216;<font color=blue>Optionally enter a # (hashtag) delimited composite field scenario to apply for next input data (perhaps CSV) file application, such as in examples below where +-*^%\/ (maths) and !&lt;&gt;= (conditions) and ~| (for ascending descending order).  &#8216; + String.fromCharCode(10) + &#8216;Examples &#8230;&#8217; + String.fromCharCode(10) + &#8216;#1,3&#038;2&#038;4&#8217; + String.fromCharCode(10) + &#8216;#4,2*3&#8217; + String.fromCharCode(10) + &#8216;#1&#038;4,3+2&#8217; + String.fromCharCode(10) + &#8216;#1&#038;4,3&#038;2,2&gt;100,|2<\/font>&#8216;, &#8221;);\n<\/p><\/blockquote>\n<p> &#8230; to facilitate WHERE and ORDER BY processing foreshadowed yesterday.<\/p>\n<p>The ORDER BY solution featured tailored Javascript sort functionality nuances &#8230;<\/p>\n<p><code><br \/>\nfunction maybesort(rh) {<br \/>\n   var recsare=[], newc='', ijk=0, exa='', zero=0, ipo=0;<br \/>\n   headrec='';<br \/>\n   if (eval('' + orderbys.length) &gt; 0) {<br \/>\n     recsare=rh.split(String.fromCharCode(10));<br \/>\n     if (recsare[0].indexOf('0') == -1 && recsare[0].indexOf('1') == -1 && recsare[0].indexOf('2') == -1 && recsare[0].indexOf('3') == -1 && recsare[0].indexOf('4') == -1 && recsare[0].indexOf('5') == -1 && recsare[0].indexOf('6') == -1 && recsare[0].indexOf('7') == -1 && recsare[0].indexOf('8') == -1 && recsare[0].indexOf('9') == -1) {<br \/>\n       headrec=recsare[0];<br \/>\n       zero=1;<br \/>\n              efields=headrec.replace(\/\\\"\/g,'').split(',');<br \/>\n              for (var ke=0; ke&lt;efields.length; ke++) {<br \/>\n                 eval('mappings.unshift({ from: \"' + eval(ke + 1) + '\", to: \"' + efields[ke] + '\"})');<br \/>\n              }<br \/>\n              document.getElementById('topic').innerHTML=headrec.replace(\/^\\\"\/g,'').substring(0).split('\"')[0].split(',')[1].substring(0,1).toUpperCase() + headrec.replace(\/^\\\"\/g,'').substring(0).split('\"')[0].split(',')[1].substring(1);<br \/>\n              document.getElementById('thname').innerHTML=maybenotdefn(headrec.replace(\/^\\\"\/g,'').substring(0).split('\"')[0].split(',')[1].substring(0,1).toUpperCase() + headrec.replace(\/^\\\"\/g,'').substring(0).split('\"')[0].split(',')[1].substring(1));<br \/>\n              document.getElementById('thquantity').innerHTML=maybenotdefq(headrec.replace(\/^\\\"\/g,'').substring(0).split('\"')[0].split(',')[0].substring(0,1).toUpperCase() + headrec.replace(\/^\\\"\/g,'').substring(0).split('\"')[0].split(',')[0].substring(1));<br \/>\n              analwheres();<br \/>\n     }<br \/>\n<br \/> <br \/>\n     for (ipo=0; ipo&lt;orderbys.length; ipo++) {<br \/>\n    <br \/> <br \/>\n     if (orderbys[ipo].indexOf('~1 ') != -1) {<br \/>\n     recsare.sort();<br \/>\n     <br \/>\n     } else if (orderbys[ipo].indexOf('|1 ') != -1) {<br \/>\n     recsare.sort(function(x, y) {<br \/>\n         if (y &lt; x) {<br \/>\n            return -1;<br \/>\n         }<br \/>\n         if (y &gt; x) {<br \/>\n            return 1;<br \/>\n         }<br \/>\n         return 0;<br \/>\n      });<br \/>\n     <br \/>\n     } else if (orderbys[ipo].indexOf('|') != -1) {<br \/>\n     icol=eval(-1 + eval('' + orderbys[ipo].split('|')[1].split(' ')[0]));<br \/>\n     \/\/alert('icol=' + icol);<br \/>\n     exa='' + rh.split(String.fromCharCode(10))[zero].split(',')[icol];<br \/>\n     \/\/alert('exa=' + exa);<br \/>\n     if (exa != '' && exa.replace(\/0\/g,'').replace(\/2\/g,'').replace(\/3\/g,'').replace(\/3\/g,'').replace(\/4\/g,'').replace(\/5\/g,'').replace(\/6\/g,'').replace(\/7\/g,'').replace(\/8\/g,'').replace(\/9\/g,'').replace(\/\\-\/g,'').replace(\/\\.\/g,'').trim() == '') {<br \/>\n     \/\/alert('is a number');<br \/>\n     recsare.sort(function(x, y) {<br \/>\n         if (x != headrec && y == headrec) { return 1;  }<br \/>\n         if (x == headrec && y != headrec) { return -1;  }<br \/>\n         if (x == headrec && y == headrec) { return 0;  }<br \/>\n         if (eval('' + y.split(',')[icol]) &lt; eval('' + x.split(',')[icol])) {<br \/>\n            return -1;<br \/>\n         }<br \/>\n         if (eval('' + y.split(',')[icol]) &gt; eval('' + x.split(',')[icol])) {<br \/>\n            return 1;<br \/>\n         }<br \/>\n         return 0;<br \/>\n      });<br \/>\n     } else {<br \/>\n     recsare.sort(function(x, y) {<br \/>\n         if (y.split(',')[icol] &lt; x.split(',')[icol]) {<br \/>\n            return -1;<br \/>\n         }<br \/>\n         if (y.split(',')[icol] &gt; x.split(',')[icol]) {<br \/>\n            return 1;<br \/>\n         }<br \/>\n         return 0;<br \/>\n      });<br \/>\n      }<br \/>\n<br \/>\n     } else if (orderbys[ipo].indexOf('~') != -1) {<br \/>\n<br \/>\n     icol=eval(-1 + eval('' + orderbys[ipo].split('~')[1].split(' ')[0]));<br \/>\n     exa='' + rh.split(String.fromCharCode(10))[zero].split(',')[icol];<br \/>\n     if (exa != '' && exa.replace(\/0\/g,'').replace(\/2\/g,'').replace(\/3\/g,'').replace(\/3\/g,'').replace(\/4\/g,'').replace(\/5\/g,'').replace(\/6\/g,'').replace(\/7\/g,'').replace(\/8\/g,'').replace(\/9\/g,'').replace(\/\\-\/g,'').replace(\/\\.\/g,'').trim() == '') {<br \/>\n     recsare.sort(function(x, y) {<br \/>\n         if (x != headrec && y == headrec) { return -1;  }<br \/>\n         if (x == headrec && y != headrec) { return 1;  }<br \/>\n         if (x == headrec && y == headrec) { return 0;  }<br \/>\n         if (eval('' + x.split(',')[icol]) &lt; eval('' + y.split(',')[icol])) {<br \/>\n            return -1;<br \/>\n         }<br \/>\n         if (eval('' + x.split(',')[icol]) &gt; eval('' + y.split(',')[icol])) {<br \/>\n            return 1;<br \/>\n         }<br \/>\n         return 0;<br \/>\n      });<br \/>\n     } else {<br \/>\n     recsare.sort(function(x, y) {<br \/>\n         if (x.split(',')[icol] &lt; y.split(',')[icol]) {<br \/>\n            return -1;<br \/>\n         }<br \/>\n         if (x.split(',')[icol] &gt; y.split(',')[icol]) {<br \/>\n            return 1;<br \/>\n         }<br \/>\n         return 0;<br \/>\n      });<br \/>\n     }<br \/>\n<br \/>\n     }<br \/>\n    <br \/> <br \/>\n     newc='';<br \/>\n     if (headrec != '') {<br \/>\n        newc+=headrec + String.fromCharCode(10);<br \/>\n     }<br \/>\n     for (ijk=0; ijk&lt;recsare.length; ijk++) {<br \/>\n        if (recsare[ijk] != headrec) {<br \/>\n        newc+=recsare[ijk] + String.fromCharCode(10);<br \/>\n        }<br \/>\n     }<br \/>\n     \/\/alert(newc);<br \/>\n     rh=newc;<br \/>\n   }<br \/>\n   }<br \/>\n   \/\/alert(rh);<br \/>\n   return rh;<br \/>\n}<br \/>\n<\/code> <\/p>\n<p> &#8230; in <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html-------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html-------GETME\" rel=\"noopener\">map_test.html<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html\" rel=\"noopener\">Array and Map Tester<\/a> web application you can <a href='#ifmap'>also try below<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-map-array-sql-tutorial\/' rel=\"noopener\">Javascript Map Array SQL Tutorial<\/a>.<\/p-->\n<hr>\n<p id='jmact'>Previous relevant <a target=\"_blank\" title='Javascript Map Array Conditions Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-map-array-conditions-tutorial\/' rel=\"noopener\">Javascript Map Array Conditions Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Javascript Map Array Conditions Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test_conditions.gif\" title=\"Javascript Map Array Conditions Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Javascript Map Array Conditions Tutorial<\/p><\/div>\n<p>Onto yesterday&#8217;s <a title='Javascript Map Array Field Tutorial' href='#jmaft'>Javascript Map Array Field Tutorial<\/a> we wanted to extend functionality by starting on a &#8220;more than one day&#8221; project of thinking &#8230;<\/p>\n<ul>\n<li>SQL &#8230; with it&#8217;s &#8230; SELECT &#8230; statements involving &#8230;<\/li>\n<li>FROM &#8230; clause &#8230; representing the input (perhaps) CSV data source &#8230; filtered via &#8230;<\/li>\n<li>WHERE &#8230; clauses, for sure &#8230; and pretty sure we can manage &#8230;<\/li>\n<li>ORDER BY &#8230; record sorting<\/li>\n<\/ul>\n<p> &#8230; people familiar with working with relative databases will understand.<\/p>\n<p>So far we&#8217;re just doing the work to construct the scenario&#8217;s SQL &#8220;pseudo SELECT statement&#8221;.  In doing this, we used a new <i>mapping<\/i> array that could end up looking like &#8230;<\/p>\n<blockquote><p>\n{from: &#8216;2&#8217;, to: &#8216;(Longitude+Latitude) as field2&#8217;}<br \/>\n{from: &#8216;4&#8217;, to: &#8216;name&#8217;}<br \/>\n{from: &#8216;3&#8217;, to: &#8216;longitude&#8217;}<br \/>\n{from: &#8216;2&#8217;, to: &#8216;latitude&#8217;}<br \/>\n{from: &#8216;1&#8217;, to: &#8216;country&#8217;}<br \/>\n{from: &#8216;1&#8217;, to: &#8216;Name&#8217;}<br \/>\n{from: &#8216;2&#8217;, to: &#8216;Quantity&#8217;}\n<\/p><\/blockquote>\n<p> &#8230; where we found building it up via the usual <i>mapping<\/i>.<a target=\"_blank\" title='array.push information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/push' rel=\"noopener\">push<\/a>() we would use to append data was <i>some<\/i> of the story, but it&#8217;s opposite number <i>mapping<\/i>.<a target=\"_blank\" title='array.push information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/unshift' rel=\"noopener\">unshift<\/a>() was really useful to prioritize a changing better <i>to<\/i> member data item into the mix, as the program flow progesses in <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html------GETME\" rel=\"noopener\">map_test.html<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html\" rel=\"noopener\">Array and Map Tester<\/a> web application you can <a href='#ifmap'>also try below<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-map-array-conditions-tutorial\/' rel=\"noopener\">Javascript Map Array Conditions Tutorial<\/a>.<\/p-->\n<hr>\n<p id='jmaft'>Previous relevant <a target=\"_blank\" title='Javascript Map Array Field Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-map-array-field-tutorial\/' rel=\"noopener\">Javascript Map Array Field Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Javascript Map Array Field Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test_field.gif\" title=\"Javascript Map Array Field Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Javascript Map Array Field Tutorial<\/p><\/div>\n<p>The way the inhouse Javascript Map Array web application worked as of the day before yesterday&#8217;s <a title='Javascript Map Array Hashtag Tutorial' href='#jmaht'>Javascript Map Array Hashtag Tutorial<\/a> involved &#8230;<\/p>\n<ul>\n<li>a whole of file (or your entered string) processing of CSV data where the first two fields (comma separated) of records became the name,quantity data basis &#8230; but as all Spreadsheet afficianados will tell you, it can be very useful &#8220;to drill down&#8221; into fields (or &#8220;columns&#8221;, in Spreadsheet parlance) &#8230; so &#8230;<\/li>\n<li>as of today&#8217;s work &#8230; well, we&#8217;ll let our <font color=blue>&#8220;blurb&#8221;<\/font>, coming off an H1 tag double click event, to try to explain it &#8230;<br \/>\n<code><br \/>\nvar compositename='';<br \/>\nvar compositequantity='';<br \/>\nvar enterall='';<br \/>\n<br \/>\nfunction anal() {<br \/>\n   enterall=prompt('<font color=blue>Optionally enter a # (hashtag) delimited composite field scenario to apply for next input data (perhaps CSV) file application, such as in examples below.  ' + String.fromCharCode(10) + String.fromCharCode(10) + 'Examples ...' + String.fromCharCode(10) + '#1,3&2&4' + String.fromCharCode(10) + '#4,2*3' + String.fromCharCode(10) + '#1&4,3+2<\/font>', '');<br \/>\n   if (enterall.split('#')[0].indexOf(',') == -1 && enterall.trim() != '' && enterall.indexOf('~`~') == -1) {<br \/>\n      compositename='';<br \/>\n      compositequantity='';<br \/>\n      if (enterall.indexOf('#') != -1) {<br \/>\n        var compstuff=enterall.split('#')[1];<br \/>\n        enterall=enterall.split('#')[0];<br \/>\n        var csfs=compstuff.split(',');<br \/>\n        compositename=csfs[0];<br \/>\n        if (compositename != '') {<br \/>\n          if (eval(('' + compositename).split('&')[0].split('+')[0].split('\/')[0].split('*')[0].split('-')[0].split('%')[0].split('^')[0]) &gt; 1 && eval('' + csfs.length) &lt;= 1) {<br \/>\n            compositequantity='1';<br \/>\n          } else if (eval('' + csfs.length) &gt; 1) {<br \/>\n            compositequantity=csfs[1];<br \/>\n          }<br \/>\n        }<br \/>\n      }<br \/>\n      enterall='';<br \/>\n   }<br \/>\n   enterall='';<br \/>\n}<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p> &#8230; to allow for some simple mathematical operations (ie. + \/ &#8211; * % ^) of the right hand quantity data item, or concatenation (ie. &#038;) on either left or right (delimited by , comma), as possibilities via user defined field (or &#8220;column&#8221;) numbering system (starting from 1) means.<\/p>\n<p>Applied to our testing with <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/country.csv\" rel=\"noopener\">country.csv<\/a> here, we started getting scenarios where the <a title=\"Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.\" href=\"https:\/\/developers.google.com\/chart\/interactive\/docs\/index\" target=\"_blank\" rel=\"noopener\">Google Chart<\/a> <a target=\"_blank\" title='Google Chart Geo Chart information from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart' rel=\"noopener\">Geo Chart<\/a> should turn into &#8220;markers mode&#8221;, and the statistical Google Chart Area\/Bar\/Column\/Line Charts would have multiple Y axis items for the &#8220;name&#8221; data item X axis relationship.<\/p>\n<p>More flexibility, we figure, in <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html-----GETME\" rel=\"noopener\">the extensively changed<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html-----GETME\" rel=\"noopener\">map_test.html<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html\" rel=\"noopener\">Array and Map Tester<\/a> web application you can <a href='#ifmap'>also try below<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/new-javascript-map-array-hashtag-tutorial\/' rel=\"noopener\">Javascript Map Array Hashtag Tutorial<\/a>.<\/p-->\n<hr>\n<p id='jmaht'>Previous relevant <a target=\"_blank\" title='Javascript Map Array Hashtag Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-map-array-hashtag-tutorial\/' rel=\"noopener\">Javascript Map Array Hashtag Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Javascript Map Array Hashtag Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test_hashtag.gif\" title=\"Javascript Map Array Hashtag Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Javascript Map Array Hashtag Tutorial<\/p><\/div>\n<p>Regular readers will know of our ever increasing fondness, out of webpage navigational ideas &#8230;<\/p>\n<ul>\n<li>form method=GET ? and &#038; delimited argument style URL navigation (suitable for both client and server recipient webpages but apt to cause error 414 due to data size restrictions) &#8230; or &#8230;<\/li>\n<li>form method=POST URL navigation (suitable for server recipient webpages only, but able to handle much more data) &#8230; or &#8230;<\/li>\n<li>hybrid arrangement that is essentially form method=GET ? and &#038; delimited argument style URL navigation (suitable for both client and server recipient webpages) with error 414 avoided by <strong>most<\/strong> data forming the <i>location.hash<\/i> (client understood) hashtagged data<\/li>\n<\/ul>\n<p> &#8230; for the last hashtagging arrangement when the data size precludes the first arrangement, and we see benefits regarding &#8220;a&#8221; &#8220;mailto:&#8221; and\/or &#8220;sms:&#8221; sharing links becoming involved (rather than relying on any PHP server <i>mail<\/i> function calling).<\/p>\n<p>Our <a title=\"Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.\" href=\"https:\/\/developers.google.com\/chart\/interactive\/docs\/index\" target=\"_blank\" rel=\"noopener\">Google Chart<\/a> interfacing is no exception here, and yes, once we&#8217;ve completed our sweep of Google Chart inhouse functionality interfacers, on top of today&#8217;s &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" title='Google Chart Area Chart information' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/areachart' rel=\"noopener\">Area Chart<\/a> interfacing <a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/AreaChart\/area_chart.php----------------GETME\" title=\"area_chart.php\" target=\"_blank\" rel=\"noopener\">area_chart.php<\/a> is the changed PHP programming source code as per <a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/AreaChart\/area_chart.php----------------GETME\" title=\"area_chart.php\" target=\"_blank\" rel=\"noopener\">changes<\/a><\/li>\n<li><a target=\"_blank\" title='Google Chart Bar Chart information' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/barchart' rel=\"noopener\">Bar Chart<\/a> interfacing <a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/BarChart\/bar_chart.php------------------GETME\" title=\"bar_chart.php\" target=\"_blank\" rel=\"noopener\">bar_chart.php<\/a> is the changed PHP programming source code as per <a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/BarChart\/bar_chart.php------------------GETME\" title=\"bar_chart.php\" target=\"_blank\" rel=\"noopener\">changes<\/a><\/li>\n<li><a target=\"_blank\" title='Google Chart Column Chart information' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/columnchart' rel=\"noopener\">Column Chart<\/a> interfacing <a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/ColumnChart\/column_chart.php-----------------GETME\" title=\"column_chart.php\" target=\"_blank\" rel=\"noopener\">column_chart.php<\/a> is the changed PHP programming source code as per <a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/ColumnChart\/column_chart.php-----------------GETME\" title=\"column_chart.php\" target=\"_blank\" rel=\"noopener\">changes<\/a><\/li>\n<li><a target=\"_blank\" title='Google Chart Geo Chart information from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart' rel=\"noopener\">Geo Chart<\/a> interfacing <a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php-----------------------------------------------------------------------------------------GETME\" title=\"geo_chart.php\" target=\"_blank\" rel=\"noopener\">geo_chart.php<\/a> is the changed PHP programming source code as per <a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php-----------------------------------------------------------------------------------------GETME\" title=\"geo_chart.php\" target=\"_blank\" rel=\"noopener\">changes<\/a><\/li>\n<li><a target=\"_blank\" href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/histogram' title='Google Histogram Charts' rel=\"noopener\">Histogram Chart<\/a> interfacing <a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/HistogramChart\/histogram_chart.php------------------GETME\" title=\"histogram_chart.php\" target=\"_blank\" rel=\"noopener\">histogram_chart.php<\/a> is the changed PHP programming source code as per <a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/HistogramChart\/histogram_chart.php------------------GETME\" title=\"histogram_chart.php\" target=\"_blank\" rel=\"noopener\">changes<\/a><\/li>\n<li><a target=\"_blank\" title='Google Chart Line Chart information' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/linechart' rel=\"noopener\">Line Chart<\/a> interfacing <a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/LineChart\/line_chart.php---------------GETME\" title=\"line_chart.php\" target=\"_blank\" rel=\"noopener\">line_chart.php<\/a> is the changed PHP programming source code as per <a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/LineChart\/line_chart.php---------------GETME\" title=\"line_chart.php\" target=\"_blank\" rel=\"noopener\">changes<\/a><\/li>\n<li><a target=\"_blank\" href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/piechart' title='Google Pie Charts' rel=\"noopener\">Pie Chart<\/a> interfacing <a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/PieChart\/pie_chart.php----------------------------GETME\" title=\"pie_chart.php\" target=\"_blank\" rel=\"noopener\">pie_chart.php<\/a> is the changed PHP programming source code as per <a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/PieChart\/pie_chart.php----------------------------GETME\" title=\"pie_chart.php\" target=\"_blank\" rel=\"noopener\">changes<\/a><\/li>\n<\/ul>\n<p> &#8230; list we got keen to attend to today, with a <strong>most<\/strong> <font size=1>(when needed)<\/font> strategy &#8230;<\/p>\n<blockquote><p>\nFirst &#8220;data&#8221; label value is method=GET<br \/>\nRest of &#8220;data&#8221; value items are hashtagged\n<\/p><\/blockquote>\n<p> &#8230; (having the benefit that the intervention point is consistent and reliable) on top of yesterday&#8217;s <a title='Javascript Map Array Chart Tutorial' href='#jmact'>Javascript Map Array Chart Tutorial<\/a>, in this regard, as helper outerers for <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html----GETME\" rel=\"noopener\">our changed<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html----GETME\" rel=\"noopener\">map_test.html<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html\" rel=\"noopener\">Array and Map Tester<\/a> web application you can <a href='#ifmap'>also try below<\/a>, we&#8217;ll be able to further genericize Sharing and Collaboration Google Chart interfacing functionality when the amounts of data involved exceed server based (error 414) limits.<\/p>\n<p>Along the way, testing on iOS mobile platforms, we were gobsmacked by the possibility of <i>location.hash<\/i> (ie. # hashtagging) not being recognized, always, at the recipient, and so a failsafe we introduced was to also store hashtagged data in a parent textbox the recipient can reference &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\n    if (window.top) {<br \/>\n    if (parent.document.getElementById('lhashis')) {<br \/>\n     if (decodeURIComponent(('' + parent.document.getElementById('lhashis').value)).indexOf(',') != -1) {<br \/>\n      location.hash=parent.document.getElementById('lhashis').value;<br \/>\n     }<br \/>\n    }<br \/>\n    }<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p> &#8230; even before &#8220;recipient document.body onload&#8221; timing, happily, to get around the restrictiveness of this <i>location.hash<\/i> lack of acceptance, at times.<\/p>\n<p>Which brings us to &#8230;<\/p>\n<blockquote><p>\nWhy is <i>Geo Chart<\/i> in that list above?\n<\/p><\/blockquote>\n<p>Well, it&#8217;s a bit unlikely, but it just so happens our best CSV file to hand, around here, contained ISO-3166 2 character country codes with a representative latitude and longitude (as you can see with, the now publicly shared, <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/country.csv\" rel=\"noopener\">country.csv<\/a> &#8230; thanks to <a target=\"_blank\" title=\"Google\" href='https:\/\/google.com' rel=\"noopener\">Google<\/a>) and this data is right up the alley of use by the <a title=\"Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.\" href=\"https:\/\/developers.google.com\/chart\/interactive\/docs\/index\" target=\"_blank\" rel=\"noopener\">Google Chart<\/a> <a target=\"_blank\" title='Google Chart Geo Chart information from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart' rel=\"noopener\">Geo Chart<\/a> (which you might recall we had a different hashtag arrangement going on already &#8230;<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/do_not_trash.jpg\"><\/img><\/p>\n<p> &#8230; believe it or not, never causing any iOS mobile platform issues up to now &#8230; go figure!)<\/p>\n<p>To get this &#8220;sharing of that CSV&#8221; to be any way useful, and illustrative, if you double click the &#8220;topic&#8221; word and get to the Javascript prompt window that follows, we tweak you to this, but if you enter &#8230;<\/p>\n<blockquote><p>\nhttps:\/\/www.rjmprogramming.com.au\/HTMLCSS\/country.csv\n<\/p><\/blockquote>\n<p> &#8230; at that prompt window, now, we&#8217;ll attempt an Ajax call of whatever URL you enter to try to glean data content to suit our &#8230;<\/p>\n<blockquote><p>\n<i>label name<\/i> to <i>numerical quantity<\/i> relationship\n<\/p><\/blockquote>\n<p> &#8230; this web application is hankering for.<\/p>\n<p>And there, the amount of data (in size) is far too big for non-hybrid method=GET scenarios, and we need to turn to our new hybrid ideas to proceed with our quest to take over &#8220;Lower Middle Mordor South Lowlands as seen from <a target=\"_blank\" title=\"?\" href='https:\/\/www.google.com\/search?client=safari&#038;rls=en&#038;q=under+mirkwood&#038;ie=UTF-8&#038;oe=UTF-8' rel=\"noopener\">Mirkwood<\/a>&#8220;.<\/p>\n<p>This may all bore, but believe me if you offer users a piece of functionality, they&#8217;ll want to push it to limits, and in that &#8220;push&#8221; could come most of your work, and concern, with regard to a project you are working on, so we figure it is best to cater for this before it is asked for.<\/p>\n<p><strike>Two<\/strike>Three sentences ending in for?  Okay, <a target=\"_blank\" title='Grammarly' href='https:\/\/www.grammarly.com\/' rel=\"noopener\">Grammarly<\/a>, we give up!<\/p>\n<p>Each Google Chart interfacer has individual nuances, but <font color=blue>PHP code changes<\/font> like below &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n      <font color=blue>echo ' if (decodeURIComponent((\"\" + location.hash).replace(\/^undefined\/g,\"\")).trim().indexOf(\",\") != -1) { ' . \"\\n\";<br \/>\n      echo ' var xwert=\"data=google.visualization.arrayToDataTable([ [' . \"'\" . $GETlabel . \"','\" . str_replace(\",\", \"','\", str_replace(\"'\", \"\", $GETvalue)) . \"'\" . '],\"; ' . \"\\n\";<br \/>\n      echo \" xwert+=\\\"\" . str_replace(\"~,\", \"',\", str_replace(\"[~\", \"['\", str_replace(\",]\", \",0]\", str_replace(\",,\", \",0,\", str_replace(\",]\", \",0]\", $GETdata))))) . \"\\\" + ('' + location.hash).replace(\/^\\#\/g,'').replace(\/\\%20\/g,'').replace(\/\\,\\]\/g,\\\",0\\\").replace(\/\\[\\~\/g,\\\"['\\\").replace(\/\\~\\,\/g,\\\"',\\\"); \" . \"\\n\";<br \/>\n      echo ' xwert+=\" ])\"; xwert=xwert.replace(\",,\",\",\"); ' . \"\\n\";<br \/>\n      echo ' eval(xwert); ' . \"\\n\";<br \/>\n      echo ' } else { ' . \"\\n\";<\/font><br \/>\n      echo ' data = google.visualization.arrayToDataTable([ ' . \"\\n\";<br \/>\n      echo \" ['\" . $GETlabel . \"','\" . str_replace(\",\", \"','\", str_replace(\"'\", \"\", $GETvalue)) . \"'] \\n\";<br \/>\n      echo str_replace(\"~,\", \"',\", str_replace(\"[~\", \"['\", str_replace(\",]\", \",0]\", str_replace(\",,\", \",0,\", str_replace(\",]\", \",0]\", $GETdata)))));<br \/>\n      echo \"        ]);\\n\";<br \/>\n      <font color=blue>echo \" } \\n\";<\/font><br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; typify our interventional strategy to make these improvements happen.  Good ol&#8217; <font size=1>(much maligned)<\/font> <i>eval<\/i> &#8230; huh?!  And good ol&#8217; Javascript <i>undefined<\/i> bizzos!  And good ol&#8217; <i>hashtagging<\/i>!   Aaaaaaaaaaal drink to all youse guys and gals <font size=1>(if one might be so forward, <a target=\"_blank\" title='?' href='https:\/\/www.youtube.com\/watch?v=PtR4cWb4HNg' rel=\"noopener\">that is<\/a>)<\/font>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-map-array-hashtag-tutorial\/' rel=\"noopener\">Javascript Map Array Hashtag Tutorial<\/a>.<\/p-->\n<hr>\n<p id='jmact'>Previous relevant <a target=\"_blank\" title='Javascript Map Array Chart Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-map-array-chart-tutorial\/' rel=\"noopener\">Javascript Map Array Chart Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Javascript Map Array Chart Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test_gc.jpg\" title=\"Javascript Map Array Chart Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Javascript Map Array Chart Tutorial<\/p><\/div>\n<p>Does the data behind yesterday&#8217;s <a title='Javascript Map Array Import Tutorial' href='#jmait'>Javascript Map Array Import Tutorial<\/a> remind you of anything?  Relative database data?  Spreadsheets?<\/p>\n<p>That last one has lots of synergy, we reckon.  And lots of us know, in spreadsheet software products like Microsoft Excel, once a &#8230;<\/p>\n<ul>\n<li>spreadsheet <font size=1>is involved<\/font> &#8230;<\/li>\n<li>charts <font size=1>are often offered as a graphical stand in display (to the tabular looking spreadsheet, <a target=\"_blank\" title='?' href='https:\/\/www.youtube.com\/watch?v=PtR4cWb4HNg' rel=\"noopener\">that is<\/a>)<\/font><\/li>\n<\/ul>\n<p>And in this respect, looking back on our interfacing work to <a title=\"Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.\" href=\"https:\/\/developers.google.com\/chart\/interactive\/docs\/index\" target=\"_blank\" rel=\"noopener\">Google Charts<\/a> when you have a <i>label name<\/i> to <i>numerical quantity<\/i> relationship two Google Chart types <font size=1>(we know of)<\/font> are useful &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/piechart' title='Google Pie Charts' rel=\"noopener\">Pie Chart<\/a> &#8230; and &#8230;<\/li>\n<li><a target=\"_blank\" href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/histogram' title='Google Histogram Charts' rel=\"noopener\">Histogram Chart<\/a><\/li>\n<\/ul>\n<p> &#8230; and we&#8217;d like to offer some optional interfacing to these <font size=1>(to improve functionality, <a target=\"_blank\" title='?' href='https:\/\/www.youtube.com\/watch?v=PtR4cWb4HNg' rel=\"noopener\">that is<\/a>)<\/font> &#8230; the Javascript for this leaning on the new &#8230;<\/p>\n<p><code><br \/>\n  function datait(oselv) {<br \/>\n    var outv=oselv, kk=0, firstdelim='';<br \/>\n    \/\/alert(outv);<br \/>\n    if (outv != '') {<br \/>\n    if (oselv.indexOf('PHP\/Pie') != -1) {<br \/>\n      document.getElementById('title').value=document.getElementById('topic').innerHTML + ' ' + document.getElementById('spanok').innerHTML + ' versus ' +   document.getElementById('spanlow').innerHTML + ' Report';<br \/>\n      document.getElementById('popularity').value=document.getElementById('thquantity').innerHTML;<br \/>\n      document.getElementById('task').value=document.getElementById('thquantity').innerHTML;<br \/>\n      document.getElementById('country').value=document.getElementById('thname').innerHTML;<br \/>\n      document.getElementById('desc').value=document.getElementById('thname').innerHTML;<br \/>\n      outv=outv.replace('title=Title', 'title=' + encodeURIComponent(document.getElementById('topic').innerHTML + ' ' + document.getElementById('spanok').innerHTML + ' versus ' +   document.getElementById('spanlow').innerHTML + ' Report'));<br \/>\n      outv=outv.replace('popularity=Popularity', 'popularity=' + encodeURIComponent(document.getElementById('thquantity').innerHTML));<br \/>\n      outv=outv.replace('country=Country', 'country=' + encodeURIComponent(document.getElementById('thname').innerHTML));<br \/>\n      outv=outv.replace('task=Popularity', 'task=' + encodeURIComponent(document.getElementById('thquantity').innerHTML));<br \/>\n      outv=outv.replace('desc=Country', 'desc=' + encodeURIComponent(document.getElementById('thname').innerHTML));<br \/>\n<br \/> <br \/>\n      for (kk=0; kk&lt;fruits.length; kk++) {<br \/>\n        if (('~,' + fruits[kk].quantity + ']').replace(\/\\~\\,\\]\/g,'~,0]').indexOf('-') == -1) {<br \/>\n        outv+=',[~' + encodeURIComponent(fruits[kk].name) + ('~,' + fruits[kk].quantity + ']').replace(\/\\~\\,\\]\/g,'~,0]');<br \/>\n        }<br \/>\n      }<br \/>\n    } else if (oselv.indexOf('PHP\/Histogram') != -1) {<br \/>\n      document.getElementById('title').value=document.getElementById('topic').innerHTML + ' ' + document.getElementById('spanok').innerHTML + ' versus ' +   document.getElementById('spanlow').innerHTML + ' Report';<br \/>\n      document.getElementById('popularity').value=document.getElementById('thquantity').innerHTML;<br \/>\n      document.getElementById('task').value=document.getElementById('thquantity').innerHTML;<br \/>\n      document.getElementById('country').value=document.getElementById('thname').innerHTML;<br \/>\n      document.getElementById('desc').value=document.getElementById('thname').innerHTML;<br \/>\n      outv=outv.replace('title=Title', 'title=' + encodeURIComponent(document.getElementById('topic').innerHTML + ' ' + document.getElementById('spanok').innerHTML + ' versus ' +   document.getElementById('spanlow').innerHTML + ' Report'));<br \/>\n      outv=outv.replace('popularity=Popularity', 'popularity=' + encodeURIComponent(document.getElementById('thquantity').innerHTML));<br \/>\n      outv=outv.replace('country=Country', 'country=' + encodeURIComponent(document.getElementById('thname').innerHTML));<br \/>\n      outv=outv.replace('task=Popularity', 'task=' + encodeURIComponent(document.getElementById('thquantity').innerHTML));<br \/>\n      outv=outv.replace('desc=Country', 'desc=' + encodeURIComponent(document.getElementById('thname').innerHTML));<br \/>\n<br \/> <br \/>\n      for (kk=0; kk&lt;fruits.length; kk++) {<br \/>\n        outv+=',[~' + encodeURIComponent(fruits[kk].name) + ('~,' + fruits[kk].quantity + ']').replace(\/\\~\\,\\]\/g,'~,0]');<br \/>\n      }<br \/>\n      \/\/alert(outv);<br \/>\n    } else if (oselv.indexOf('PHP\/Geo') != -1) {<br \/>\n      document.getElementById('title').value=document.getElementById('topic').innerHTML + ' ' + document.getElementById('spanok').innerHTML + ' versus ' +   document.getElementById('spanlow').innerHTML + ' Report';<br \/>\n      document.getElementById('popularity').value=document.getElementById('thquantity').innerHTML;<br \/>\n      document.getElementById('task').value=document.getElementById('thquantity').innerHTML;<br \/>\n      document.getElementById('country').value=document.getElementById('thname').innerHTML;<br \/>\n      document.getElementById('desc').value=document.getElementById('thname').innerHTML;<br \/>\n      outv=outv.replace('title=Title', 'title=' + encodeURIComponent(document.getElementById('topic').innerHTML + ' ' + document.getElementById('spanok').innerHTML + ' versus ' +   document.getElementById('spanlow').innerHTML + ' Report'));<br \/>\n      outv=outv.replace('popularity=Popularity', 'popularity=' + encodeURIComponent(document.getElementById('thquantity').innerHTML));<br \/>\n      outv=outv.replace('country=Country', 'country=' + encodeURIComponent(document.getElementById('thname').innerHTML));<br \/>\n      outv=outv.replace('task=Popularity', 'task=' + encodeURIComponent(document.getElementById('thquantity').innerHTML));<br \/>\n      outv=outv.replace('desc=Country', 'desc=' + encodeURIComponent(document.getElementById('thname').innerHTML));<br \/>\n    <br \/> <br \/>\n      for (kk=0; kk&lt;fruits.length; kk++) {<br \/>\n        outv+=firstdelim + '%20[~' + encodeURIComponent(fruits[kk].name) + ('~,' + fruits[kk].quantity + ']').replace(\/\\~\\,\\]\/g,'~,0]') + '%20';<br \/>\n        firstdelim=',';<br \/>\n      }<br \/>\n      if (('' + outv).length &gt; 600) { return toolong(outv.replace('&data=%20', '&data=%20#')); }<br \/>\n    }<br \/>\n    }<br \/>\n    if (('' + outv).length &gt; 600) {<br \/>\n      document.getElementById('data').value=',' + outv.split('&data=')[1].replace(\/\\%20\/g,' ');<br \/>\n      document.getElementById('myform').method='POST';<br \/>\n      document.getElementById('myform').action=outv.split('?')[0] + '#pleasenolocationhref';<br \/>\n      outv='.\/map_test.html';<br \/>\n      \/\/var xx=prompt(document.getElementById('myform').outerHTML,document.getElementById('myform').innerHTML);<br \/>\n      setTimeout(function(){ document.getElementById('mysub').click(); }, 3000);<br \/>\n    } else if (2 == 2) {<br \/>\n      document.getElementById('data').value=outv.split('&data=')[1].replace(\/\\%20\/g,' ');<br \/>\n      document.getElementById('myform').method='GET';<br \/>\n      document.getElementById('myform').action=outv.split('?')[0];<br \/>\n      \/\/outv='.\/map_test.html';<br \/>\n      setTimeout(function(){ document.getElementById('mysub').click(); }, 3000);<br \/>\n    }<br \/>\n    return outv;<br \/>\n  }<br \/>\n<br \/>\n  function selit(osel) {<br \/>\n    if (osel.value != '') {<br \/>\n       geovalis=osel.value;<br \/>\n       document.getElementById('defopt').innerText='Google Chart display of ... relevant ' + osel.value.split('PHP\/')[1].split('\/')[0].replace('Chart',' Chart') + ' below ...';<br \/>\n       document.getElementById('dif').innerHTML='&lt;br&gt;&lt;br&gt;&lt;a id=atop href=\"#myh1\"&gt;Back to top ...&lt;\/a&gt;&lt;br&gt;&lt;br&gt;&lt;iframe name=myifis id=myifis src=\"' + datait(osel.value) + '\" style=\"width:100%;height:700px;\"&gt;&lt;\/iframe&gt;';<br \/>\n       document.getElementById('dif').style.display='block';<br \/>\n    }<br \/>\n    osel.value='';<br \/>\n    location.href='#atop';<br \/>\n  }<br \/>\n<\/code><\/p>\n<p> &#8230; in <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html---GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html---GETME\" rel=\"noopener\">map_test.html<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html\" rel=\"noopener\">Array and Map Tester<\/a> web application you can <a href='#ifmap'>also try below<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-map-array-chart-tutorial\/' rel=\"noopener\">Javascript Map Array Chart Tutorial<\/a>.<\/p-->\n<hr>\n<p id='jmait'>Previous relevant <a target=\"_blank\" title='Javascript Map Array Import Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-map-array-import-tutorial\/' rel=\"noopener\">Javascript Map Array Import Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Javascript Map Array Import Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test_share.gif\" title=\"Javascript Map Array Import Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Javascript Map Array Import Tutorial<\/p><\/div>\n<p>Is it &#8230;<\/p>\n<ul>\n<li>the extension of import capabilities &#8230; or &#8230;<\/li>\n<li>the sharing capabilities<\/li>\n<\/ul>\n<p> &#8230; of most interest in today&#8217;s work, extending that of yesterday&#8217;s <a title='Javascript Map Array Genericization Tutorial' href='#jmagt'>Javascript Map Array Genericization Tutorial<\/a>?<\/p>\n<p>Well &#8230;<\/p>\n<ul>\n<li>the extension of import capabilities &#8230;<br \/>\n<code><br \/>\nfunction askall(<font color=blue>preenterall<\/font>) {<br \/>\n   var isfirst=true;<br \/>\n   var delall=false;<br \/>\n   var enterall=('' + preenterall).replace(\/^<font color=blue>undefined<\/font>$\/g,'');<br \/>\n   if (enterall == '') {<br \/>\n   enterall=prompt('Optionally copy all your CSV (comma separated values) data to apply here (where ; or | can be record delimiters).  Optionally prefix this CSV data with your topic followed by ~`~' + String.fromCharCode(10) + String.fromCharCode(10) + 'Example ...' + String.fromCharCode(10) + 'Fish~`~taylor,300;barramundi,400;perch,100;mullet,234', '');<br \/>\n   } \/\/else {<br \/>\n   \/\/alert(enterall);<br \/>\n   \/\/}<br \/>\n   if (enterall == null) {  enterall=''; }<br \/>\n   if (enterall.indexOf('~`~') != -1) {  document.getElementById('topic').innerHTML=enterall.split('~`~')[0];  enterall=enterall.replace(enterall.split('~`~')[0] + '~`~', '');  }<br \/>\n   if (enterall.indexOf(',') != -1) {<br \/>\n     var elines=[];<br \/>\n     if (enterall.indexOf(String.fromCharCode(10)) != -1) {<br \/>\n     elines=enterall.split(String.fromCharCode(10));<br \/>\n     } else if (enterall.indexOf(';') != -1) {<br \/>\n     elines=enterall.split(';');<br \/>\n     } else if (enterall.indexOf('|') != -1) {<br \/>\n     elines=enterall.split('|');<br \/>\n     }<br \/>\n     for (var ie=0; ie&lt;elines.length; ie++) {<br \/>\n        if (elines[ie].indexOf('\",\"') != -1 && elines[ie].indexOf('\",\"') &lt; elines[ie].indexOf(',')) {<br \/>\n          if (!delall) {<br \/>\n            delall=true;<br \/>\n            fruits=[];<br \/>\n            m = new Map();<br \/>\n          }<br \/>\n          if (elines[ie].substring(1).replace('-','').substring(0,1) &gt;= '0' && elines[ie].substring(1).replace('-','').substring(0,1) &lt;= '9') {<br \/>\n          \/\/alert(1);<br \/>\n            addone(elines[ie].split('\",\"')[1].split('\"')[0], elines[ie].substring(1).split('\"')[0]);<br \/>\n          } else {<br \/>\n          \/\/alert(2);<br \/>\n            addone(elines[ie].substring(1).split('\"')[0], elines[ie].split('\",\"')[1].split('\"')[0]);<br \/>\n          }<br \/>\n        } else if (elines[ie].indexOf('\",') != -1 && elines[ie].indexOf('\",') &lt; elines[ie].indexOf(',')) {<br \/>\n          if (!delall) {<br \/>\n            delall=true;<br \/>\n            fruits=[];<br \/>\n            m = new Map();<br \/>\n          }<br \/>\n          if (elines[ie].substring(1).replace('-','').substring(0,1) &gt;= '0' && elines[ie].substring(1).replace('-','').substring(0,1) &lt;= '9') {<br \/>\n          \/\/alert(3);<br \/>\n            addone(elines[ie].split('\",')[1].split(',')[0], elines[ie].substring(1).split('\"')[0]);<br \/>\n          } else {<br \/>\n          \/\/alert(4);<br \/>\n            addone(elines[ie].substring(1).split('\"')[0], elines[ie].split('\",')[1].split(',')[0]);<br \/>\n          }<br \/>\n        } else if (elines[ie].indexOf(',\"') != -1 && elines[ie].indexOf(',\"') == elines[ie].indexOf(',')) {<br \/>\n          if (!delall) {<br \/>\n            delall=true;<br \/>\n            fruits=[];<br \/>\n            m = new Map();<br \/>\n          }<br \/>\n          if (elines[ie].substring(0).replace('-','').substring(0,1) &gt;= '0' && elines[ie].substring(0).replace('-','').substring(0,1) &lt;= '9') {<br \/>\n          \/\/alert(5);<br \/>\n            addone(elines[ie].split(',\"')[1].split('\"')[0], elines[ie].substring(0).split(',')[0]);<br \/>\n          } else {<br \/>\n          \/\/alert(6);<br \/>\n            addone(elines[ie].substring(0).split(',')[0], elines[ie].split(',\"')[1].split('\"')[0]);<br \/>\n          }<br \/>\n        } else if (elines[ie].indexOf(',') != -1) {<br \/>\n          if (!delall) {<br \/>\n            delall=true;<br \/>\n            fruits=[];<br \/>\n            m = new Map();<br \/>\n          }<br \/>\n          if (elines[ie].substring(0).replace('-','').substring(0,1) &gt;= '0' && elines[ie].substring(0).replace('-','').substring(0,1) &lt;= '9') {<br \/>\n          \/\/alert(7);<br \/>\n            addone(elines[ie].substring(0).split(',')[1], elines[ie].substring(0).split(',')[0]);<br \/>\n          } else {<br \/>\n          \/\/alert(8);<br \/>\n            if (isfirst && ((elines[ie].substring(0).split(',')[1] + ' ').replace('-','').substring(0,1) &lt; '0' || (elines[ie].substring(0).split(',')[1] + ' ').replace('-','').substring(0,1) &gt; '9')) {<br \/>\n              document.getElementById('topic').innerHTML=elines[ie].substring(0).split(',')[0].substring(0,1).toUpperCase() + elines[ie].substring(0).split(',')[0].substring(1);<br \/>\n              document.getElementById('thname').innerHTML=elines[ie].substring(0).split(',')[0].substring(0,1).toUpperCase() + elines[ie].substring(0).split(',')[0].substring(1);<br \/>\n              document.getElementById('thquantity').innerHTML=elines[ie].substring(0).split(',')[1].substring(0,1).toUpperCase() + elines[ie].substring(0).split(',')[1].substring(1);<br \/>\n            } else {<br \/>\n              addone(elines[ie].substring(0).split(',')[0], elines[ie].substring(0).split(',')[1]);<br \/>\n            }<br \/>\n          }<br \/>\n        }<br \/>\n        isfirst=false;<br \/>\n     }<br \/>\n     beadjustable();<br \/>\n   }<br \/>\n}<br \/>\n<br \/>\n  function yesthreethree(restis) {<br \/>\n   if (restis.indexOf(';base64,') != -1) {<br \/>\n   var icontent=window.atob(restis.split(';base64,')[1]);<br \/>\n   if ((('' + icontent).trim() + ' ').replace(\/^\\&#091;caption\/g,'&lt;').substring(0,1) == '&lt;') {<br \/>\n   askall(extractContent(icontent,true));<br \/>\n   } else {<br \/>\n   askall(icontent);<br \/>\n   }<br \/>\n   } else {<br \/>\n   askall(restis);<br \/>\n   }<br \/>\n  }<br \/>\n<\/code><br \/>\n &#8230;asked for tweaks to <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.html--------------------------------------------GETME' rel=\"noopener\">our changed<\/a> <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.html--------------------------------------------GETME' rel=\"noopener\">client_browsing.htm<\/a> client side HTML and Javascript inhouse file browsing interfacer showing a &#8220;first time&#8221; scenario, for us with our &#8220;first cab off the rank&#8221; CSV (comma separated values) trial file &#8230;<br \/>\n<code><br \/>\nuser@MacBook-Air htdocs % head -10 country.csv<br \/>\ncountry,latitude,longitude,name \/\/ Thanks to https:\/\/developers.google.com\/public-data\/docs\/canonical\/countries_csv<br \/>\nAD,42.546245,1.601554,Andorra<br \/>\nAE,23.424076,53.847818,United Arab Emirates<br \/>\nAF,33.93911,67.709953,Afghanistan<br \/>\nAG,17.060816,-61.796428,Antigua and Barbuda<br \/>\nAI,18.220554,-63.068615,Anguilla<br \/>\nAL,41.153332,20.168331,Albania<br \/>\nAM,40.069099,45.038189,Armenia<br \/>\nAN,12.226079,-69.060087,Netherlands Antilles<br \/>\nAO,-11.202692,17.873887,Angola<br \/>\nuser@MacBook-Air htdocs %<br \/>\n<\/code><br \/>\n &#8230; which is of interest &#8230; or &#8230;<\/li>\n<li>the sharing capabilities, of the report, where we allow for the usual onclick of an emoji button fed through to &#8220;a&#8221; <i>mailto:<\/i> (email) or <i>sms:<\/i> (SMS) conduits to sharing, and for the first time, for us, a drag and drop way (we thank both <a target=\"_blank\" title='https:\/\/www.w3schools.com\/howto\/howto_js_draggable.asp' href='https:\/\/www.w3schools.com\/howto\/howto_js_draggable.asp' rel=\"noopener\">https:\/\/www.w3schools.com\/howto\/howto_js_draggable.asp<\/a> and <a target=\"_blank\" title='https:\/\/www.w3schools.com\/html\/html5_draganddrop.asp' href='https:\/\/www.w3schools.com\/html\/html5_draganddrop.asp' rel=\"noopener\">https:\/\/www.w3schools.com\/html\/html5_draganddrop.asp<\/a> regarding) &#8230;<br \/>\n<code><br \/>\nfunction dragElement(elmnt) { \/\/ thanks to https:\/\/www.w3schools.com\/howto\/howto_js_draggable.asp<br \/>\n  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;<br \/>\n  if (document.getElementById(elmnt.id + \"header\")) {<br \/>\n    \/\/ if present, the header is where you move the DIV from:<br \/>\n    document.getElementById(elmnt.id + \"header\").onmousedown = dragMouseDown;<br \/>\n  } else {<br \/>\n    \/\/ otherwise, move the DIV from anywhere inside the DIV:<br \/>\n    elmnt.onmousedown = dragMouseDown;<br \/>\n  }<br \/>\n<br \/>\n  function dragMouseDown(e) {<br \/>\n    e = e || window.event;<br \/>\n    e.preventDefault();<br \/>\n    \/\/ get the mouse cursor position at startup:<br \/>\n    pos3 = e.clientX;<br \/>\n    pos4 = e.clientY;<br \/>\n    document.onmouseup = closeDragElement;<br \/>\n    \/\/ call a function whenever the cursor moves:<br \/>\n    document.onmousemove = elementDrag;<br \/>\n  }<br \/>\n<br \/>\n  function elementDrag(e) {<br \/>\n    e = e || window.event;<br \/>\n    e.preventDefault();<br \/>\n    \/\/ calculate the new cursor position:<br \/>\n    pos1 = pos3 - e.clientX;<br \/>\n    pos2 = pos4 - e.clientY;<br \/>\n    pos3 = e.clientX;<br \/>\n    pos4 = e.clientY;<br \/>\n    \/\/ set the element's new position:<br \/>\n    elmnt.style.top = (elmnt.offsetTop - pos2) + \"px\";<br \/>\n    elmnt.style.left = (elmnt.offsetLeft - pos1) + \"px\";<br \/>\n    alert('Here');<br \/>\n  }<br \/>\n<br \/>\n  function closeDragElement() {<br \/>\n    \/\/ stop moving when mouse button is released:<br \/>\n    document.onmouseup = null;<br \/>\n    document.onmousemove = null;<br \/>\n  }<br \/>\n}<br \/>\n<br \/>\nfunction allowDrop(ev) { \/\/ thanks to https:\/\/www.w3schools.com\/html\/html5_draganddrop.asp<br \/>\n  ev.preventDefault();<br \/>\n}<br \/>\n<br \/>\nfunction drag(ev) { \/\/ thanks to https:\/\/www.w3schools.com\/html\/html5_draganddrop.asp<br \/>\n  ev.dataTransfer.setData(\"text\", ev.target.id);<br \/>\n}<br \/>\n<br \/>\nfunction doemail(data) {<br \/>\n  var a=null;<br \/>\n  a = document.createElement(\"a\");<br \/>\n  var contis=(document.getElementById('demo').innerText || document.getElementById('demo').contentWindow || document.getElementById('demo').contentDocument);<br \/>\n  var topicis=(document.getElementById('topic').innerText || document.getElementById('topic').contentWindow || document.getElementById('topic').contentDocument);<br \/>\n  var subjis=(document.getElementById('threport').innerText || document.getElementById('threport').contentWindow || document.getElementById('threport').contentDocument);<br \/>\n  a.href='mailto:?subject=' + encodeURIComponent(topicis) + '%20' + encodeURIComponent(subjis) + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?tippingvalue=' + moreencodeURIComponent(document.getElementById('itip').value) + '#data=') + encodeURIComponent(encodeURIComponent(contis.replace(\/\\&lt;bJUNKr\\&gt;\/g, String.fromCharCode(10))));<br \/>\n  a.click();<br \/>\n}<br \/>\n<br \/>\nfunction dosms(data) {<br \/>\n  var a=null;<br \/>\n  a = document.createElement(\"a\");<br \/>\n  var contis=(document.getElementById('demo').innerText || document.getElementById('demo').contentWindow || document.getElementById('demo').contentDocument);<br \/>\n  var topicis=(document.getElementById('topic').innerText || document.getElementById('topic').contentWindow || document.getElementById('topic').contentDocument);<br \/>\n  a.href='sms:&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?tippingvalue=' + moreencodeURIComponent(document.getElementById('itip').value) + '#data=') + encodeURIComponent(encodeURIComponent(contis.replace(\/\\&lt;bJUNKr\\&gt;\/g, String.fromCharCode(10))));<br \/>\n  a.click();<br \/>\n}<br \/>\n<br \/>\nfunction drop(ev) {  \/\/ thanks to https:\/\/www.w3schools.com\/html\/html5_draganddrop.asp<br \/>\n  var ssrect=null, isemail=true, a=null;<br \/>\n  ssrect=document.getElementById('droppable').getBoundingClientRect();<br \/>\n  if (eval(ssrect.right - ev.clientX) &lt; eval(ev.clientX - ssrect.left)) { isemail=false; }<br \/>\n  ev.preventDefault();<br \/>\n  var data = ev.dataTransfer.getData(\"text\");<br \/>\n  if (isemail) {<br \/>\n  \/\/a = document.createElement(\"a\");<br \/>\n  \/\/a.href='mailto:?subject=' + encodeURIComponent(document.getElementById('topic').innerHTML) + '%20Report%20of%20Inventory&body=' + encodeURIComponent(document.getElementById(data).innerHTML.replace(\/\\&lt;bJUNKr\\&gt;\/g, String.fromCharCode(10)));<br \/>\n  \/\/a.click();<br \/>\n  doemail(data);<br \/>\n  } else if (!isemail) {<br \/>\n  \/\/a = document.createElement(\"a\");<br \/>\n  \/\/a.href='sms:&body=' + encodeURIComponent(document.getElementById(data).innerHTML.replace(\/\\&lt;bJUNKr\\&gt;\/g, String.fromCharCode(10)));<br \/>\n  \/\/a.click();<br \/>\n  dosms(data);<br \/>\n  } else {<br \/>\n  ev.target.appendChild(document.getElementById(data));<br \/>\n  }<br \/>\n}<br \/>\n<\/code><br \/>\n &#8230; where the drop position tells us which &#8220;conduit&#8221; to go with<\/li>\n<\/ul>\n<p> &#8230; and so, both are of some interest, we figure in <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html--GETME\" rel=\"noopener\">a changed<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html--GETME\" rel=\"noopener\">map_test.html<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html\" rel=\"noopener\">Array and Map Tester<\/a> web application you can <a href='#ifmap'>also try below<\/a>.<\/p>\n<p><b><i>Did you know?<\/i><\/b><\/p>\n<p>In Object Oriented Programming, methods (ie. object functions) can be named similarly with different argument patterns and\/or return values, but now, with three functions in this current project we&#8217;ve coalesced this idea into single calls and used the Javascript <font color=blue><i>undefined<\/i><\/font> return for non-defined arguments as our way to &#8220;keep it brief&#8221; &#8230;<\/p>\n<ul>\n<li>function askall(<font color=blue>preenterall<\/font>) {  }  <font size=1> &#8230; as above<\/font><\/li>\n<li>function alteredstate(indemo<font color=blue>, readd<\/font>) {   }<\/li>\n<li>function addone(<font color=blue>knownname, knownquantity<\/font>) {  }<\/li>\n<\/ul>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-map-array-import-tutorial\/' rel=\"noopener\">Javascript Map Array Import Tutorial<\/a>.<\/p-->\n<hr>\n<p id='jmagt'>Previous relevant <a target=\"_blank\" title='Javascript Map Array Genericization Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-map-array-genericization-tutorial\/' rel=\"noopener\">Javascript Map Array Genericization Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Javascript Map Array Genericization Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test_more.gif\" title=\"Javascript Map Array Genericization Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Javascript Map Array Genericization Tutorial<\/p><\/div>\n<p>We think yesterday&#8217;s <a title='Javascript Map Array Primer Tutorial' href='#jmapt'>Javascript Map Array Primer Tutorial<\/a> could benefit from &#8230;<\/p>\n<ul>\n<li>aspects that make the Inventory aspects to the web application feel more like a &#8220;tool&#8221; &#8230;<\/li>\n<li>aspects that make the Inventory aspects to the web application feel more &#8220;generic&#8221;<\/li>\n<\/ul>\n<p> &#8230; and, you may notice, fixes for the way &#8220;Map.groupBy&#8221; functionality does not appear to work on the <font color=blue>mobile platforms<\/font> my iPhone has for web browsers &#8230;<\/p>\n<p><code><br \/>\nvar text=\"\";<br \/>\n<br \/>\nfunction thecall() {<br \/>\nvar kk=0;<br \/>\n<br \/>\n\/\/ Group by ok and low<br \/>\ntext=\"These \" + document.getElementById('topic').innerHTML.toLowerCase() + \"s are Ok: &lt;br&gt;\";<br \/>\ntry {<br \/>\nconst result = Map.groupBy(fruits, myCallback);<br \/>\n<br \/>\n\/\/ Display Results<br \/>\ntry {<br \/>\nfor (let x of result.get(\"ok\")) {<br \/>\n  if (x.name != '' || x.quantity != 0) {<br \/>\n  text += \"\" + x.name + \" \" + x.quantity + \"&lt;br&gt;\";<br \/>\n  }<br \/>\n  if (!m.has(x.name)) {<br \/>\n    m.set(x.name, x.quantity);<br \/>\n  }<br \/>\n}<br \/>\n} catch(ebad) { }<br \/>\ntext += \"&lt;br&gt;These \" + document.getElementById('topic').innerHTML.toLowerCase() + \"s are low: &lt;br&gt;\";<br \/>\ntry {<br \/>\nfor (let x of result.get(\"low\")) {<br \/>\n  if (x.name != '' || x.quantity != 0) {<br \/>\n  text += \"\" + x.name + \" \" + x.quantity + \"&lt;br&gt;\";<br \/>\n  }<br \/>\n  if (!m.has(x.name)) {<br \/>\n    m.set(x.name, x.quantity);<br \/>\n  }<br \/>\n}<br \/>\nconsole.log(result.get(\"ok\"));<br \/>\n} catch(ebad) { }<br \/>\n} <font color=blue>catch(overebad) {<br \/>\ntext=\"These \" + document.getElementById('topic').innerHTML.toLowerCase() + \"s are Ok: &lt;br&gt;\";<br \/>\nfor (kk=0; kk&lt;fruits.length; kk++) {<br \/>\n    if (('' + fruits[kk].quantity).replace('-','').substring(0,1) &gt;= '0' && ('' + fruits[kk].quantity).replace('-','').substring(0,1) &lt;= '9') {<br \/>\n    if (mysimpleCallback(fruits[kk].quantity) == 'ok') {<br \/>\n    \/\/alert(fruits[kk].name);<br \/>\n  text += \"\" + fruits[kk].name + \" \" + fruits[kk].quantity + \"&lt;br&gt;\";<br \/>\n    \/\/alert('2:' + fruits[kk].name);<br \/>\n  if (!m.has(fruits[kk].name)) {<br \/>\n    \/\/alert('3:' + fruits[kk].name);<br \/>\n    m.set(fruits[kk].name, fruits[kk].quantity);<br \/>\n    \/\/alert('4:' + fruits[kk].name);<br \/>\n  }<br \/>\n    }<br \/>\n    }<br \/>\n}<br \/>\ntext += \"&lt;br&gt;These \" + document.getElementById('topic').innerHTML.toLowerCase() + \"s are low: &lt;br&gt;\";<br \/>\nfor (kk=0; kk&lt;fruits.length; kk++) {<br \/>\n    if (('' + fruits[kk].quantity).replace('-','').substring(0,1) &gt;= '0' && ('' + fruits[kk].quantity).replace('-','').substring(0,1) &lt;= '9') {<br \/>\n    if (mysimpleCallback(fruits[kk].quantity) == 'low') {<br \/>\n  text += \"\" + fruits[kk].name + \" \" + fruits[kk].quantity + \"&lt;br&gt;\";<br \/>\n  if (!m.has(fruits[kk].name)) {<br \/>\n    m.set(fruits[kk].name, fruits[kk].quantity);<br \/>\n  }<br \/>\n    }<br \/>\n    }<br \/>\n}<br \/>\n<br \/>\n}<\/font><br \/>\ndocument.getElementById(\"demo\").innerHTML = text;<br \/>\n<br \/>\n}<br \/>\n<\/code><\/p>\n<p>With this in mind, we honed in on a &#8220;topic&#8221; concept, where yesterday&#8217;s &#8220;topic&#8221; would have been &#8220;Fruit&#8221;.  There are two aspects &#8230;<\/p>\n<ol>\n<li>allow a <font color=blue>contenteditable<\/font> way for user to change the displayed (what used to be) <i>hardcoding<\/i> &#8230;<br \/>\n<code><br \/>\n&lt;span title='Double click to be able to enter CSV data' id=topic <font color=blue>contenteditable=true<\/font> onblur=beadjustable(); <font color=purple>ondblclick=askall();<\/font>&gt;<i>Fruit<\/i>&lt;\/span&gt;<br \/>\n<\/code><br \/>\n &#8230; as well as &#8230;<\/li>\n<li>add <font color=purple>ondblclick<\/font> (ie. on double click) means by which a user can use a Javascript prompt window means by which they can enter all the CSV (ie. comma separated values) data for an Inventory application of the user&#8217;s choosing (including a means by which they can also enter the &#8220;topic&#8221; at the same time) &#8230;<br \/>\n<code><br \/>\n<font color=purple>function askall() {<br \/>\n   var delall=false;<br \/>\n   var enterall=prompt('Optionally copy all your CSV (comma separated values) data to apply here (where ; or | can be record delimiters).  Optionally prefix this CSV data with your topic followed by ~`~' + String.fromCharCode(10) + String.fromCharCode(10) + 'Example ...' + String.fromCharCode(10) + 'Fish~`~taylor,300;barramundi,400;perch,100;mullet,234', '');<br \/>\n   if (enterall == null) {  enterall=''; }<br \/>\n   if (enterall.indexOf('~`~') != -1) {  document.getElementById('topic').innerHTML=enterall.split('~`~')[0];  enterall=enterall.replace(enterall.split('~`~')[0] + '~`~', '');  }<br \/>\n   if (enterall.indexOf(',') != -1) {<br \/>\n     var elines=[];<br \/>\n     if (enterall.indexOf(String.fromCharCode(10)) != -1) {<br \/>\n     elines=enterall.split(String.fromCharCode(10));<br \/>\n     } else if (enterall.indexOf(';') != -1) {<br \/>\n     elines=enterall.split(';');<br \/>\n     } else if (enterall.indexOf('|') != -1) {<br \/>\n     elines=enterall.split('|');<br \/>\n     }<br \/>\n     for (var ie=0; ie&lt;elines.length; ie++) {<br \/>\n        if (elines[ie].indexOf('\",\"') != -1 && elines[ie].indexOf('\",\"') &lt; elines[ie].indexOf(',')) {<br \/>\n          if (!delall) {<br \/>\n            delall=true;<br \/>\n            fruits=[];<br \/>\n            m = new Map();<br \/>\n          }<br \/>\n          if (elines[ie].substring(1).replace('-','').substring(0,1) &gt;= '0' && elines[ie].substring(1).replace('-','').substring(0,1) &lt;= '9') {<br \/>\n            addone(elines[ie].split('\",\"')[1].split('\"')[0], elines[ie].substring(1).split('\"')[0]);<br \/>\n          } else {<br \/>\n            addone(elines[ie].substring(1).split('\"')[0], elines[ie].split('\",\"')[1].split('\"')[0]);<br \/>\n          }<br \/>\n        } else if (elines[ie].indexOf('\",') != -1 && elines[ie].indexOf('\",') &lt; elines[ie].indexOf(',')) {<br \/>\n          if (!delall) {<br \/>\n            delall=true;<br \/>\n            fruits=[];<br \/>\n            m = new Map();<br \/>\n          }<br \/>\n          if (elines[ie].substring(1).replace('-','').substring(0,1) &gt;= '0' && elines[ie].substring(1).replace('-','').substring(0,1) &lt;= '9') {<br \/>\n            addone(elines[ie].split('\",')[1].split(',')[0], elines[ie].substring(1).split('\"')[0]);<br \/>\n          } else {<br \/>\n            addone(elines[ie].substring(1).split('\"')[0], elines[ie].split('\",')[1].split(',')[0]);<br \/>\n          }<br \/>\n        } else if (elines[ie].indexOf(',\"') != -1 && elines[ie].indexOf(',\"') == elines[ie].indexOf(',')) {<br \/>\n          if (!delall) {<br \/>\n            delall=true;<br \/>\n            fruits=[];<br \/>\n            m = new Map();<br \/>\n          }<br \/>\n          if (elines[ie].substring(0).replace('-','').substring(0,1) &gt;= '0' && elines[ie].substring(0).replace('-','').substring(0,1) &lt;= '9') {<br \/>\n            addone(elines[ie].split(',\"')[1].split('\"')[0], elines[ie].substring(0).split(',')[0]);<br \/>\n          } else {<br \/>\n            addone(elines[ie].substring(0).split(',')[0], elines[ie].split(',\"')[1].split('\"')[0]);<br \/>\n          }<br \/>\n        } else if (elines[ie].indexOf(',') != -1) {<br \/>\n          if (!delall) {<br \/>\n            delall=true;<br \/>\n            fruits=[];<br \/>\n            m = new Map();<br \/>\n          }<br \/>\n          if (elines[ie].substring(0).replace('-','').substring(0,1) &gt;= '0' && elines[ie].substring(0).replace('-','').substring(0,1) &lt;= '9') {<br \/>\n            addone(elines[ie].substring(0).split(',')[1], elines[ie].substring(0).split(',')[0]);<br \/>\n          } else {<br \/>\n            addone(elines[ie].substring(0).split(',')[0], elines[ie].substring(0).split(',')[1]);<br \/>\n          }<br \/>\n        }<br \/>\n     }<br \/>\n     beadjustable();<br \/>\n   }<br \/>\n}<\/font><br \/>\n<\/code>\n<\/li>\n<\/ol>\n<p> &#8230; in <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html-GETME\" rel=\"noopener\">a changed<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html-GETME\" rel=\"noopener\">map_test.html &#8220;proof of concept&#8221;<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html\" rel=\"noopener\">Array and Map Tester<\/a> web application you can <a href='#ifmap'>also try below<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-map-array-genericization-tutorial\/' rel=\"noopener\">Javascript Map Array Genericization Tutorial<\/a>.<\/p-->\n<hr>\n<p id='jmapt'>Previous relevant <a target=\"_blank\" title='Javascript Map Array Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-map-array-primer-tutorial\/' rel=\"noopener\">Javascript Map Array Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Javascript Map Array Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.jpg\" title=\"Javascript Map Array Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Javascript Map Array Primer Tutorial<\/p><\/div>\n<p>We&#8217;ve got yet another &#8220;map&#8221; idea for you today, coming from the wooooorrrrlllllddd of Javascript clientside data structures, if you like.<\/p>\n<p>We got onto this topic via reading <a target=\"_blank\" title='https:\/\/www.w3schools.com\/js\/tryit.asp?filename=tryjs_map_groupby' href='https:\/\/www.w3schools.com\/js\/tryit.asp?filename=tryjs_map_groupby' rel=\"noopener\">https:\/\/www.w3schools.com\/js\/tryit.asp?filename=tryjs_map_groupby<\/a> and <a target=\"_blank\" title='https:\/\/medium.com\/@sotoer\/your-foreach-example-has-the-wrong-order-of-params-which-you-are-also-demonstrating-in-your-sample-42f5491b604e' href='https:\/\/medium.com\/@sotoer\/your-foreach-example-has-the-wrong-order-of-params-which-you-are-also-demonstrating-in-your-sample-42f5491b604e' rel=\"noopener\">https:\/\/medium.com\/@sotoer\/your-foreach-example-has-the-wrong-order-of-params-which-you-are-also-demonstrating-in-your-sample-42f5491b604e<\/a> which both helped us enormously put together a rudimentary Fruit Inventory web application featuring &#8230;<\/p>\n<ul>\n<li>array with structure<br \/>\n<code><br \/>\n\/\/ Create an Array<br \/>\nconst fruits = [<br \/>\n  {name:\"apples\", quantity:300},<br \/>\n  {name:\"bananas\", quantity:500},<br \/>\n  {name:\"oranges\", quantity:200},<br \/>\n  {name:\"kiwi\", quantity:150}<br \/>\n];<br \/>\n<\/code>\n<\/li>\n<li>map object<br \/>\n<code><br \/>\nvar m = new Map();<br \/>\n<\/code>\n<\/li>\n<li>use of map.set() &#8230;<br \/>\n<code><br \/>\nfunction addone() {<br \/>\n  doadd=true;<br \/>\n  <font color=purple>fruits.push({name:\"\", quantity:0});<\/font><br \/>\n  <font color=blue>m.set('', 0);<\/font><br \/>\n  doadd=false;<br \/>\n  beadjustable();<br \/>\n}<br \/>\n<\/code><br \/>\n &#8230; and Map.groupBy()<br \/>\n<code><br \/>\nfunction thecall() {<br \/>\n\/\/ Group by ok and low<br \/>\n<font color=blue>const result = Map.groupBy(fruits, myCallback);<\/font><br \/>\n<br \/>\n\/\/ Display Results<br \/>\nlet text =\"These fruits are Ok: &lt;br&gt;\";<br \/>\ntry {<br \/>\nfor (let x of result.get(\"ok\")) {<br \/>\n  if (x.name != '' || x.quantity != 0) {<br \/>\n  text += x.name + \" \" + x.quantity + \"&lt;br&gt;\";<br \/>\n  }<br \/>\n  if (!m.has(x.name)) {<br \/>\n    m.set(x.name, x.quantity);<br \/>\n  }<br \/>\n}<br \/>\n} catch(ebad) { }<br \/>\ntext += \"&lt;br&gt;These fruits are low: &lt;br&gt;\";<br \/>\ntry {<br \/>\nfor (let x of result.get(\"low\")) {<br \/>\n  if (x.name != '' || x.quantity != 0) {<br \/>\n  text += x.name + \" \" + x.quantity + \"&lt;br&gt;\";<br \/>\n  }<br \/>\n  if (!m.has(x.name)) {<br \/>\n    m.set(x.name, x.quantity);<br \/>\n  }<br \/>\n}<br \/>\n} catch(ebad) { }<br \/>\ndocument.getElementById(\"demo\").innerHTML = text;<br \/>\n<br \/>\nconsole.log(result.get(\"ok\"));<br \/>\n}<br \/>\n<\/code>\n<\/li>\n<li>contenteditable=true<br \/>\n<code><br \/>\nfunction consolelog(inrec) {<br \/>\n   if (rspan == 0) {<br \/>\n   document.getElementById(\"tdname\").innerHTML=inrec.split('value:')[1].split(' key:')[0].split(' map:')[0];<br \/>\n   document.getElementById(\"tdquantity\").innerHTML=inrec.split('key:')[1].split(' value:')[0].split(' map:')[0];<br \/>\n   rspan=1;<br \/>\n   } else if (inrec.split('value:')[1].split(' key:')[0].split(' map:')[0] == '') {<br \/>\n   tabletds+='&lt;tr&gt;&lt;td <font color=blue>contenteditable=true<\/font> id=tdname' + rspan + ' onblur=fix(this);&gt;' + inrec.split('value:')[1].split(' key:')[0].split(' map:')[0] + '&lt;\/td&gt;&lt;td <font color=blue>contenteditable=true<\/font> id=tdquantity' + rspan + ' onblur=fix(this);&gt;' +  inrec.split('key:')[1].split(' value:')[0].split(' map:')[0] + '&lt;\/td&gt;&lt;\/tr&gt;';<br \/>\n   rspan++;<br \/>\n   } else {<br \/>\n   tabletds+='&lt;tr&gt;&lt;td contenteditable=false id=tdname' + rspan + ' onblur=fix(this);&gt;' + inrec.split('value:')[1].split(' key:')[0].split(' map:')[0] + '&lt;\/td&gt;&lt;td <font color=blue>contenteditable=true<\/font> id=tdquantity' + rspan + ' onblur=fix(this);&gt;' +  inrec.split('key:')[1].split(' value:')[0].split(' map:')[0] + '&lt;\/td&gt;&lt;\/tr&gt;';<br \/>\n   rspan++;<br \/>\n   }<br \/>\n   \/\/alert(inrec);<br \/>\n   if (doadd) {<br \/>\n   fruits.push({name:\"\", quantity:0});<br \/>\n   m.set('', 0);<br \/>\n   tabletds+='&lt;tr&gt;&lt;td <font color=blue>contenteditable=true<\/font> id=tdname' + rspan + ' onblur=fix(this);&gt;&lt;\/td&gt;&lt;td <font color=blue>contenteditable=true<\/font> id=tdquantity' + rspan + ' onblur=fix(this);&gt;0&lt;\/td&gt;&lt;\/tr&gt;';<br \/>\n   rspan++;<br \/>\n   doadd=false;<br \/>\n   }<br \/>\n}<br \/>\n<\/code>\n<\/li>\n<li><font color=purple>array.push()<\/font><\/li>\n<\/ul>\n<p> &#8230; in <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html_GETME\" rel=\"noopener\">map_test.html &#8220;proof of concept&#8221;<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html\" rel=\"noopener\">Array and Map Tester<\/a> web application &#8230;<\/p>\n<p><iframe id=ifmap src=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/map_test.html\" style=\"width:100%;height:900px;\"><\/iframe><\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d64480' onclick='var dv=document.getElementById(\"d64480\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/map\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d64480' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d64487' onclick='var dv=document.getElementById(\"d64487\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/genericization\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d64487' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d64494' onclick='var dv=document.getElementById(\"d64494\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/import\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d64494' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d64510' onclick='var dv=document.getElementById(\"d64510\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/google-chart\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d64510' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d64517' onclick='var dv=document.getElementById(\"d64517\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/hashtag\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d64517' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d64540' onclick='var dv=document.getElementById(\"d64540\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/field\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d64540' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d64547' onclick='var dv=document.getElementById(\"d64547\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/sql\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d64547' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d64557' onclick='var dv=document.getElementById(\"d64557\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/sort\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d64557' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d64560' onclick='var dv=document.getElementById(\"d64560\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/logic\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d64560' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d64466' onclick='var dv=document.getElementById(\"d64466\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/function\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d64466' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The SQL emphasis, recently, regarding our current Arrays and Map web application talked about in yesterday&#8217;s Javascript Map Array Delimiter Tutorial had us thinking about if we could incorporate those &#8230; count(*) sum(*) min(*) max(*) avg(*) &#8230; SQL aggregate function &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-map-array-aggregates-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,12,14,37],"tags":[4875,69,2543,103,130,1993,3531,174,199,230,231,4873,3136,283,290,2522,2276,2147,327,354,364,380,385,3606,399,3103,418,421,431,432,452,471,2537,1839,1619,1533,518,519,4870,3362,2229,557,3961,565,1786,4548,602,2882,1783,631,652,699,2169,3373,739,745,1830,795,830,849,2010,1666,875,2076,3277,4874,944,997,1761,2135,4579,1866,2821,1133,1137,1159,1173,1185,1186,4872,1208,2005,1319,4857,1345,1891,4871,2580],"class_list":["post-64466","post","type-post","status-publish","format-standard","hentry","category-ajax","category-elearning","category-event-driven-programming","category-tutorials","tag-aggregate","tag-ajax","tag-area-chart","tag-array","tag-bar-chart","tag-browse","tag-browsing","tag-button","tag-chart","tag-column","tag-column-chart","tag-conditions","tag-conduit","tag-csv","tag-data","tag-delimit","tag-delimitation","tag-delimiter","tag-did-you-know","tag-dom","tag-drag-and-drop","tag-email","tag-emoji","tag-emoji-button","tag-eval","tag-field","tag-file","tag-file-browsing","tag-filter","tag-filtering","tag-form","tag-function","tag-generic","tag-genericization","tag-geo-chart","tag-get","tag-google-chart","tag-google-charts","tag-groupby","tag-hardcoding","tag-hash","tag-hashtag","tag-hashtagging","tag-histogram","tag-histogram-chart","tag-hybrid","tag-import","tag-intervention","tag-inventory","tag-iphone","tag-javascript","tag-line-chart","tag-location-hash","tag-logic","tag-mailto","tag-map","tag-method","tag-mobile","tag-navigation","tag-object","tag-object-oriented-programming","tag-ondblclick","tag-oop","tag-order","tag-order-by","tag-paradigm","tag-pie-chart","tag-programming","tag-prompt","tag-push","tag-relationship","tag-select","tag-set","tag-share","tag-sharing","tag-sms","tag-sort","tag-spreadsheet","tag-sql","tag-sql-filter","tag-structure","tag-tool","tag-tutorial","tag-undefined","tag-url","tag-user","tag-user-defined","tag-where"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/64466"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=64466"}],"version-history":[{"count":4,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/64466\/revisions"}],"predecessor-version":[{"id":64471,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/64466\/revisions\/64471"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=64466"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=64466"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=64466"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}