{"id":64414,"date":"2024-08-12T03:01:00","date_gmt":"2024-08-11T17:01:00","guid":{"rendered":"https:\/\/65.254.95.247\/ITblog\/?p=64414"},"modified":"2024-08-11T20:04:15","modified_gmt":"2024-08-11T10:04:15","slug":"javascript-map-array-chart-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-map-array-chart-tutorial\/","title":{"rendered":"Javascript Map Array Chart 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 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:800px;\"><\/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='#d64414' onclick='var dv=document.getElementById(\"d64414\"); 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='d64414' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Does the data behind yesterday&#8217;s Javascript Map Array Import Tutorial remind you of anything? Relative database data? Spreadsheets? That last one has lots of synergy, we reckon. And lots of us know, in spreadsheet software products like Microsoft Excel, once &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-map-array-chart-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":[12,14,37],"tags":[103,1993,3531,174,199,3136,283,290,327,354,364,380,385,3606,418,421,471,2537,1839,1533,519,4870,3362,2229,557,565,1786,602,1783,631,652,739,745,1830,795,849,2010,875,944,997,2135,4579,2821,1133,1137,1159,1185,1208,2005,1319,4857],"class_list":["post-64414","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-array","tag-browse","tag-browsing","tag-button","tag-chart","tag-conduit","tag-csv","tag-data","tag-did-you-know","tag-dom","tag-drag-and-drop","tag-email","tag-emoji","tag-emoji-button","tag-file","tag-file-browsing","tag-function","tag-generic","tag-genericization","tag-get","tag-google-charts","tag-groupby","tag-hardcoding","tag-hash","tag-hashtag","tag-histogram","tag-histogram-chart","tag-import","tag-inventory","tag-iphone","tag-javascript","tag-mailto","tag-map","tag-method","tag-mobile","tag-object","tag-object-oriented-programming","tag-oop","tag-pie-chart","tag-programming","tag-push","tag-relationship","tag-set","tag-share","tag-sharing","tag-sms","tag-spreadsheet","tag-structure","tag-tool","tag-tutorial","tag-undefined"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/64414"}],"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=64414"}],"version-history":[{"count":3,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/64414\/revisions"}],"predecessor-version":[{"id":64417,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/64414\/revisions\/64417"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=64414"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=64414"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=64414"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}