Todayโs progress onto yesterdayโs Worldbank API Comparison Year Google Chart Mobile Tutorial is a callback to the original reason for the work, that being a graphical way to present what is the real marvel of proceedings, the amazing breadth and depth of public data presented at The World Bank โ Indicators | Data, thanks. Sometimes we tend to ignore the primary source of information, but we need to acknowledge every now and again, such โfounts of informationโ, broken into indicators within the categories โฆ
- Agriculture & Rural Development
- Aid Effectiveness
- Climate Change
- Economy & Growth
- Education
- Energy & Mining
- Environment
- External Debt
- Financial Sector
- Gender
- Health
- Infrastructure
- Poverty
- Private Sector
- Public Sector
- Science & Technology
- Social Development
- Social Protection & Labor
- Trade
- Urban Development
Pretty impressive! Weโve chosen a few new indicators to add to the pre-existant top two of โฆ
- Population
- Gross Domestic Product
- Access to electricity (% of population)
- Forest Area (sq km)
- Agricultural Land (sq km)
- Fertility rate, total (births per woman)
- Hospital Beds (per 1,000 people)
- Rail Lines (total route-km)
- Labor Force, Total
- Population density (people per sq. km of land area)
- Time required to start a business (days)
โฆ โAccess to electricity (% of population)โ noteworthy Pie Chart wise benefitting from option part pieSliceText: โvalueโ, โฆ the general โthemeโ being the more we all find out, the better we are to tackle the worldwide discussions we all need to have regarding Earthโs big issues.
This needed changes to โฆ
- needed work to be functional on mobile platforms, allowing for some Javascript tweaking of the options of those Google Chart Pie Chart Difference options โฆ with the โฆ
- โparentโ supervisory web
application has HTML (and Javascript and CSS) you could call worldbank_population_data
htm changed in thisway โฆ supervising โฆ
- โchildโ supervised you could call worldbank_population_data
php changed in thisway
Previous relevant Worldbank API Comparison Year Google Chart Mobile Tutorial is shown below.
Yesterdayโs Worldbank API Comparison Year Pie Chart Differences Tutorial involved Google Charts Pie Chart Difference graphics that โฆ
- needed work to be functional on mobile platforms, allowing for some Javascript tweaking of the options of those Google ChartPie Chart Difference options โฆ with the โฆ
- โparentโ supervisory web
application has HTML (and Javascript and CSS) you could call worldbank_population_data
htm changed in thisway โฆ supplying a screen width โฆ
var whsuffix='';
var deviceWidth = window.orientation == 0 ? window.screen.height: window.screen.width;
var deviceHeight = window.orientation == 0 ? window.screen.width : window.screen.height;
var rectis=document.body.getBoundingClientRect();
if (('' + rectis.width).replace('px','').replace(/0/g,'') != '' && ('' + rectis.height).replace('px','').replace(/0/g,'') != '') {
deviceWidth=('' + rectis.width).replace('px','');
deviceHeight=('' + rectis.height).replace('px','');
}
whsuffix='&swidth=' + ('' + eval(('' + deviceWidth).replace('px','')) * 1.0) + '&sheight=' + ('' + eval(('' + deviceHeight).replace('px','')) * 1.0);
โฆ via a suffix to its URL call of the โฆ - โchildโ supervised you could call worldbank_population_data
php changed in thisway
<?php
$widea=620;
if (isset($_GET['swidth'])) {
$widea=$_GET['swidth'];
$widea/=3.0;
} else if (isset($_POST['swidth'])) {
$widea=$_POST['swidth'];
$widea/=3.0;
}
$widea=round($widea);
//
// later ... in an echo " some HTML " bit ...
//
<input type='hidden' name='moreopt' value=' width: " . $widea . ", height: 1200, chartArea: { width: \"86%\", height: \"70%\" }, '></input>
?>
โฆ we think weโve come up with a better compromise for all โฆ and today we turn a lot of attention to โฆ - start improving the Year โthrough toโ Year functionality calling on โฆ
- Area Chart interfacing area_chart
php is the changed PHP programming source code as per changes
- Bar Chart interfacing bar_chart
php is the changed PHP programming source code as per changes
- Column Chart interfacing column_chart
php is the changed PHP programming source code as per changes
- Line Chart interfacing line_chart
php is the changed PHP programming source code as per changes
- emoji flags
- legend size โฆ and in so doing, opening the door to โฆ
- future parameterization of these chart options, via a โparentโโs business logic (without having to change the Charts so much again)
- pie_chart
php changed thisway
- pie_chart_diffphp changed thisway
โฆ what we like to think of as โthe statistical chartsโ, improving โฆ
โฆ also affecting โฆ
As you may well be familiar with, here is a liverun link to try this WorldBank data reporting yourself.
Previous relevant Worldbank API Comparison Year Pie Chart Differences Tutorial is shown below.
When you compare two year data sets with the web application of yesterdayโs Worldbank API World Country Reporting Revisit Tutorial you are likely to be accessing the Google Charts Pie Chart Differences tool using Googleโsmartsโ to compare two data sets via three graphical components.
Those โgraphical componentsโ are each โentitiesโ in terms of servicing any Google Charts โselectโ event logic. In order to still have some โselectโ (onclick) event logic we needed to compromise in two ways โฆ
- onmouseover tooltips could not be supported
- the smaller Pie Chart slices two small to display a percentage value have not be zeroed into
โฆ and so we become keen to help out here in two ways โฆ
- try to make the legend not need clicking (and so size it to be a full list, at least for single letter executions) โฆ thanks to this useful link, thanks, for lead to โฆ
<form onsubmit='return preiframeviaurl();' target='myiframe' id='myform' style='display:none;' method='POST' action='" . $preudiff . $udiff . ".php'>
<input type='hidden' name='title' id='title' value='" . $reportmode2 . " by World Country " . $startswith . " for Year " . $tbit . "'></input>
" . $onclick . "
<input type='hidden' name='task' id='task' value='" . $reportmode . "'></input>
<input type='hidden' name='desc' id='desc' value='" . $reportmode . "'></input>
<input type='hidden' name='label' id='label' value='Year'></input>
<input type='hidden' name='value' id='value' value='" . str_replace('%2c','',str_replace('%2C','',$valuelist)) . "'></input>
<input type='hidden' name='onclick' value='y'></input>
<input type='hidden' name='moreopt' value=' width: 620, height: 1200, chartArea: { width: \"50%\", height: \"70%\" }, '></input>
<input type='hidden' name='data' id='data' value='" . explode("&data=",$url)[1] . "'></input>" . "\n" . $idata2 . "\n" . "
<input id='mysubmit' type='submit' value='Draw Pie Chart'></input>
</form> - make sure a full data list appears (along with emoji flags and population numbers) in the Javascript prompt window value part
This involved the โsupervisory childโ โฆ
- โchildโ supervised you could call worldbank_population_data
php changed in thisway โฆ supervising โฆ
- pie_chart_diffphp changed thisway
Previous relevant Worldbank API World Country Reporting Revisit Tutorial is shown below.
Weโre revisiting the PHP web application of Worldbank API World Country Reporting Regex Tutorial for a few days to โฆ
- add some emoji flags
- fix some event logic weaknesses, starting today with the single year Worldbank Data incarnations (thanks to World Bank API), but not finished as far as comparison years Worldbank Data incarnations
- fix Mixed Content issues to allow for seamless SSL https: or http: URL usage
So, today, both โparentโ HTML and โchildโ PHP changed today so that โฆ
- โparentโ supervisory web
application has HTML (and Javascript and CSS) you could call worldbank_population_data
htm changed in thisway
- โchildโ supervised you could call worldbank_population_data
php changed in thisway
โฆ overseeing Google Chart Pie Chart interfacing that changed as per pie_chartphp changed thisway and pie_chart_diffphp changed thisway.
Try a liverun link for yourself to see where we are going with this.
Previous relevant Worldbank API World Country Reporting Regex Tutorial is shown below.
Donโt know why, but have often equated regex work in Javascript or PHP with โRegEx Rangersโ, or some such other โsuperheroโ categorization. That is because to wield RegEx principles is a bit like swinging a sword through the โbutterโ of coding problems. Its use can feel arcane, but using it can solve so many issues and simplify projects, it is unbelievable. Trouble Iโve always found is that I like to be presented with a RegEx โaskโ as a user, but donโt think a lot of people like it. An upcoming tutorial, though, will show the wonders of a โRegExโ scenario for a text editing job we did recently โฆ weโll keep you posted on that.
But back to todayโs โRegExโ thinking, building on top of yesterdayโs Worldbank API World Country Reporting Range Tutorial. We ended up asking the user for optional โRegExโ matching criteria for name matches between the Worldbank API dataโs โฆ
- key (or name)
- value (numerical)
โฆ properties, to add to the pre-existing, and still available, the โstarting withโ name filtering functionality weโve had working ever since Worldbank API World Country Population Report Tutorial as shown way below.
RegEx โthinkingโ exists for both server and client parts of web applications, for us, consecutively with โฆ
โฆ and we use it with serverside PHP today, under the auspices of the preg_match function, though we most often use RegEx thinking with the Javascript replace function, as the way to make substitutions for more than one occurrence, (the one occurrence design being) a default โcuriosityโ (but can be useful too) about Javascriptโs version of substitution. You may know this RegEx usage of the Javascript replace function as โglobal substitutionโ.
If youโre new to RegEx thinking let me outline just a few tips โฆ
- ^ can mean โstart ofโ
- $ can mean โend ofโ
- . can sometimes mean โone existant character wildcardโ โฆ or sometimes it is % or ? for this in other โsystemsโ
- * can often mean โzero or more of preceding character wildcardโ
- [] and () bracketing rules are pretty crucial for the more esoteric usages โฆ also study | usage
In our tutorial picture we are showing โland$โ countries that would feature, if Greenland goes independent one day โฆ
- Greenland โฆ โfull of iceโ โฆ and โฆ
- Iceland โฆ โfull of greenโ
Again, both โparentโ HTML and โchildโ PHP changed today so that โฆ
- โparentโ supervisory web
application has HTML (and Javascript and CSS) you could call worldbank_population_data
htm changed in thisway
- โchildโ supervised you could call worldbank_population_data
php changed in thisway
โฆ to facilitate better (optional) Country name filtering for users of the web application.
Previous relevant Worldbank API World Country Reporting Range Tutorial is shown below.
If youโve been keeping up to date with the latest thread of blog postings regarding our โWorldbank API World Country Reporting Projectโ web application, youโll notice that there is no mention of a Worldbank API indicators in the blog title. That is because we still have โgenericโ matters to consider, but that is not an imposition to the web application design today. Today, as well as โฆ
- the original alphabetic starting with country filter (to key below) โฆ weโve added, today, a โฆ
- value โrangeโ filter (to value below) applied to the reporting themeโs numerical value
โฆ and because everything reported on has a โฆ
- key (or name)
- value (numerical)
โฆ basis, we can apply todayโs value โrangeโ filter generically โacross the boardโ (for any of the indicators โPopulationโ and โGross Domestic Productโ, so far).
Why do we use the word โfilterโ here? Well, a filter limits something, and weโre limiting the maximum amount of output data reported on, by, optionally, taking what a user says about the minimum and maximum (numerical) value ranges for data reporting.
In the case of Google Charts, when there is lots of data too close together to view it definitively, it does some clever data reduction, and we have a means today, to get in under that data reduction to more esoteric reporting possibilities, as a result of our new filter, used well by the user.
Letโs show you how a cluttered //www.rjmprogramming.com.au/PHP/worldbank_population_data.php?startswith=C&year=2015&yearvs=-2011&justletters=y โฆ
โฆ can become uncluttered //www.rjmprogramming.com.au/PHP/worldbank_population_data.php?startswith=C&year=2015&yearvs=-2011&max=40000000&justletters=y for those smaller values, by using this value โrangeโ filter below โฆ
So yet again, both โparentโ HTML and โchildโ PHP changed today so that โฆ
- โparentโ supervisory web
application has HTML (and Javascript and CSS) you could call worldbank_population_data
htm changed in thisway
- โchildโ supervised you could call worldbank_population_data
php changed in thisway that if you examine you can see the use of PHP cookie methods for the first time here (as we usually use Javascript), specifically, reading and creating (via PHP setcookie method) HTTP Cookies as per the code โฆ
function rangeget($basis) {
global $reportmode;
$cookie_name = "Worldbank_" . str_replace(" ","_",$reportmode) . "_" . $basis;
if (isset($_COOKIE[$cookie_name])) {
return $_COOKIE[$cookie_name];
}
return 0.0;
}
function rangeset($basis, $val) {
global $reportmode, $startswith;
if ($startswith == "") {
$cookie_name = "Worldbank_" . str_replace(" ","_",$reportmode) . "_" . $basis;
$cookie_value = $val;
setcookie($cookie_name, $cookie_value, time() + (86400 * 30), "/PHP/"); // 86400 = 1 day
return $val;
}
return rangeget($basis);
}
And so yet again, we would welcome you trying this webapplication for yourself to try out the new value range filtering functionality that we also talk about at WordPress 4.1.1โs Worldbank API World Country Reporting Range Tutorial.
Previous relevant Worldbank API World Country Gross Domestic Product Tutorial is shown below.
Weโve changed onion types today in our quest for the ultimate โonion of the 4th dimensionโ concept this project, that being our โฆ oops, the goalposts have shifted โฆ web application project โWorldbank API World Country Population Report Projectโ where we extend the โscopeโ of the โindicatorsโ we can report on to those we presented yesterday with Worldbank API World Country Population Period Tutorial, those being the original โฆ
- Population โฆ and today we add to that, the World Bank โindicatorโ โฆ
- Gross Domestic Product
โฆ and here you may have sneaked a peek below to see that โฆ
- nothing codewise has been added to in terms of โpieces of codeโ โฆ we thank the excellence of (the organization of the) Worldbank API for this, as the form of the GDP data is not enough different to that of the Population data to warrant us thinking that we needed to change anything other than versions โฆ and โฆ
- nothing codewise has been renamed in terms of โpieces of codeโ โฆ and that is us โฆ weโre not embarrassed that a โguinea pigโ for an idea gets extended into a bigger picture โฆ so long as โWorldbankโ is there in the name somewhere
This โguinea pigโ method of extending a project has its advantages and disadvantages as most methods of doing things (inherently) have (their own) advantages and disadvantages. The โguinea pigโ approach may suffer if things become complex later when you try to fit in another โextendedโ concept that is a bit of a โsquare holeโ being forced into our โround socketโ โฆ (). Conversely, if things stay simple enough, why not use methods like โฆ
- plugging in a programmatic โvariableโ where once there was a โhardcodingโ โฆ and โฆ
- plugging in (the equivalent of) an HTML select element โdropdownโ where once there was a titular piece of text
โฆ to keep on pushing out the โonionโ types โฆ we know youโre out there โฆ come anโ show us the cut of your jib!
Yet again, both โparentโ HTML and โchildโ PHP changed today for the new extended โindicatorโ reporting (adding GDP to pre-existing Population indicator(s)), so that โฆ
- โparentโ supervisory web
application has HTML (and Javascript and CSS) you could call worldbank_population_data
htm changed in thisway
- โchildโ supervised you could call worldbank_population_data
php changed in thisway
And yet again, we would welcome you trying this webapplication for yourself to try out this new โlayerโ of functionality โpositioningโ.
Previous relevant Worldbank API World Country Population Period Tutorial is shown below.
Yesterdayโs Worldbank API World Country Population Trend Tutorial started us on the topic of โtrendsโ with data and our Google Chart Pie Chart Differences representation of Worldbank API derived data took the form of the first of โฆ
- snapshot (of two different snapshotted times) โฆ but today we turn our attention to โฆ
- period of time (of several regular snapshotted times)
โฆ and for the purposes of this latter โchartโ reporting we like, around here, still talking in terms of Google Charts, in order of our opinion โregarding quality of reporting purposeโ with regard to this Worldbank API Population data reporting โฆ
- Line Chart
- Column Chart
- Bar Chart
- Area Chart
โฆ all Google Chart โtypesโ looking for the same basic form of data, the hint, in the first place, why we associate these all together with that new period of time reporting options weโve integrated into the web application at the โparentโ HTML supervisor level by, for every new option from yesterday of the form [year] compared to in that top lefthand HTML select element โdropdownโ, we also add in an associated [year] through to โdropdownโ option which, if selected, will present the user with the opportunity to select the type of Google Chart theyโd like to see from the list of four chart types as described above.
Again, both โparentโ HTML and โchildโ PHP changed today for that period of time concept of reporting, so that โฆ
- โparentโ supervisory web
application has HTML (and Javascript and CSS) you could call worldbank_population_data
htm changed in thisway
- โchildโ supervised you could call worldbank_population_data
php changed in thisway
And again, we would welcome you trying this webapplication for yourself, to get this into perspective regarding perhaps, your own opinions about the pros and cons, strengths and weaknesses of the various very useful Google Chart ideas we appreciate for those reporting tasks, helping support the adage โevery picture is worth a thousand wordsโ.
Previous relevant Worldbank API World Country Population Trend Tutorial is shown below.
The โonion of the 4th dimensionโ way to go (after yesterdayโs Worldbank API World Country Population Report Tutorial as shown below) for our latest web application project โWorldbank API World Country Populationโ we like is to now start thinking of a means to show โtrendsโ in population. With this in mind there is a ready made Google Chart Pie Chart Differences to help here. With the Google Chart Pie Chart Differences weโll supply two different years worth of data, and the cleverness of this Google Chart product is called into play to show three Pie Charts, namely โฆ
- original yearโs Pie Chart Worldbank API data
- โcompared toโ yearโs Pie Chart data
- a Google Chart Pie Chart Differences โtrendโ Pie Chart showing an โinner ringโ Pie Chart within an โouter ringโ Pie Chart where you can get a sense of โtrendsโ that are taking place
โฆ that is manifested in the โparentโ HTML code by changing the previous hardcoded โYearโ word with an HTML select element โdropdownโ element to define that optional second โcompared toโ year of interest.
The other new functionality today is a โshareโ via Email emoji (HTML a link โbuttonโ) that latches on to the userโs Email client program via Middle Word Share Tutorialโs approach, namely โฆ
mailto:[emailAddress]?subject=[Subject]&body=[URLtoLinkTo] type of href property (on that link). As you can imagine, it is possible to piece together a Javascript encodeURIComponent() version of [URLtoLinkTo] value via the current webpageโs document.URL
โฆ the curious variation being that we donโt think of the โparentโ HTMLโs document.URL here (in blurb above), but, rather, it is more useful to consider the โchildโ HTML iframe element PHPโs document.URL both as an easier to code concept, and the simplifier of โlength of dataโ GET vs POST HTML form element originated data issues. You see, if your data getting to the Pie Chart is over a certain length, it will be POSTed and you would lose the opportunity to Email this (in that mailto: email client program way), because you rely on real GET method URLs for this approach. At the โviewโ of the middle โchildโ PHP, though, it gets its calls, always, in a GET URL way, so it is, counterintuitively, the best (and simplest) place to intervene and code for this Email โshareโ functionality.
Both โparentโ HTML and โchildโ PHP changed today, so that โฆ
- โparentโ supervisory web
application has HTML (and Javascript and CSS) you could call worldbank_population_data
html changed in thisway
- โchildโ supervised you could call worldbank_population_data
php changed in thisway
We would welcome you trying this webapplication for yourself, to get this into perspective.
Previous relevant Worldbank API World Country Population Report Tutorial is shown below.
In yesterdayโs Worldbank API World Country Population Primer Tutorial, as shown below, we noted โฆ
the data is presented in some way shape or form with the Pie Chart, but for all the advantages of lots of information in the one place, it does suffer a bit with clutter
โฆ and today we show some practical strategies to be more clear (less cluttered) with the data, should the user, optionally, be interested, here.
In practical terms, we built a supervisory HTML โparentโ you could call worldbank_population_datahtml (with this new live
run link) on top of yesterdayโs โduck with the legs moving fastโ hard working โchildโ HTML iframe element housed PHP worldbank_population_data
php (changed thisway to accomodate this move).
If you had to break up a huge chunk of Worldbank API data related to World Countries and their Population, what would you research as an idea to do this? No doubt a lot of people would agree with how we approach it, that being โฆ
report via a "starting with" alphabetic criteria
Makes sense? We hope so, and weโll also ask for a Year of interest, with the caveat that we should offer the user the โabsolute thinkingโ that would say if you are doing a report on โฆ
Population by World Country A for year 2015
โฆ for example, you should offer the user to show Pie Charts for the two scenarios below โฆ
- World Country A Populations compared to each other โฆ or โฆ
- World Country A Populations compared to each other and a Non-A Population entry (which totals all non-A country populations)
We could present these functionality options in an HTML select element โdropdownโ, but we think today, weโll use a top menu of HTML a links to interface to the user of this โparentโ supervisory webapplication we welcome you to try out for yourself.
Previous relevant Worldbank API World Country Population Primer Tutorial is shown below.
Today weโre revisiting the absolutely astonishing resource that the Worldbank API website provides. Such free public sources of data are very much appreciated in our books. Not so much in our pamphlets, but definitely in the books. Revisiting we thought, perhaps, we heard you ask โฆ or were you passing wind? Glad you asked. Remember when we presented PHP Worldbank Growth of Merchandise Trade Tutorial, as shown below? Then, we used Google Chart Bubble Chart to present reams of information. Today, we again broach โreamsโ of Wordbank Population data per country to present a Google Chart Pie Chart report.
On our โfirst draftโ of this web application project we create just the one pie chart, but we do that, along the way showing you a couple of things โฆ
- the โreamsโ of data is processed on the understanding it could be sent to an HTML iframe as a URL plonked into that iframe elementโs src property (as if), or if that URL is too long then that data is plugged into the HTML form and then sent (POSTed) to that same HTML iframe (whose name is the same as the form elementโs target=name) via an HTML form element whose action property is set to โฆ
//www.rjmprogramming.com.au/PHP/PieChart/pie_chart.php - the data is presented in some way shape or form with the Pie Chart, but for all the advantages of lots of information in the one place, it does suffer a bit with clutter
โฆ and so we try some strategies to help with those clutter issues above in blog postings to come.
In the meantime, why not try a liverun of the underlying PHP (serverside) web application you could call worldbank_population_data
php featuring โฆ
- use of PHP file_get_contents() to extract โฆ
- JSON data is extracted and parsed to help piece together that URL to the Google Chart Pie Chart, as mentioned way above
Previous relevant PHP Worldbank Growth of Merchandise Trade Tutorial is shown below.
Weโve said it before, and (no doubt) weโll say it again โฆ there are great public data sources out there for you to explore.
As far as international data goes the Worldbank series of statistics is great, so, thanks.
Today we combine the Worldbank data for Growth of Merchandise Trade 2003-2013 with the wonderful Google Chart Bubble Chart to create (52 = (first letters of country name) 26 x 2 (concepts: Exports and Imports)) reporting charts of interest, we hope. Again, as with any reporting subject, it is a personal thing, whether the subject matter of a report is of interest, but you could say that about so many things in life.
So, we offer some PHP source code you could call growth_of_merchandise_tradephp and a live
run link as well, the full loading of which requires patience.
Stop Press
Tomorrow we go over what was needed to change PHP code above to be more mobile friendly โฆ
- growth_of_merchandise_trade
php changes (to cater for select event (mobile touch) functionality) and live
run link for yesterdayโs web application
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.
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.
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.
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.