XML Public Data Genericization Sharing Tutorial

Posted on by
XML Public Data Genericization Sharing Tutorial

XML Public Data Genericization Sharing Tutorial

It can be some job to decouple hardcopy “particulars” of a web application “starting scenario” to “the ultimate genericization solution”, and, of course, often it is futile to try. But, further to yesterday’s Powerball Number Pick XML Genericization Tutorial start on this, the “two elephants in the room” remaining beyond their welcome, would have to be …

  • twinning Google Chart Histograms and Pie Charts … as the only output means … and …
  • XML … as the only input data format

… since …

  • there are many other chart types … and …
  • there are many other data formats … as a peruse of USA’s data.gov will undoubtedly show you

That second “XML” decoupling, of course, to many a programmer (but maybe so ho hum to non-programmers) “turns their wooooooorrrrrrrllllllllddddd upside down” (and nobody wants to be confronted by a “dddddllllllllrrrrrrrooooooow” on the loose), 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 …

  • sharing (via email or SMS, covered by adding two new relevant form buttons with type=submit) code …

    var xsmsis=location.search.split('sms=')[1] ? decodeURIComponent(location.search.split('sms=')[1].split('&')[0]).replace(/\+/g,' ').replace(/^SMS$/g, '') : "";
    var xemailis=location.search.split('email=')[1] ? decodeURIComponent(location.search.split('email=')[1].split('&')[0]).replace(/\+/g,' ').replace(/^Email$/g, ' ') : (document.URL.indexOf('email=') != -1 ? " " : "");

    if (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,'') == '') {
    aso = document.createElement("a");
    document.body.appendChild(aso);
    aso.style = "display: none";
    aso.href = 'sms:' + xsmsis + '&body=' + encodeURIComponent(document.URL.replace('&email=', '&emNOWAYail=').replace('&sms=', '&smNOWAYs='));
    aso.click();
    setTimeout(() => {
    document.body.removeChild(aso);
    }, 100);
    }

    if (xemailis != '') {
    aeo = document.createElement("a");
    document.body.appendChild(aeo);
    aeo.style = "display: none";
    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='));
    aeo.click();
    setTimeout(() => {
    document.body.removeChild(aeo);
    }, 100);
    }

    … we …
  • introduce an “Ideas …” dropdown … with its onchange event logic below …

    function populate(selo) {
    if (selo.value.trim() != '') {
    var pts=selo.value.split('#');
    for (var ipts=0; ipts case 0:
    document.getElementById('xurl').value=pts[ipts];
    if (pts[ipts].indexOf('//data.ny.gov/api/views/d6yy-54nr/rows.xml') == -1) {
    document.getElementById('xbasis').value='count';
    document.getElementById('xcountbasisposition').value='0';
    document.getElementById('xcountbasisposition').type='number';
    }
    break;

    case 1:
    document.getElementById('xpath').value=pts[ipts];
    break;

    case 2:
    document.getElementById('xtitle').value=pts[ipts];
    break;

    case 3:
    document.getElementById('xdelim').value=pts[ipts].replace('+',' ');
    break;

    case 3:
    document.getElementById('xbasis').value=pts[ipts].replace('+',' ');
    break;

    default:
    break;

    }
    }

    }

    }

    … where we help the user fill out those tricky “form textbox asks” for data sets with topics of interest

… and we hope by experimenting along these lines of thought, we’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.

And so, feel free to try the changed new version of our histogram_pie.html arrangement with this link.

Previous relevant Powerball Number Pick XML Genericization Tutorial is shown below.

Powerball Number Pick XML Genericization Tutorial

Powerball Number Pick XML Genericization Tutorial

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 …

  • HTML form … user data collection …
  • gathered together via a method=GET form into an “argument rich” follow up URL navigation … calling the same webpage …
  • and displaying results according to those user defined HTML form inputs

Yesterday’s Powerball Number Pick Counts XML Tutorial project is no different. We saw that potential hardcodings were to do with …

  • chart title
  • XML data public URL
  • XML XPath
  • data delimiter

… and then we stopped and thought a bit about “value adding”. Was “Count” as a “measure basis” the only “measure basis” of any relevance for the Histograms and Pie Charts? In the end we continued …

  • Count … as the default “measure basis” … to which we added (all reducing a set of numbers to one representative value in the case of Powerball Winning Numbers, at least) …
  • Count of an ordinal position according to the data delimiter and the data itself (doh!)
  • Mean (if numerical)
  • Median (if numerical)
  • Mode (if numerical)
  • Sum (if numerical)
  • Range (if numerical)
  • Standard Deviation (if numerical)

… could all be “value add” evaluations a user might find interesting, even just playing around with the Powerball NY US 2010 XML data.

See how we got to our more generic HTML and Javascript histogram_pie.html arrangement with this link.

Previous relevant Powerball Number Pick Counts XML Tutorial is shown below.

Powerball Number Pick Counts XML Tutorial

Powerball Number Pick Counts XML Tutorial

We’re starting a …

  • public data source … repository based …
  • XML … data based …
  • Ajax … driven (and thanks to W3Schools here, for the XML XPath basis in code) …
  • clientside web application … outputting, in this first draft (which is very “bare bones”), as outputs …
  • Google Charts …
    1. Histogram Chart
    2. Pie Chart

… new powerball_us_ny_winning_numbers_since_21010.html web application project today. Why those two charts? Well, they give different views of built up data pairings, involving two data members, one “subject item” (which today, happens to be numerical, but does not have to be) and the other numerical data item having a relationship with that “subject item” as a measure, in today’s case that being a count of …


New York State, US Powerball Number Pick Counts since 2010

Yes, you can glean many things from the public online data resources out there, today’s one for us coming from the US Governmental data.gov … thanks all around.

In the code, what is the crucial single codeline, at least for us? It’s …


var datasofar='', nums=[], ij=0, jk=0;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
showResult(xhttp.responseXML);
}
};
xhttp.open("GET", "//data.ny.gov/api/views/d6yy-54nr/rows.xml", true);
xhttp.send();

function showResult(xml) {
var txt = "";


path = "/response/row/row/winning_numbers"


if (xml.evaluate) {
var nodes = xml.evaluate(path, xml, null, XPathResult.ANY_TYPE, null);
var result = nodes.iterateNext();
while (result) {
txt += result.childNodes[0].nodeValue + "<br>";
nums=('' + result.childNodes[0].nodeValue).split(' ');
for (ii=0; ii<nums.length; ii++) {
if (datasofar.indexOf(',[~' + nums[ii] + '~,') == -1) {
datasofar+=',[~' + nums[ii] + '~,1]';
} else {
jk=eval(datasofar.split(',[~' + nums[ii] + '~,')[1].split(']')[0]);
datasofar=datasofar.replace(',[~' + nums[ii] + '~,' + jk + ']', ',[~' + nums[ii] + '~,' + eval(1 + jk) + ']');
}
}
result = nodes.iterateNext();
}
// Code For Internet Explorer
} else if (window.ActiveXObject || xhttp.responseType == "msxml-document") {
xml.setProperty("SelectionLanguage", "XPath");
nodes = xml.selectNodes(path);
for (i = 0; i < nodes.length; i++) {
txt += nodes[i].childNodes[0].nodeValue + "<br>";
nums=('' + nodes[i].childNodes[0].nodeValue).split(' ');
for (ii=0; ii<nums.length; ii++) {
if (datasofar.indexOf(',[~' + nums[ii] + '~,') == -1) {
datasofar+=',[~' + nums[ii] + '~,1]';
} else {
jk=eval(datasofar.split(',[~' + nums[ii] + '~,')[1].split(']')[0]);
datasofar=datasofar.replace(',[~' + nums[ii] + '~,' + jk + ']', ',[~' + nums[ii] + '~,' + eval(1 + jk) + ']');
}
}
}
}
//document.getElementById("demo").innerHTML = txt;
var proposed=document.getElementById('myi').src.split('&data=')[0] + '&data=' + datasofar;
if (eval('' + proposed.length) < 850) {
document.getElementById('myi').src=document.getElementById('myi').src.split('&data=')[0] + '&data=' + datasofar;
document.getElementById('mpi').src=document.getElementById('mpi').src.split('&data=')[0] + '&data=' + datasofar.replace(/\]\,\[/g, ']%20,%20[').replace(',[', ',%20[');
} else {
document.getElementById('data').value=datasofar;
document.getElementById('mybut').click();
document.getElementById('datap').value=datasofar.replace(/\]\,\[/g, '] , [').replace(',[', ', ['); // ,%20[~45~,23]%20,%20[~
document.getElementById('mybutp').click();
}
document.getElementById('myi').style.display='block';
document.getElementById('mpi').style.display='block';
}

<response>
<row>
<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">
<draw_date>2020-09-26T00:00:00</draw_date>
<winning_numbers>11 21 27 36 62 24</winning_numbers>
<multiplier>3</multiplier>
</row>
<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">
<draw_date>2020-09-30T00:00:00</draw_date>
<winning_numbers>14 18 36 49 67 18</winning_numbers>
<multiplier>2</multiplier>
</row>
<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">
<draw_date>2020-10-03T00:00:00</draw_date>
<winning_numbers>18 31 36 43 47 20</winning_numbers>
<multiplier>2</multiplier>
</row>
<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">
<draw_date>2020-10-07T00:00:00</draw_date>
<winning_numbers>06 24 30 53 56 19</winning_numbers>
<multiplier>2</multiplier>
</row>
<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">
<draw_date>2020-10-10T00:00:00</draw_date>
<winning_numbers>05 18 23 40 50 18</winning_numbers>
<multiplier>3</multiplier>
</row>
// many more rows here
// end of many more rows
</row>
</response>

… this codeline’s “slicing through complexity” cut through, perfectly suited to the XML data scenario above, presenting those Google Chart displays, as the end result.

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.

This entry was posted in eLearning, Event-Driven Programming, Tutorials and tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *