{"id":62076,"date":"2023-12-25T03:01:18","date_gmt":"2023-12-24T17:01:18","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=62076"},"modified":"2023-12-25T06:11:26","modified_gmt":"2023-12-24T20:11:26","slug":"xml-public-data-genericization-attributes-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/xml-public-data-genericization-attributes-tutorial\/","title":{"rendered":"XML Public Data Genericization Attributes Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/histogram_pie.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"XML Public Data Genericization Attributes Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/histogram_pie_resizing.jpg\" title=\"XML Public Data Genericization Attributes Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">XML Public Data Genericization Attributes Tutorial<\/p><\/div>\n<p>Where to with improving on yesterday&#8217;s <a title='XML Public Data Genericization Where Clause Tutorial' href='#xmlpdgwct'>XML Public Data Genericization Where Clause Tutorial<\/a>, today?  Well &#8230;<\/p>\n<ul>\n<li>we &#8220;dip our toes&#8221; into XML attributes in terms of &#8230;\n<ol>\n<li>expressing them in a SELECT list <font size=1>(if you&#8217;ll pardon the SQL)<\/font> &#8230; and we want to learn more about XPath and &#8230;<\/li>\n<li>using them in the XPath equivalent of SQL &#8220;where&#8221; clause <font size=1>&#8230; we got working for text() use with an XML node&#8217;s innerHTML<\/font> <font size=1>(if you&#8217;ll pardon the HTML)<\/font> rather than attribute filtering<\/li>\n<\/ol>\n<p> &#8230; especially in relation to &#8230;\n<\/li>\n<li>we introduce some downloaded <a target=_blank title='WorldBank Public XML Life Expectancy at Birth ... thanks' href='https:\/\/data.worldbank.org\/indicator\/SP.DYN.LE00.IN'>WorldBank Public XML Life Expectancy at Birth<\/a> data <font size=1>(which uses attributes)<\/font> &#8230; leading us to a &#8230;<br \/>\n<blockquote><p>\nWorld Development Bank &#8211; Life Expectancy at Birth &#8211; Aruba\n<\/p><\/blockquote>\n<p> &#8230; involving an XPath conduit &#8230;<br \/>\n<code><br \/>\n\/\/field[text() = 'Aruba']\/..\/*[@name='Value' or @name='Country or Area' or @name='Year']<br \/>\n<\/code><br \/>\n &#8230; to this <a target=_blank title='World Development Bank - Life Expectancy at Birth - Aruba' href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/histogram_pie.htm?xtitle=World+Development+Bank+-+Life+Expectancy+at+Birth+-+Aruba&#038;lopts=&#038;ropts=&#038;xurl=%2F%2Fwww.rjmprogramming.com.au%2FHTMLCSS%2FAPI_SP.DYN.LE00.IN_DS2_en_xml_v2_6297866.xml&#038;xbasis=count&#038;xcountbasisposition=0&#038;xpath=%2F%2Ffield%5Btext%28%29+%3D+%27Aruba%27%5D%2F..%2F*%5B%40name%3D%27Value%27+or+%40name%3D%27Country+or+Area%27+or+%40name%3D%27Year%27%5D&#038;xdelim=%7E'>report<\/a>\n<\/li>\n<li>resizing either or both of &#8230;\n<ol>\n<li>Google Chart aesthetics and other features as options applied to the Google Charts &#8230; via Javascript prompt windows suggesting a bit of reading and research &#8230;<\/li>\n<li>size of HTML iframe hosting the Google Chart &#8230; via yellow border double clicking (to magnify) or right click (to shrink)<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p> &#8230; in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/histogram_pie.html------GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/histogram_pie.html------GETME\">histogram_pie.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/histogram_pie.html\">web application<\/a> for you to try.<\/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\/xml-public-data-genericization-attributes-tutorial\/'>XML Public Data Genericization Attributes Tutorial<\/a>.<\/p-->\n<hr>\n<p id='xmlpdgwct'>Previous relevant <a target=_blank title='XML Public Data Genericization Where Clause Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/xml-public-data-genericization-where-clause-tutorial\/'>XML Public Data Genericization Where Clause Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/histogram_pie.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"XML Public Data Genericization Where Clause Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/histogram_pie_where_clause.jpg\" title=\"XML Public Data Genericization Where Clause Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">XML Public Data Genericization Where Clause Tutorial<\/p><\/div>\n<p>If you&#8217;re like me, regarding online data, you work it in your mind to work in with <a target=_blank title='SQL information' href='https:\/\/www.google.com\/search?q=sql&#038;rlz=1C5CHFA_enAU973AU973&#038;oq=sql&#038;aqs=chrome..69i57j0i67i131i433j0i67j0i67i131i433j0i67i433j0i67l2j69i65.1871j0j4&#038;sourceid=chrome&#038;ie=UTF-8'>SQL<\/a> statements, in a relational database sense.<\/p>\n<p>In that sense, the first two of the three ways <font size=1>(while the third reminding us more of the <a target=_blank title='DDL' href='https:\/\/www.google.com\/search?q=DDL&#038;rlz=1C5CHFA_enAU973AU973&#038;oq=DDL&#038;gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIGCAEQRRg5MgYIAhBFGDzSAQc4MTFqMGo0qAIAsAIA&#038;sourceid=chrome&#038;ie=UTF-8'>DDL<\/a> side of things)<\/font> we come at improvements to our Public XML Data Google Chart Display web application have SQL corollaries for the XML XPath methodologies we&#8217;re deploying here &#8230;<\/p>\n<ul>\n<li>we start catering for XPath&#8217;s equivalent to SQL&#8217;s &#8220;WHERE&#8221; clause &#8230; our Javascript addfieldname function bearing the brunt of more intense coding complications via new dropdown options where user &#8220;WHERE&#8221; clauses can be asked about &#8230;<br \/>\n<code><br \/>\nfunction addfieldname(osel) {<br \/>\n  var wc='', little=osel.value.replace(\/\\=$\/g, ''), andw=' and ', dotdot='';<br \/>\n  if (osel.value != '') {<br \/>\n   if (osel.value.slice(-1) == '=') {<br \/>\n   if (document.getElementById('xpath').value.indexOf(']\/') == -1) {<br \/>\n   wc=prompt('Optionally enter a \"where\" type of clause (adding to our start for you) ... ' + String.fromCharCode(10) + ' eg. ' + little + '=\"lookfor\"' + String.fromCharCode(10) + ' eg. ' + little + '!=\"notlookfor\"' + String.fromCharCode(10) + ' eg. ' + little + '&lt;998', little);<br \/>\n   } else {<br \/>\n   little=' and ' + osel.value.replace(\/\\=$\/g, '');<br \/>\n   wc=prompt('Optionally add an \"and\" subclause to your existant \"where\" type of clause (adding to our subclause start for you) ... ' + String.fromCharCode(10) + ' eg. ' + little + '=\"lookfor\"' + String.fromCharCode(10) + ' eg. ' + little + '!=\"notlookfor\"' + String.fromCharCode(10) + ' eg. ' + little + '&lt;998', little);<br \/>\n   }<br \/>\n   if (wc == null) { wc=''; }<br \/>\n   if (wc.trim() != '' && wc != little) {<br \/>\n    if (document.getElementById('xpath').value.indexOf(']\/') == -1) {<br \/>\n    document.getElementById('xpath').value=document.getElementById('xpath').value.replace('\/' + document.getElementById('xpath').value.split('\/')[eval(-1 +  document.getElementById('xpath').value.split('\/').length)], '[]\/' + document.getElementById('xpath').value.split('\/')[eval(-1 +  document.getElementById('xpath').value.split('\/').length)]);<br \/>\n    document.getElementById('xpath').value=document.getElementById('xpath').value.replace(']\/', wc.replace(\/\\]$\/g,'').replace(\/^\\[\/g,'') + ']\/');<br \/>\n    document.getElementById('myfldselopt').innerText=('Optionally display selected field name(s) value(s)').replace('Optionally display selected field name(s) value(s)','Optionally display selected field name(s) [' + document.getElementById('xpath').value.split('[')[1].split(']')[0] + '] value(s)') + ' ...' + document.getElementById('myfldselopt').innerText.split(' ...')[1]<br \/>\n    } else {<br \/>\n    if (wc.toLowerCase().replace(\/^\\ or\\ \/g, ' and ').indexOf(' and ') == 0) {<br \/>\n    andw='';<br \/>\n    } else {<br \/>\n    document.getElementById('xpath').value=document.getElementById('xpath').value.replace(']\/' + document.getElementById('xpath').value.split('\/')[eval(-1 +  document.getElementById('xpath').value.split('\/').length)], andw + ']\/' + document.getElementById('xpath').value.split('\/')[eval(-1 +  document.getElementById('xpath').value.split('\/').length)]);<br \/>\n    }<br \/>\n    document.getElementById('xpath').value=document.getElementById('xpath').value.replace(']\/', wc.replace(\/\\]$\/g,'').replace(\/^\\[\/g,'') + ']\/');<br \/>\n    document.getElementById('myfldselopt').innerText=('Optionally display selected field name(s) value(s)').replace('Optionally display selected field name(s) value(s)','Optionally display selected field name(s) [' + document.getElementById('xpath').value.split('[')[1].split(']')[0] + '] value(s)') + ' ...' + document.getElementById('myfldselopt').innerText.split(' ...')[1]<br \/>\n    }<br \/>\n    dotdot=document.getElementById('xtitle').value.replace(document.getElementById('xtitle').value.split(' .. ')[0], '');<br \/>\n    \/\/alert(dotdot + ' ... ' + document.getElementById('xtitle').value);<br \/>\n    document.getElementById('xtitle').value=document.getElementById('xtitle').value.split(' -- ')[0].split((' .... ' + (document.getElementById('myfldselopt').innerText + '[]').split('[')[1].split(']')[0] + ' .. ').replace(\/^\\ \\.\\.\\.\\ \\ \\.\\.\\ \/g, ' .. '))[0] + (' .... ' + (document.getElementById('myfldselopt').innerText + '[]').split('[')[1].split(']')[0] + ' .. ').replace(\/^\\ \\.\\.\\.\\ \\ \\.\\.\\ \/g, ' .. ') + dotdot;<br \/>\n   }<br \/>\n   osel.value='';<br \/>\n   } else {<br \/>\n   if (document.getElementById('xpath').value.indexOf('\/*[self::') == -1) {<br \/>\n    document.getElementById('sask').innerHTML=saskih;<br \/>\n    document.getElementById('xpath').value=document.getElementById('xpath').value.replace('\/' + document.getElementById('xpath').value.split('\/')[eval(-1 +  document.getElementById('xpath').value.split('\/').length)], '\/*[self::' + osel.value + ']');<br \/>\n    document.getElementById('myfldselopt').innerText=document.getElementById('myfldselopt').innerText.split(' ...')[0] + ' ... ' + osel.value;<br \/>\n    document.getElementById('xtitle').value=document.getElementById('xtitle').value.split(' -- ')[0].split((' .... ' + (document.getElementById('myfldselopt').innerText + '[]').split('[')[1].split(']')[0] + ' .. ').replace(\/^\\ \\.\\.\\.\\ \\ \\.\\.\\ \/g, ' .. '))[0] + (' .... ' + (document.getElementById('myfldselopt').innerText + '[]').split('[')[1].split(']')[0] + ' .. ').replace(\/^\\ \\.\\.\\.\\ \\ \\.\\.\\ \/g, ' .. ') + osel.value;<br \/>\n   } else {<br \/>\n    document.getElementById('xpath').value=document.getElementById('xpath').value.replace(\/\\]$\/g, ' or self::' + osel.value + ']');<br \/>\n    document.getElementById('myfldselopt').innerText+=',' + osel.value;<br \/>\n    dotdot=document.getElementById('xtitle').value.replace(document.getElementById('xtitle').value.split(' .. ')[0], '');<br \/>\n    document.getElementById('xtitle').value=document.getElementById('xtitle').value.split(' -- ')[0].split((' .... ' + (document.getElementById('myfldselopt').innerText + '[]').split('[')[1].split(']')[0] + ' .. ').replace(\/^\\ \\.\\.\\.\\ \\ \\.\\.\\ \/g, ' .. '))[0] + (' .... ' + (document.getElementById('myfldselopt').innerText + '[]').split('[')[1].split(']')[0] + ' .. ').replace(\/^\\ \\.\\.\\.\\ \\ \\.\\.\\ \/g, ' .. ') + dotdot + ',' + osel.value;<br \/>\n   }<br \/>\n   osel.value='';<br \/>\n   }<br \/>\n  }<br \/>\n}<br \/>\n<\/code>\n<\/li>\n<li>we &#8220;dip our toes&#8221; into catering for sorted data which is akin to SQL&#8217;s &#8220;ORDER BY&#8221; clause &#8230; our version of &#8220;dip our toes&#8221; looking for cases of date format YYYY-MM-DDThh:mm:ss style data we are always interested in sorting &#8230;<br \/>\n<code><br \/>\n     var numtabcols=[], recsare=[], kin=0, okayhere=true, swaponeandzero=false;<br \/>\n     <br \/>\n          numtabcols=datasofar.split('~')[1].split('~')[0].split(String.fromCharCode(32));<br \/>\n          if (eval('' + numtabcols.length) &gt;= 2) {<br \/>\n                    if (eval('' + numtabcols.length) &gt; 2) {<br \/>\n                      for (kin=2; kin&lt;eval('' + numtabcols.length); kin++) {<br \/>\n                        if (numtabcols[kin].trim() == '') {<br \/>\n                           okayhere=false;<br \/>\n                        } else if (numtabcols[kin].trim().replace(\/\\.\/g,'').replace(\/\\-\/g,'').replace(\/0\/g,'').replace(\/1\/g,'').replace(\/2\/g,'').replace(\/3\/g,'').replace(\/4\/g,'').replace(\/5\/g,'').replace(\/6\/g,'').replace(\/7\/g,'').replace(\/8\/g,'').replace(\/9\/g,'') != '') {<br \/>\n                           okayhere=false;<br \/>\n                        }<br \/>\n                      }<br \/>\n                    }<br \/>\n                 console.log('okayhere=' + okayhere + ' and numtabs.length=' + numtabcols.length);<br \/>\n            if (numtabcols[1].trim() != '' && okayhere) {<br \/>\n              if (numtabcols[1].indexOf('T') == 10) { swaponeandzero=true;  }<br \/>\n                 console.log('Okayhere=' + okayhere + ' and numtabs.length=' + numtabcols.length + ' +++ ' + datasofar.split('~')[1].split('~')[0] + ' ... ' + numtabcols[1]);<br \/>\n              if (swaponeandzero || numtabcols[1].trim().replace(\/\\.\/g,'').replace(\/\\-\/g,'').replace(\/0\/g,'').replace(\/1\/g,'').replace(\/2\/g,'').replace(\/3\/g,'').replace(\/4\/g,'').replace(\/5\/g,'').replace(\/6\/g,'').replace(\/7\/g,'').replace(\/8\/g,'').replace(\/9\/g,'') == '') {<br \/>\n                 console.log('OkayHere=' + okayhere + ' and numtabs.length=' + numtabcols.length);<br \/>\n                console.log(datasofar);<br \/>\n                \/\/ [~2011-12-01T00:00:00 22.88~,2]<br \/>\n                var inpts=datasofar.split('[');<br \/>\n                var origst='', newst='', arrorig=[];<br \/>\n                for (var jinpts=1; jinpts&lt;inpts.length; jinpts++) {<br \/>\n                  origst='[' + inpts[jinpts].split(']')[0] + ']';<br \/>\n                  arrorig=origst.split(' ');<br \/>\n                  if (eval('' + arrorig.length) &gt;= 2) {<br \/>\n                    \/\/newst=arrorig[0] + '~,' + arrorig[1].split('~')[0].replace(\/\\ \/g, ',') + ']';<br \/>\n                    if (swaponeandzero) {<br \/>\n                    newst='[~' + arrorig[1] + '~,' + arrorig[0].replace('[~','') + ',' + origst.split(arrorig[1] + ' ')[1].split('~')[0].replace(\/\\ \/g, ',') + ']';<br \/>\n                    } else {<br \/>\n                    newst=arrorig[0] + '~,' + origst.replace(arrorig[0] + ' ','').split('~')[0].replace(\/\\ \/g, ',') + ']';<br \/>\n                    }<br \/>\n                    datasofar=datasofar.replace(origst, newst);<br \/>\n                    document.getElementById('xlvalue').value='Measure';<br \/>\n                    document.getElementById('xbvalue').value='Measure';<br \/>\n                    if (eval('' + arrorig.length) &gt; 2) {<br \/>\n                      for (kin=2; kin&lt;=eval('' + arrorig.length); kin++) {<br \/>\n                    document.getElementById('xlvalue').value+=',Measure';<br \/>\n                    document.getElementById('xbvalue').value+=',Measure';<br \/>\n                      }<br \/>\n                    }<br \/>\n                  }<br \/>\n                }<br \/>\n                    recsare=datasofar.split(',[');<br \/>\n                    \/\/alert(datasofar.substring(0,40).replace(\/\\ \/g,'x') + ' ... ' + recsare.length);<br \/>\n                    recsare.sort();<br \/>\n                    datasofar='';<br \/>\n                    for (kin=1; kin&lt;recsare.length; kin++) {<br \/>\n                     datasofar+=',[' + recsare[kin].trim() + ' ';<br \/>\n                    }<br \/>\n                    \/\/alert(datasofar);<br \/>\n                    console.log('sort=' + datasofar);<br \/>\n              }<br \/>\n            }<br \/>\n          }<br \/>\n<br \/> <br \/>\n          if (datasofar.split('~')[1].split('~')[0].indexOf('T') == 10 && eval('' + recsare.length) == 0) {<br \/>\n                    recsare=datasofar.split(',[');<br \/>\n                    \/\/alert(datasofar.substring(0,40).replace(\/\\ \/g,'x') + ' ... ' + recsare.length);<br \/>\n                    recsare.sort();<br \/>\n                    datasofar='';<br \/>\n                    for (kin=1; kin&lt;recsare.length; kin++) {<br \/>\n                     datasofar+=',[' + recsare[kin].trim() + ' ';<br \/>\n                    }<br \/>\n                    console.log('sort=' + datasofar);<br \/>\n          }<br \/>\n<\/code>\n<\/li>\n<li>we add a field name &#8220;data type&#8221; into the mix<\/li>\n<\/ul>\n<p>And so, further to yesterday&#8217;s <a title='XML Public Data Genericization Field Names Tutorial' href='#xmlpdgfnt'>XML Public Data Genericization Field Names Tutorial<\/a> we have an <a target=_blank href='http:\/\/data.cityofnewyork.us\/api\/views\/c3uy-2p5r\/rows.xml' title='Thanks'>&#8220;Air Quality in New York USA&#8221;<\/a> &#8230;<\/p>\n<p><code><br \/>\n\/response\/row\/row[name='Nitrogen dioxide (NO2)' and geo_place_name='Bedford Stuyvesant - Crown Heights']\/*[self::start_date or self::data_value]<br \/>\n<\/code><\/p>\n<p> &#8230; XML XPath idea presented with some <font size=1>(of what we&#8217;ll have trouble not thinking of as)<\/font> &#8220;WHERE&#8221; clauses, as well as being a small enough dataset, as to suit more more devices trying this in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/histogram_pie.html-----GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/histogram_pie.html-----GETME\">histogram_pie.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/histogram_pie.html\">web application<\/a> for you to try.<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/histogram_pie_where_clause_more.jpg\"><\/img><\/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\/xml-public-data-genericization-where-clause-tutorial\/'>XML Public Data Genericization Where Clause Tutorial<\/a>.<\/p-->\n<hr>\n<p id='xmlpdgfnt'>Previous relevant <a target=_blank title='XML Public Data Genericization Field Names Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/xml-public-data-genericization-field-names-tutorial\/'>XML Public Data Genericization Field Names Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/histogram_pie.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"XML Public Data Genericization Field Names Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/histogram_pie_geo.jpg\" title=\"XML Public Data Genericization Field Names Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">XML Public Data Genericization Field Names Tutorial<\/p><\/div>\n<p>We come at improvements to the functionality of yesterday&#8217;s <a title='XML Public Data Genericization XPath Tutorial' href='#xmlpdgxpt'>XML Public Data Genericization XPath Tutorial<\/a>&#8216;s XML Public Data <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\">Google Charts<\/a> Display web application from two angles &#8230;<\/p>\n<ul>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/histogram_pie.html---GETME\">we allow for<\/a> an &#8220;early days&#8221; Geocoding data Google Chart <a target=_blank title='Google Chart Geo Chart information from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart'>Geo Chart<\/a> display option &#8230; &#8220;early days&#8221; because we took advantage of some obvious conditions <font size=1>(ie. within data a <i>POINT (longitude latitude)<\/i> data format was being used)<\/font> in the data we tested with, but &#8220;data being data&#8221; am sure we need to test more XML data here &#8230; and &#8230;<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/histogram_pie.html----GETME\">we add in<\/a> an XML data field name dropdown the user can use to tailor what fields comprise what they are interested in (using Ajax laced Javascript code below) &#8230;<br \/>\n<code><br \/>\n function stateChanged() {<br \/>\n if (myxhr.readyState == 4) {<br \/>\n  if (myxhr.status == 200) {<br \/>\n         var fns=myxhr.responseText.split('\"fieldName\" : \"');<br \/>\n         for (var ifns=1; ifns&lt;fns.length; ifns++) {<br \/>\n           if (ifns == 1) {<br \/>\n            arrflds=[];<br \/>\n            fieldsel='&nbsp;&nbsp;or&nbsp;&nbsp;&lt;select onchange=addfieldname(this); id=myfldsel&gt;&lt;option id=myfldselopt value=\"\"&gt;Optionally display selected field name(s) value(s) ...&lt;\/option&gt;&lt;\/select&gt;';<br \/>\n           }<br \/>\n           if (fns[ifns].indexOf(':@') != 0 && fns[ifns].trim() != '') {<br \/>\n           arrflds.push(fns[ifns].split('\"')[0]);<br \/>\n           fieldsel=fieldsel.replace('&lt;\/select&gt;', '&lt;option value=\"' + fns[ifns].split('\"')[0] + '\"&gt;' + fns[ifns].split('\"')[0] + '&lt;\/option&gt;&lt;\/select&gt;');<br \/>\n           }<br \/>\n         }<br \/>\n         if (document.getElementById('spanflds')) {<br \/>\n           document.getElementById('spanflds').innerHTML=fieldsel;<br \/>\n         }<br \/>\n  }<br \/>\n }<br \/>\n}<br \/>\n<br \/>\n    var xurlis=location.search.split('xurl=')[1] ? decodeURIComponent(location.search.split('xurl=')[1].split('&')[0]).replace(\/\\+\/g,' ') : \"\/\/data.ny.gov\/api\/views\/d6yy-54nr\/rows.xml\";<br \/>\n<br \/>\n    var arrflds=[];<br \/>\n    var myxhr = new XMLHttpRequest();<br \/>\n    myxhr.open('GET', xurlis.replace('\/' + xurlis.split('\/')[eval(-1 + xurlis.split('\/').length)], '\/'), true);<br \/>\n    myxhr.responseType = \"text\";<br \/>\n    myxhr.onreadystatechange=stateChanged;<br \/>\n    myxhr.send(null);<br \/>\n<\/code><br \/>\n &#8230; to pass onto the Google Chart displays<\/li>\n<\/ul>\n<p> &#8230; in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/histogram_pie.html-----GETME\">histogram_pie.html<\/a> with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/histogram_pie.html\">this link<\/a> there for you to try it out for yourself.<\/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\/xml-public-data-genericization-field-names-tutorial\/'>XML Public Data Genericization Field Names Tutorial<\/a>.<\/p-->\n<hr>\n<p id='xmlpdgxpt'>Previous relevant <a target=_blank title='XML Public Data Genericization XPath Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/xml-public-data-genericization-xpath-tutorial\/'>XML Public Data Genericization XPath Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/histogram_pie.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"XML Public Data Genericization XPath Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/histogram_pie_lb.jpg\" title=\"XML Public Data Genericization XPath Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">XML Public Data Genericization XPath Tutorial<\/p><\/div>\n<p>You might have gathered from our current blog posting thread that XML <a target=_blank title='XML XPath information from W3scholls' href='https:\/\/www.w3schools.com\/xml\/xpath_intro.asp'>XPath<\/a> usage can be a bit of an art form.  As such, we&#8217;ve had a day of XPath tweaking, such that an XML XPath path like &#8230;<\/p>\n<table>\n<tr>\n<th>Be prompted <font size=1>(thanks to <a target=_blank title='Useful link' href='https:\/\/www.w3schools.com\/xml\/xpath_axes.asp'>this useful link<\/a>)<\/font><\/th>\n<th>Concatenate two fields into one <font size=1>(thanks to <a target=_blank title='Useful link' href='https:\/\/stackoverflow.com\/questions\/38502517\/xpath-child-of-multiple-types'>this useful link<\/a>)<\/font><\/th>\n<\/tr>\n<tr>\n<td style=vertical-align:top;>\n<code><br \/>\n\/response\/row\/row\/child::*<br \/>\n<\/code>\n<\/td>\n<td style=vertical-align:top;>\n<code><br \/>\n\/response\/row\/row\/*[self::make or self::model]<br \/>\n<\/code>\n<\/td>\n<\/tr>\n<\/table>\n<p> &#8230; ideas may interest some people reading this blog posting, we&#8217;re hoping.<\/p>\n<p>This also got us to consider using <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\">Google Chart<\/a> &#8230;<\/p>\n<ul>\n<li>Column Chart<\/li>\n<li>Bar Chart<\/li>\n<\/ul>\n<p> &#8230; to output findings when the user is deciding to deploy some of these ideas, extending the work of yesterday&#8217;s <a title='XML Public Data Genericization Sharing Tutorial' href='#xmlpdgst'>XML Public Data Genericization Sharing Tutorial<\/a> with respect to <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/histogram_pie.html---GETME\">the changed<\/a> new version of our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/histogram_pie.html---GETME\">histogram_pie.html<\/a> arrangement with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/histogram_pie.html\">this link<\/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-xml-public-data-genericization-sharing-tutorial\/'>XML Public Data Genericization Sharing Tutorial<\/a>.<\/p-->\n<hr>\n<p id='xmlpdgst'>Previous relevant <a target=_blank title='XML Public Data Genericization Sharing Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/xml-public-data-genericization-sharing-tutorial\/'>XML Public Data Genericization Sharing Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/histogram_pie.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"XML Public Data Genericization Sharing Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/histogram_pie_ideas.jpg\" title=\"XML Public Data Genericization Sharing Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">XML Public Data Genericization Sharing Tutorial<\/p><\/div>\n<p>It can be some job to decouple <font size=1>hardcopy<\/font> &#8220;particulars&#8221; of a web application &#8220;starting scenario&#8221; to &#8220;the ultimate genericization solution&#8221;, and, of course, often it is futile to try.  But, further to yesterday&#8217;s <a title='Powerball Number Pick XML Genericization Tutorial' href='#pnpxmlgt'>Powerball Number Pick XML Genericization Tutorial<\/a> start on this, the &#8220;two elephants in the room&#8221; remaining beyond their welcome, would have to be &#8230;<\/p>\n<ul>\n<li>twinning <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\">Google Chart<\/a> Histograms and Pie Charts &#8230; as the <font size=1>only<\/font> output means &#8230; and &#8230;<\/li>\n<li>XML &#8230; as the <font size=1>only<\/font> input data format<\/li>\n<\/ul>\n<p> &#8230; since &#8230;<\/p>\n<ul>\n<li>there are many other chart types &#8230; and &#8230;<\/li>\n<li>there are many other data formats &#8230; as a peruse of USA&#8217;s <a target=_blank title='data.gov' href='https:\/\/data.gov\/'>data.gov<\/a> will undoubtedly show you<\/li>\n<\/ul>\n<p>That second &#8220;XML&#8221; decoupling, of course, to many a programmer <font size=1>(but maybe so ho hum to non-programmers)<\/font> &#8220;turns their wooooooorrrrrrrllllllllddddd upside down&#8221; <font size=1>(and nobody wants to be confronted by a &#8220;dddddllllllllrrrrrrrooooooow&#8221; on the loose)<\/font>, while we can imagine, fairly easily, starting to incorporate other apt Google Chart types into the mix.  But we have to walk before we run, or even amble.  And so, today, along with &#8230;<\/p>\n<ul>\n<li>sharing (via email or SMS, covered by adding two new relevant form buttons with type=submit) code &#8230;<br \/>\n<code><br \/>\nvar xsmsis=location.search.split('sms=')[1] ? decodeURIComponent(location.search.split('sms=')[1].split('&')[0]).replace(\/\\+\/g,' ').replace(\/^SMS$\/g, '') : \"\";<br \/>\nvar xemailis=location.search.split('email=')[1] ? decodeURIComponent(location.search.split('email=')[1].split('&')[0]).replace(\/\\+\/g,' ').replace(\/^Email$\/g, ' ') : (document.URL.indexOf('email=') != -1 ? \" \" : \"\");<br \/>\n<br \/>\nif (xsmsis.trim() != '' && xsmsis.replace(\/\\,\/g,'').trim().replace(\/0\/g,'').replace(\/1\/g,'').replace(\/2\/g,'').replace(\/3\/g,'').replace(\/4\/g,'').replace(\/5\/g,'').replace(\/6\/g,'').replace(\/7\/g,'').replace(\/8\/g,'').replace(\/9\/g,'') == '') {<br \/>\n  aso = document.createElement(\"a\");<br \/>\n  document.body.appendChild(aso);<br \/>\n  aso.style = \"display: none\";<br \/>\n  aso.href = 'sms:' + xsmsis + '&body=' + encodeURIComponent(document.URL.replace('&email=', '&emNOWAYail=').replace('&sms=', '&smNOWAYs='));<br \/>\n  aso.click();<br \/>\n    setTimeout(() =&gt; {<br \/>\n        document.body.removeChild(aso);<br \/>\n    }, 100);<br \/>\n}<br \/>\n<br \/>\nif (xemailis != '') {<br \/>\n  aeo = document.createElement(\"a\");<br \/>\n  document.body.appendChild(aeo);<br \/>\n  aeo.style = \"display: none\";<br \/>\n  aeo.href = 'mailto:' + xemailis.trim() + '?subject=Google%20Chart%20Histogram%20and%20Pie%20Chart%20XML%20Data%20Display%20...&body=' + encodeURIComponent(document.URL.replace('&email=', '&emNOWAYail=').replace('&sms=', '&smNOWAYs='));<br \/>\n  aeo.click();<br \/>\n    setTimeout(() =&gt; {<br \/>\n        document.body.removeChild(aeo);<br \/>\n    }, 100);<br \/>\n}<br \/>\n<\/code><br \/>\n &#8230; we &#8230;<\/li>\n<li>introduce an &#8220;Ideas &#8230;&#8221; dropdown &#8230; with its onchange event logic below &#8230;<br \/>\n<code><br \/>\nfunction populate(selo) {<br \/>\n   if (selo.value.trim() != '') {<br \/>\n     var pts=selo.value.split('#');<br \/>\n     for (var ipts=0; ipts<pts.length; ipts++) { \n\n       switch (ipts) {<br \/>\n        case 0:<br \/>\n         document.getElementById('xurl').value=pts[ipts];<br \/>\n         if (pts[ipts].indexOf('\/\/data.ny.gov\/api\/views\/d6yy-54nr\/rows.xml') == -1) {<br \/>\n           document.getElementById('xbasis').value='count';<br \/>\n           document.getElementById('xcountbasisposition').value='0';<br \/>\n           document.getElementById('xcountbasisposition').type='number';<br \/>\n         }<br \/>\n         break;<br \/>\n       <br \/>\n        case 1:<br \/>\n         document.getElementById('xpath').value=pts[ipts];<br \/>\n         break;<br \/>\n       <br \/>\n        case 2:<br \/>\n         document.getElementById('xtitle').value=pts[ipts];<br \/>\n         break;<br \/>\n       <br \/>\n        case 3:<br \/>\n         document.getElementById('xdelim').value=pts[ipts].replace('+',' ');<br \/>\n         break;<br \/>\n       <br \/>\n        case 3:<br \/>\n         document.getElementById('xbasis').value=pts[ipts].replace('+',' ');<br \/>\n         break;<br \/>\n         <br \/>\n        default:<br \/>\n         break;<br \/>\n       <br \/>\n       }<br \/>\n     }<br \/>\n   <br \/>\n   }<br \/>\n<br \/>\n}<br \/>\n<\/code><br \/>\n &#8230; where we help the user fill out those tricky &#8220;form textbox asks&#8221; for data sets with topics of interest<\/li>\n<\/ul>\n<p> &#8230; and we hope by experimenting along these lines of thought, we&#8217;ll chip away at it, and make some other Google Chart types come into play, into the future, with this current Public XML Data URL Based web application we have going.<\/p>\n<p>And so, feel free to try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/histogram_pie.html--GETME\">the changed<\/a> new version of our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/histogram_pie.html--GETME\">histogram_pie.html<\/a> arrangement with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/histogram_pie.html\">this link<\/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\/xml-public-data-genericization-sharing-tutorial\/'>XML Public Data Genericization Sharing Tutorial<\/a>.<\/p-->\n<hr>\n<p id='pnpxmlgt'>Previous relevant <a target=_blank title='Powerball Number Pick XML Genericization Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/powerball-number-pick-xml-genericization-tutorial\/'>Powerball Number Pick XML Genericization Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/histogram_pie.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Powerball Number Pick XML Genericization Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/histogram_pie_form.jpg\" title=\"Powerball Number Pick XML Genericization Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Powerball Number Pick XML Genericization Tutorial<\/p><\/div>\n<p>There have been many projects where we start with hardcoded wording involved in the webpage, and then to move on, we parameterize (or genericize) those hardcodings via &#8230;<\/p>\n<ul>\n<li>HTML form &#8230; user data collection &#8230;<\/li>\n<li>gathered together via a method=GET form into an &#8220;argument rich&#8221; follow up URL navigation &#8230; calling the same webpage &#8230;<\/li>\n<li>and displaying results according to those user defined HTML form inputs<\/li>\n<\/ul>\n<p>Yesterday&#8217;s <a title='Powerball Number Pick Counts XML Tutorial' href='#pnpcxmlt'>Powerball Number Pick Counts XML Tutorial<\/a> project is no different.  We saw that potential hardcodings were to do with &#8230;<\/p>\n<ul>\n<li>chart title<\/li>\n<li>XML data public URL<\/li>\n<li>XML XPath<\/li>\n<li>data delimiter<\/li>\n<\/ul>\n<p> &#8230; and then we stopped and thought a bit about &#8220;value adding&#8221;.  Was &#8220;Count&#8221; as a &#8220;measure basis&#8221; the only &#8220;measure basis&#8221; of any relevance for the Histograms and Pie Charts?  In the end we continued &#8230;<\/p>\n<ul>\n<li>Count &#8230; as the default &#8220;measure basis&#8221; &#8230; to which we added (all reducing a set of numbers to one representative value in the case of Powerball Winning Numbers, at least) &#8230;<\/li>\n<li>Count of an ordinal position according to the data delimiter and the data itself (doh!)<\/li>\n<li>Mean (if numerical)<\/li>\n<li>Median (if numerical)<\/li>\n<li>Mode (if numerical)<\/li>\n<li>Sum (if numerical)<\/li>\n<li>Range (if numerical)<\/li>\n<li>Standard Deviation (if numerical)<\/li>\n<\/ul>\n<p> &#8230; could all be &#8220;value add&#8221; evaluations a user might find interesting, even just playing around with the Powerball NY US 2010 XML data.<\/p>\n<p><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/histogram_pie.html-GETME\">See how we got to<\/a> our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/histogram_pie.html-GETME\">more generic HTML and Javascript histogram_pie.html<\/a> arrangement with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/histogram_pie.html\">this link<\/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\/powerball-number-pick-xml-genericization-tutorial\/'>Powerball Number Pick XML Genericization Tutorial<\/a>.<\/p-->\n<hr>\n<p id='pnpcxmlt'>Previous relevant <a target=_blank title='Powerball Number Pick Counts XML Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/powerball-number-pick-counts-xml-tutorial\/'>Powerball Number Pick Counts XML Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/powerball_us_ny_winning_numbers_since_21010.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Powerball Number Pick Counts XML Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/powerball_ny.jpg\" title=\"Powerball Number Pick Counts XML Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Powerball Number Pick Counts XML Tutorial<\/p><\/div>\n<p>We&#8217;re starting a &#8230;<\/p>\n<ul>\n<li>public data source &#8230; repository based &#8230;<\/li>\n<li><a target=_blank title='XML information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/XML'>XML<\/a> &#8230; <a target=_blank title='XML data' href='https:\/\/data.ny.gov\/api\/views\/d6yy-54nr\/rows.xml'>data<\/a> based &#8230;<\/li>\n<li><a target=_blank title='Ajax information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Ajax_(programming)'>Ajax<\/a> &#8230; driven (and thanks to <a target=_blank title='XML data Ajax code' href='https:\/\/www.w3schools.com\/xml\/xpath_examples.asp'>W3Schools<\/a> here, for the XML XPath basis in code) &#8230;<\/li>\n<li>clientside web application &#8230; outputting, in this first draft (which is very &#8220;bare bones&#8221;), as outputs &#8230;<\/li>\n<li><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\">Google Charts<\/a> &#8230;\n<ol>\n<li><a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/histogram' title='Google Histogram Charts'>Histogram Chart<\/a><\/li>\n<li><a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/piechart' title='Google Pie Charts'>Pie Chart<\/a><\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p> &#8230; new <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/powerball_us_ny_winning_numbers_since_21010.html_GETME\">powerball_us_ny_winning_numbers_since_21010.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/powerball_us_ny_winning_numbers_since_21010.html\">web application<\/a> project today.  Why those two charts?  Well, they give different views of built up data pairings, involving two data members, one &#8220;subject item&#8221; (which today, happens to be numerical, but does not have to be) and the other numerical data item having a relationship with that &#8220;subject item&#8221; as a measure, in today&#8217;s case that being a count of &#8230;<\/p>\n<p><code><br \/>\nNew York State, US Powerball Number Pick Counts since 2010<br \/>\n<\/code><\/p>\n<p>Yes, you can glean many things from the public online data resources out there, today&#8217;s one for us coming from the US Governmental <a target=_blank title='data.gov XML data for Powerball draw in NY US' href='https:\/\/catalog.data.gov\/dataset?q=&#038;sort=views_recent+desc'>data.gov<\/a> &#8230; thanks all around.<\/p>\n<p>In the code, what is the crucial single codeline, at least for us?  <font color=blue>It&#8217;s<\/font> &#8230;<\/p>\n<table>\n<tr>\n<td>\n<details>\n<summary><\/summary>\n<p><code><br \/>\n<font size=1>var datasofar='', nums=[], ij=0, jk=0;<br \/>\nvar xhttp = new XMLHttpRequest();<br \/>\nxhttp.onreadystatechange = function() {<br \/>\n    if (this.readyState == 4 && this.status == 200) {<br \/>\n        showResult(xhttp.responseXML);<br \/>\n    }<br \/>\n};<br \/>\nxhttp.open(\"GET\", \"\/\/data.ny.gov\/api\/views\/d6yy-54nr\/rows.xml\", true);<br \/>\nxhttp.send();<br \/>\n<br \/>\nfunction showResult(xml) {<br \/>\n    var txt = \"\";<\/font><br \/>\n<\/code><br \/>\n<\/details>\n<p><code><br \/>\n    <font color=blue>path = \"\/<\/font><font color=magenta>response<\/font>\/<font color=silver>row<\/font>\/<font color=purple>row<\/font>\/<font color=brown>winning_numbers<\/font><font color=blue>\"<\/font><br \/>\n<\/code><\/p>\n<details>\n<summary><\/summary>\n<p><code><br \/>\n    <font size=1>if (xml.evaluate) {<br \/>\n        var nodes = xml.evaluate(path, xml, null, XPathResult.ANY_TYPE, null);<br \/>\n        var result = nodes.iterateNext();<br \/>\n        while (result) {<br \/>\n            txt += result.childNodes[0].nodeValue + \"&lt;br&gt;\";<br \/>\n    nums=('' + result.childNodes[0].nodeValue).split(' ');<br \/>\n    for (ii=0; ii&lt;nums.length; ii++) {<br \/>\n      if (datasofar.indexOf(',[~' + nums[ii] + '~,') == -1) {<br \/>\n       datasofar+=',[~' + nums[ii] + '~,1]';<br \/>\n      } else {<br \/>\n       jk=eval(datasofar.split(',[~' + nums[ii] + '~,')[1].split(']')[0]);<br \/>\n       datasofar=datasofar.replace(',[~' + nums[ii] + '~,' + jk + ']', ',[~' + nums[ii] + '~,' + eval(1 + jk) + ']');<br \/>\n      }<br \/>\n    }<br \/>\n            result = nodes.iterateNext();<br \/>\n        }<br \/>\n    \/\/ Code For Internet Explorer<br \/>\n    } else if (window.ActiveXObject || xhttp.responseType == \"msxml-document\") {<br \/>\n        xml.setProperty(\"SelectionLanguage\", \"XPath\");<br \/>\n        nodes = xml.selectNodes(path);<br \/>\n        for (i = 0; i &lt; nodes.length; i++) {<br \/>\n            txt += nodes[i].childNodes[0].nodeValue + \"&lt;br&gt;\";<br \/>\n    nums=('' + nodes[i].childNodes[0].nodeValue).split(' ');<br \/>\n    for (ii=0; ii&lt;nums.length; ii++) {<br \/>\n      if (datasofar.indexOf(',[~' + nums[ii] + '~,') == -1) {<br \/>\n       datasofar+=',[~' + nums[ii] + '~,1]';<br \/>\n      } else {<br \/>\n       jk=eval(datasofar.split(',[~' + nums[ii] + '~,')[1].split(']')[0]);<br \/>\n       datasofar=datasofar.replace(',[~' + nums[ii] + '~,' + jk + ']', ',[~' + nums[ii] + '~,' + eval(1 + jk) + ']');<br \/>\n      }<br \/>\n    }<br \/>\n        }<br \/>\n    }<br \/>\n    \/\/document.getElementById(\"demo\").innerHTML = txt;<br \/>\n    var proposed=document.getElementById('myi').src.split('&data=')[0] + '&data=' + datasofar;<br \/>\n    if (eval('' + proposed.length) &lt; 850) {<br \/>\n    document.getElementById('myi').src=document.getElementById('myi').src.split('&data=')[0] + '&data=' + datasofar;<br \/>\n    document.getElementById('mpi').src=document.getElementById('mpi').src.split('&data=')[0] + '&data=' + datasofar.replace(\/\\]\\,\\[\/g, ']%20,%20[').replace(',[', ',%20[');<br \/>\n    } else {<br \/>\n    document.getElementById('data').value=datasofar;<br \/>\n    document.getElementById('mybut').click();<br \/>\n    document.getElementById('datap').value=datasofar.replace(\/\\]\\,\\[\/g, '] , [').replace(',[', ', ['); \/\/ ,%20[~45~,23]%20,%20[~<br \/>\n    document.getElementById('mybutp').click();<br \/>\n    }<br \/>\n    document.getElementById('myi').style.display='block';<br \/>\n    document.getElementById('mpi').style.display='block';<br \/>\n}<\/font><br \/>\n<\/code><br \/>\n<\/details>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<code><br \/>\n<font color=magenta>&lt;response&gt;<\/font><br \/>\n<font color=silver>&lt;row&gt;<\/font><br \/>\n<font color=purple>&lt;row _id=\"row-nx2r_usun.g52b\" _uuid=\"00000000-0000-0000-9D99-B9EA775FDC5E\" _position=\"0\" _address=\"https:\/\/data.ny.gov\/resource\/d6yy-54nr\/row-nx2r_usun.g52b\"&gt;<\/font><br \/>\n&lt;draw_date&gt;2020-09-26T00:00:00&lt;\/draw_date&gt;<br \/>\n<font color=brown>&lt;winning_numbers&gt;11 21 27 36 62 24&lt;\/winning_numbers&gt;<\/font><br \/>\n&lt;multiplier&gt;3&lt;\/multiplier&gt;<br \/>\n&lt;\/row&gt;<br \/>\n<font color=purple>&lt;row _id=\"row-e8ru_54jr.pm4v\" _uuid=\"00000000-0000-0000-43B5-52ACB7706E11\" _position=\"0\" _address=\"https:\/\/data.ny.gov\/resource\/d6yy-54nr\/row-e8ru_54jr.pm4v\"&gt;<\/font><br \/>\n&lt;draw_date&gt;2020-09-30T00:00:00&lt;\/draw_date&gt;<br \/>\n<font color=brown>&lt;winning_numbers&gt;14 18 36 49 67 18&lt;\/winning_numbers&gt;<\/font><br \/>\n&lt;multiplier&gt;2&lt;\/multiplier&gt;<br \/>\n&lt;\/row&gt;<br \/>\n<font color=purple>&lt;row _id=\"row-tq8m.jys2~s8vu\" _uuid=\"00000000-0000-0000-A5B2-0AAE86635EA3\" _position=\"0\" _address=\"https:\/\/data.ny.gov\/resource\/d6yy-54nr\/row-tq8m.jys2~s8vu\"&gt;<\/font><br \/>\n&lt;draw_date&gt;2020-10-03T00:00:00&lt;\/draw_date&gt;<br \/>\n<font color=brown>&lt;winning_numbers&gt;18 31 36 43 47 20&lt;\/winning_numbers&gt;<\/font><br \/>\n&lt;multiplier&gt;2&lt;\/multiplier&gt;<br \/>\n&lt;\/row&gt;<br \/>\n<font color=purple>&lt;row _id=\"row-fyha_3jj2-8cdk\" _uuid=\"00000000-0000-0000-8755-E68E26427D31\" _position=\"0\" _address=\"https:\/\/data.ny.gov\/resource\/d6yy-54nr\/row-fyha_3jj2-8cdk\"&gt;<\/font><br \/>\n&lt;draw_date&gt;2020-10-07T00:00:00&lt;\/draw_date&gt;<br \/>\n<font color=brown>&lt;winning_numbers&gt;06 24 30 53 56 19&lt;\/winning_numbers&gt;<\/font><br \/>\n&lt;multiplier&gt;2&lt;\/multiplier&gt;<br \/>\n&lt;\/row&gt;<br \/>\n<font color=purple>&lt;row _id=\"row-t7k7-dhjv-h47w\" _uuid=\"00000000-0000-0000-EF27-CF03FBB38022\" _position=\"0\" _address=\"https:\/\/data.ny.gov\/resource\/d6yy-54nr\/row-t7k7-dhjv-h47w\"&gt;<\/font><br \/>\n&lt;draw_date&gt;2020-10-10T00:00:00&lt;\/draw_date&gt;<br \/>\n<font color=brown>&lt;winning_numbers&gt;05 18 23 40 50 18&lt;\/winning_numbers&gt;<\/font><br \/>\n&lt;multiplier&gt;3&lt;\/multiplier&gt;<br \/>\n&lt;\/row&gt;<br \/>\n\/\/ many more rows here<br \/>\n\/\/ end of many more rows<br \/>\n&lt;\/row&gt;<br \/>\n&lt;\/response&gt;<br \/>\n<\/code>\n<\/td>\n<\/tr>\n<\/table>\n<p> &#8230; this codeline&#8217;s &#8220;slicing through complexity&#8221; cut through, perfectly suited to the XML data scenario above, presenting those <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\">Google Chart<\/a> displays, as the end result.<\/p>\n<p><iframe src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/powerball_us_ny_winning_numbers_since_21010.html\" style=\"width:100%;height:600px;\"><\/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='#d62017' onclick='var dv=document.getElementById(\"d62017\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/xml\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d62017' 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='#d62032' onclick='var dv=document.getElementById(\"d62032\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/count\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d62032' 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='#d62038' onclick='var dv=document.getElementById(\"d62038\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/email\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d62038' 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='#d62044' onclick='var dv=document.getElementById(\"d62044\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/prompt\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d62044' 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='#d62051' onclick='var dv=document.getElementById(\"d62051\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/ajax\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d62051' 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='#d62067' onclick='var dv=document.getElementById(\"d62067\"); 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='d62067' 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='#d62076' onclick='var dv=document.getElementById(\"d62076\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/attribute\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d62076' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Where to with improving on yesterday&#8217;s XML Public Data Genericization Where Clause Tutorial, today? Well &#8230; we &#8220;dip our toes&#8221; into XML attributes in terms of &#8230; expressing them in a SELECT list (if you&#8217;ll pardon the SQL) &#8230; and &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/xml-public-data-genericization-attributes-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":[3187,1832,112,180,4615,4618,199,2774,290,301,4617,304,518,576,578,609,1577,3695,652,3277,932,4616,997,1044,1059,1173,2449,1186,1729,3189,1319,2580,4619,1428,1460,1495],"class_list":["post-62076","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-annotated-timeline-chart","tag-annotation","tag-attribute","tag-calendar","tag-calendar-chaer","tag-calendar-widget","tag-chart","tag-clause","tag-data","tag-date","tag-date-picker","tag-ddl","tag-google-chart","tag-html","tag-html5","tag-input","tag-interface","tag-interfacing","tag-javascript","tag-order-by","tag-php","tag-picker","tag-programming","tag-relational-database","tag-resize","tag-sort","tag-sorting","tag-sql","tag-timeline","tag-timeline-chart","tag-tutorial","tag-where","tag-where-clause","tag-widget","tag-worldbank","tag-yui"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/62076"}],"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=62076"}],"version-history":[{"count":5,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/62076\/revisions"}],"predecessor-version":[{"id":62081,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/62076\/revisions\/62081"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=62076"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=62076"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=62076"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}