{"id":39413,"date":"2018-07-14T03:01:43","date_gmt":"2018-07-13T17:01:43","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=39413"},"modified":"2018-07-14T09:18:56","modified_gmt":"2018-07-13T23:18:56","slug":"google-chart-area-bar-column-line-superimposition-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-area-bar-column-line-superimposition-tutorial\/","title":{"rendered":"Google Chart Area Bar Column Line Superimposition Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/ColumnChart\/column_chart.php\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Google Chart Area Bar Column Line Superimposition Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/ColumnChart\/superimposition.jpg\" title=\"Google Chart Area Bar Column Line Superimposition Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Google Chart Area Bar Column Line Superimposition Tutorial<\/p><\/div>\n<p>Our study of the <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' 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.'>Google Charts<\/a> API has led us to identify &#8220;synergy sets&#8221; of chart functionality as per &#8230;<\/p>\n<ul>\n<li>&#8220;the statisticals&#8221; &#8230; Area and Bar and Column and Line charts &#8230; the subject of today&#8217;s tutorial <font size=1>&#8230; damn! &#8230; did you see the title already?!<\/font> &#8230;<\/li>\n<li>&#8220;the wheres&#8221; &#8230; Map and Geo and Intensity charts<\/li>\n<li>&#8220;the sectors&#8221; &#8230; Pie and Histogram charts<\/li>\n<li>&#8220;the timelies&#8221; &#8230; Timeline and Annotated Timeline and Calendar charts<\/li>\n<\/ul>\n<p>These &#8220;synergies&#8221; in our mind are based on the data format, and\/or the &#8220;synergies&#8221; we discover when using them, as in interesting follow up views or presentations of the data.<\/p>\n<p>It is all round &#8220;synergy&#8221; as far as the Area and Bar and Column and Line (&#8220;the statisticals&#8221;) charts go, as they use the same data and just present it in different ways, in the sense that depending on the nature of the data, one or other of these presentation effects will be more aesthetically pleasing and\/or (practically) informative than the others.  That&#8217;s why we&#8217;ve taken on the work of today to &#8230;<\/p>\n<ul>\n<li>be able to move from one of Area or Bar or Column or Line charts in an easy way &#8230;\n<ol>\n<li>right from the start &#8230; or &#8230;<\/li>\n<li>after data entry when shown<\/li>\n<\/ol>\n<p> &#8230; and move &#8230;<\/p>\n<ol>\n<li>totally to the user selected chart display &#8230; or &#8230;<\/li>\n<li>superimpose one chart over another\n<\/ol>\n<\/li>\n<li>via user access approaches &#8230;\n<ol>\n<li>&#8220;&#038;onclick=y&#8221; Google Chart select (ie. onclick event, for Google Charts) menu options (that also allow superimposition of a Google Chart on top of another same type of Google Chart with altered data) &#8230; via the appending of &#8220;+&#8221; to existant user interaction options &#8230; or &#8230;<\/li>\n<li>new HTML &#8220;a&#8221; links always in view for the user to click or double click (for superimposition)<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p>Did you shudder at the reference to &#8220;double click&#8221;?  We do not even reference the HTML\/Javascript &#8220;ondblclick&#8221; event with our logic, today, just saying a scenario of &#8220;two clicks on the one link within two seconds&#8221; amounts to a &#8220;double click&#8221; in our logic, causing the web application to change capes into <font size=5>Superimposition <\/font> <font size=2>Web Application<\/font> <font size=1>Mode<\/font>.<\/p>\n<p> We channel the works of the previous <a title='Google Chart Column Chart Statistical Share Tutorial' href='#gcccsst'>Google Chart Column Chart Statistical Share Tutorial<\/a> and the discovery, with recent Geo Chart interfacing work with <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/google-geo-and-map-chart-co-ordinate-overlay-tutorial\/' title='Google Geo and Map Chart Co-ordinate Overlay Tutorial'>Google Geo and Map Chart Co-ordinate Overlay Tutorial<\/a>, that overlaying HTML iframe contents containing Google Charts data was possible <font size=2>&#8230; and still is <\/font><font size=1>&#8230; quiet yayyyyyyyyyy<\/font>.<\/p>\n<p>Howevvvvver <font size=2>(and we ask, when is &#8220;the return of the but<\/font><font size=1>t<\/font><font size=2>s&#8221;;)<\/font>, we need to curb our enthusiasm somewhat here.  Those &#8220;precision buffs&#8221; out there will not be happy as it stands now, because many changes of data will cause different SVG element scaling.  Yes, Google Charts uses SVG.  We may revisit to see if this can be controlled, but for now, for this reson, and for the reason of some ugly textual superimpositions that occur, we hold back on &#8220;full enthusiasm mode&#8221; and instead put on special purpose &#8220;cape B&#8221;, designed for <font size=4>Super<\/font><font size=2>ish<\/font><font size=4>imposition <\/font> <font size=2>Web Application<\/font> <font size=1>Mode<\/font>. <\/p>\n<p>Yet, here are are, urging you to try &#8230;<\/p>\n<ul>\n<li><a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/AreaChart\/area_chart.php\" title=\"area_chart.php\" target=\"_blank\">Area Chart<\/a> live run for the <a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/AreaChart\/area_chart.php----------GETME\" title=\"area_chart.php\" target=\"_blank\">area_chart.php<\/a>&#8216;s <a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/AreaChart\/area_chart.php----------GETME\" title=\"area_chart.php\" target=\"_blank\">changed PHP<\/a><\/li>\n<li><a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/BarChart\/bar_chart.php\" title=\"bar_chart.php\" target=\"_blank\">Bar Chart<\/a> live run for the <a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/BarChart\/bar_chart.php-----------GETME\" title=\"bar_chart.php\" target=\"_blank\">bar_chart.php<\/a>&#8216;s <a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/BarChart\/bar_chart.php-----------GETME\" title=\"bar_chart.php\" target=\"_blank\">changed PHP<\/a><\/li>\n<li><a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/ColumnChart\/column_chart.php\" title=\"column_chart.php\" target=\"_blank\">Column Chart<\/a> live run for the <a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/ColumnChart\/column_chart.php------------GETME\" title=\"column_chart.php\" target=\"_blank\">column_chart.php<\/a>&#8216;s <a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/ColumnChart\/column_chart.php------------GETME\" title=\"column_chart.php\" target=\"_blank\">changed PHP<\/a><\/li>\n<li><a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/LineChart\/line_chart.php\" title=\"line_chart.php\" target=\"_blank\">Line Chart<\/a> live run for the <a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/LineChart\/line_chart.php----------GETME\" title=\"line_chart.php\" target=\"_blank\">line_chart.php<\/a>&#8216;s <a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/LineChart\/line_chart.php----------GETME\" title=\"line_chart.php\" target=\"_blank\">changed PHP<\/a><\/li>\n<\/ul>\n<p> &#8230; to see whether any\/all of this is of interest, or has been a real bummer of an experience, and you wished you&#8217;d never come across any of it in even one second of your <select style=display:inline-block;><option value=hollow>hollow<\/option><option value=tawdry>tawdry<\/option><option value=tryhard>tryhard<\/option><option value=mundane>mundane<\/option><option value=mundane>mundane<\/option><option value=lagom>lagom<\/option><option value=kjed>kjed<\/option><\/select> little life.  We hope the former?!  Toodle pip!<\/p>\n<hr>\n<p id='gcccsst'>Previous relevant <a target=_blank title='Google Chart Column Chart Statistical Share Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-column-chart-statistical-share-tutorial\/'>Google Chart Column Chart Statistical Share Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/ColumnChart\/column_chart.php\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Google Chart Column Chart Statistical Share Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/ColumnChart\/timed_count_statistics_yet_again.jpg\" title=\"Google Chart Column Chart Statistical Share Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Google Chart Column Chart Statistical Share Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Google Chart Column Chart Statistical Table Tutorial' href='#gcccstt'>Google Chart Column Chart Statistical Table Tutorial<\/a> improved inhouse <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' 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.'>Google Chart<\/a> <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/columnchart' title='Google Column Charts'>Column Chart<\/a> web application &#8220;Spreadsheet Table&#8221; concept design left an opportunity down at the bottom right for more integration.  Wasted space in a &#8220;spreadsheet&#8221;?  We want to offer some &#8220;optionals&#8221;.  So we&#8217;ve seen, like with <a target=_blank title='Google Chart Select Event Cache Issue Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-select-event-cache-issue-tutorial\/'>Google Chart Select Event Cache Issue Tutorial<\/a>, that the four Google Charts of common data input structure, namely &#8230;<\/p>\n<ul>\n<li><a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/AreaChart\/area_chart.php\" title=\"area_chart.php\" target=\"_blank\">Area Chart<\/a><\/li>\n<li><a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/BarChart\/bar_chart.php\" title=\"bar_chart.php\" target=\"_blank\">Bar Chart<\/a><\/li>\n<li><a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/ColumnChart\/column_chart.php\" title=\"column_chart.php\" target=\"_blank\">Column Chart<\/a><\/li>\n<li><a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/LineChart\/line_chart.php\" title=\"line_chart.php\" target=\"_blank\">Line Chart<\/a><\/li>\n<\/ul>\n<p> &#8230; have synergies with each other and a Sharing &#8220;grid&#8221; of functionality to aid the user could consist of &#8230;<\/p>\n<ul>\n<li>display in HTML iframe within that lower right region of the Statistics Table &#8230; and &#8230;<\/li>\n<li>open in a new Window &#8230; or &#8230;<\/li>\n<li>email with your default Email Client application<\/li>\n<\/ul>\n<p> &#8230; could be useful work today, as Tables and Graphs often form the basis for communication and discussion.<\/p>\n<p>Our Google Chart Column Chart web application changed <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/ColumnChart\/column_chart.php--------GETME' title='column_chart.php'>this way<\/a> in <a title='column_chart.php' target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/ColumnChart\/column_chart.php--------GETME'>column_chart.php<\/a> to allow for this.  You might want to try it yourself at this <a title='column_chart.php' target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/ColumnChart\/column_chart.php'>live run<\/a> link.<\/p>\n<p>Unaffected is the HTML and Javascript &#8220;Timed Survey Count&#8221; web application <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/timed_count.html\">live run<\/a>&#8216;s underlying <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/timed_count.html------GETME\">timed_count.html<\/a> code.<\/p>\n<hr>\n<p id='gcccstt'>Previous relevant <a target=_blank title='Google Chart Column Chart Statistical Table Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-column-chart-statistical-table-tutorial\/'>Google Chart Column Chart Statistical Table Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/ColumnChart\/column_chart.php\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Google Chart Column Chart Statistical Table Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/timed_count_statistics_again.jpg\" title=\"Google Chart Column Chart Statistical Table Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Google Chart Column Chart Statistical Table Tutorial<\/p><\/div>\n<p>Sometimes it is a hard decision whether to separate the (often long winded) story leading up to something from the something itself.  Today, at the risk of sounding verbose, just in case you are coming in here for the first time today, we are including the &#8220;back story&#8221;.  If you are a regular, you&#8217;ll know once the blog posting title changes radically, it&#8217;s like a new start, and today&#8217;s story is both a new start and a continuation of what you would be familiar with by now, the &#8220;Timed Survey Count&#8221; web application we last talked about just below, with <a title='HTML Select Element Dynamic Multiple Attribute CSS Tutorial' href='#zhsedmact'>HTML Select Element Dynamic Multiple Attribute CSS Tutorial<\/a>.<\/p>\n<p>If you are a big spreadsheet person, with most of the major applications over the many years of one of personal computing&#8217;s first &#8220;killer apps&#8221; you&#8217;ll be familiar with the relationship between &#8230;<\/p>\n<ul>\n<li>Spreadsheet (worksheet) &#8230; and &#8230;<\/li>\n<li>Chart &#8230; most commonly, debatably, with a <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/columnchart' title='Google Column Charts'>Column Chart<\/a><\/li>\n<\/ul>\n<p> &#8230; for what else are the innards of the data arrangement of the <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' 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.'>Google Charts<\/a> Column Chart than those underpinning what is the basis of a design of a Spreadsheet (worksheet) &#8230; and a relational database table, at that &#8230; columns and rows.<\/p>\n<p>And when we started wanting our own Statistics functionality for that &#8220;Timed Survey Count&#8221; web application, and we showed yesterday the first &#8220;dippings of the toes<font size=1>ies in the seas of statistical waves of wafting words with little to no meaning<\/font>&#8221; &#8230; but we digress.  It was then that it occurred to us that to dip further would probably involve the use of an HTML table element, and then it occurred to us, with the help of <i>New Century Maths Stages 5.2\/5.3<\/i> pages 394 and 395 (by Klaas Bootsma, David Badger, Colin Skene, Robert Yen, David Adams), thanks, that this table would best, at least first off, look like a Spreadsheet, and then as time goes on, act like one more and more, but not try to reinvent some historically well working wheels.<\/p>\n<p>Then we thought that this functionality should be put into our interface to the Google Chart Column Chart we last tweaked back at <a target=_blank title='Trip Google Chart London Population Timeline Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/trip-google-chart-london-population-timeline-tutorial\/'>Trip Google Chart London Population Timeline Tutorial<\/a>, so that now we have three display modes of use with this web application, namely &#8230;<\/p>\n<ol>\n<li>Google Chart display<\/li>\n<li>Spreadsheet Table display<\/li>\n<li>Both<\/li>\n<\/ol>\n<p> &#8230; which isn&#8217;t as fundamental a PHP <b>change<\/b> as you&#8217;d think &#8230;<\/p>\n<p><code><b><br \/>\n      if ($GETmode == 'Both') {<br \/>\n      echo \" &lt;h1&gt;\" . $GETtitle . \" Statistics Table and Column Chart&lt;\/h1&gt; \\n\";<br \/>\n      echo '&lt;div id=\"statistics_table\" style=\"display:block;\"&gt;' . $statistics . '&lt;\/div&gt;&lt;div id=\"chart_div\" style=\"display:block;\"&gt;&lt;\/div&gt;&lt;div id=\"bitsatend\" style=\"display:inline;\"&gt;&lt;\/div&gt;' . \" \\n\";<br \/>\n      } else if ($GETmode != 'Statistics') {<br \/>\n      <\/b>echo \" &lt;h1&gt;\" . $GETtitle . \" Column Chart&lt;\/h1&gt; \\n\";<br \/>\n      echo '<b>&lt;div id=\"statistics_table\" style=\"display:none;\"&gt;&lt;\/div&gt;<\/b>&lt;div id=\"chart_div\" style=\"display:block;\"&gt;&lt;\/div&gt;&lt;div id=\"bitsatend\" style=\"display:inline;\"&gt;&lt;\/div&gt;' . \" \\n\";<b><br \/>\n      } else {<br \/>\n      echo \" &lt;h1&gt;\" . $GETtitle . \" Statistics Table&lt;\/h1&gt; \\n\";<br \/>\n      echo '&lt;div id=\"statistics_table\" style=\"display:block;\"&gt;' . $statistics . '&lt;\/div&gt;&lt;div id=\"chart_div\" style=\"display:none;\"&gt;&lt;\/div&gt;&lt;div id=\"bitsatend\" style=\"display:inline;\"&gt;&lt;\/div&gt;' . \" \\n\";<br \/>\n      }<br \/><\/b><br \/>\n<\/code><\/p>\n<p> &#8230; though the looks (above) can be vastly different, but is simple due to Google Charts contained by an HTML div element &#8230; such a talented beasting &#8230; just see <a target=_blank title='HTML Div Overlay Jigsaw Talents Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-div-overlay-jigsaw-talents-primer-tutorial\/'>HTML Div Overlay Jigsaw Talents Primer Tutorial<\/a><\/p>\n<p>And so our Google Chart Column Chart web application changed <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/ColumnChart\/column_chart.php-------GETME' title='column_chart.php'>this way<\/a> in <a title='column_chart.php' target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/ColumnChart\/column_chart.php-------GETME'>column_chart.php<\/a> to allow for this.  You might want to try it yourself at this <a title='column_chart.php' target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/ColumnChart\/column_chart.php'>live run<\/a> link.<\/p>\n<p>And the HTML and Javascript &#8220;Timed Survey Count&#8221; web application <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/timed_count.html\">live run<\/a>&#8216;s underlying <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/timed_count.html------GETME\">timed_count.html<\/a> code changed in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/timed_count.html------GETME\">this way<\/a> regarding this improved statistical data integration.<\/p>\n<hr>\n<p id='zhsedmact'>Previous relevant <a target=_blank title='HTML Select Element Dynamic Multiple Attribute CSS Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-select-element-dynamic-multiple-attribute-css-tutorial\/'>HTML Select Element Dynamic Multiple Attribute CSS 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\/timed_count.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"HTML Select Element Dynamic Multiple Attribute CSS Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/timed_count_statistics.jpg\" title=\"HTML Select Element Dynamic Multiple Attribute CSS Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML Select Element Dynamic Multiple Attribute CSS Tutorial<\/p><\/div>\n<p>There&#8217;s a dual purpose to today&#8217;s work on our &#8220;Timed Survey Count&#8221; web application, that being &#8230;<\/p>\n<ul>\n<li>Styling CSS work<\/li>\n<li>Preliminary Statistics functionality<\/li>\n<\/ul>\n<p> &#8230; respectively because &#8230;<\/p>\n<ul>\n<li>we got sick of the look of Styling work (or lack of) up until now, and we like to have a pass at the end when Styling, because we don&#8217;t mind having Styling defined at any\/all of &#8230;\n<ol>\n<li>external CSS<\/li>\n<li>local CSS<\/li>\n<li>HTML element <i>style<\/i> property<\/li>\n<\/ol>\n<p> &#8230; because we tend to like to use that last one as we go along, until our Styling CSS push near the end, and this both clarifies our thoughts in this regard, and it is surprising how easy it is to design local CSS to override HTML style settings anyway, even to the extent of the use of <a target=_blank title='CSS !important information from w3schools forum' href='http:\/\/w3schools.invisionzone.com\/index.php?showtopic=41387'><i>!important<\/i><\/a> to push CSS Styling precedence in the direction of something defined anywhere in one of those ways mentioned above.<\/p>\n<\/li>\n<li>we want to start on this here in summary form, and then develop something generic, as a separate web application based on these musings<\/li>\n<\/ul>\n<p>As time goes on with web programming, it&#8217;ll probably be the case that you find CSS more and more readable, but have to really point out a great boon for CSS readability if the HTML web page looks obvious in some way about its design &#8230;<\/p>\n<p><code><br \/>\n  td:nth-child(2) {<br \/>\n    background-color: white;<br \/>\n    text-align: right;<br \/>\n    border: 3px solid #f0f0f0;<br \/>\n  }<br \/>\n<\/code><\/p>\n<p> &#8230; where the obvious HTML table cell (3 of) look of our web application, tees up nicely with the marvellous CSS <a target=_blank title='CSS nth-child information' href='https:\/\/css-tricks.com\/how-nth-child-works\/'><i>nth-child(n)<\/i><\/a> selector above, making it pretty obvious even without looking up references that the styling applies to the second cell in our web application table (of 3) cells.  Find the other thing about all this is that when perusing CSS &#8220;code&#8221; this way, it often only takes one obvious styling section to stick out at you, to help you join the dots into understanding a lot of the rest.  Mind you, it&#8217;s not &#8220;rocket science&#8221; CSS styling we&#8217;re dealing with today, building on yesterday&#8217;s <a title='HTML Select Element Dynamic Multiple Attribute Chart Tutorial' href='#xhsedmact'>HTML Select Element Dynamic Multiple Attribute Chart Tutorial<\/a> foundations, and it pays to practice CSS both with simple examples, and perhaps build on complex ones you see off the &#8220;net&#8221; and tinker with, in private &#8230; cupboards are excellent here &#8230; as long as there&#8217;s room in there coming up to New Year&#8217;s Eve, with the dogs wanting the space, with the fireworks going on.<\/p>\n<p>Continuing on the theme of <i>lack of rocket science<\/i> have you noticed with the HTML Javascript code the most complex we ever get with our use of <a target=_blank title='Collection information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Collection_(abstract_data_type)'>collections<\/a> is to use an <a target=_blank title='Array information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array'>array<\/a> &#8230; and usually in this pattern, exemplified for our array <i>pie_chart_diff<\/i> &#8230;<\/p>\n<ol>\n<li>var pie_chart_diff=[];  \/\/ you initialize the array (to be empty)<\/li>\n<li>pie_chart_diff.<a target=_blank title='Javascript push method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_push.asp'>push<\/a>(into_array_variable);  \/\/ populate the array\n<li>pie_chart_diff.<a target=_blank title='Javascript sort method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_sort.asp'>sort<\/a>();  \/\/ sort the members of the array, normally strings that have a readily sortable data structure similar to date ones we use like YYYY_mm_dd_HH24_mi_ss<\/li>\n<li>use that collected data via code like &#8230;<br \/>\n<code><br \/>\n  for (iii=0; iii&lt;pie_chart_diff.length; iii++) {<br \/>\n    \/\/ do stuff with pie_chart_diff[iii]<br \/>\n }<br \/>\n<\/code>\n<\/li>\n<\/ol>\n<p>And so it behoves us to &#8230;<\/p>\n<ul>\n<li>usher you into a New Year (yay!!!) with &#8230;<\/li>\n<li>HTML and Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/timed_count.html\">live run<\/a>&#8216;s underlying <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/timed_count.html-----GETME\">timed_count.html<\/a> code changed in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/timed_count.html-----GETME\">this way<\/a> regarding our initial foray into some Statistics functionality and a CSS Styling &#8220;makeover&#8221; today<\/li>\n<\/ul>\n<p> &#8230; and we hope your sleeping patterns are not affected by <a target=_blank title='?' href='https:\/\/www.timeanddate.com\/time\/leapseconds.html'>this break with transmission<\/a>, as we fully expect the adult readers to be able to handle all other aspects of the New Year?!<\/p>\n<hr>\n<p id='xhsedmact'>Previous relevant <a target=_blank title='HTML Select Element Dynamic Multiple Attribute Chart Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-select-element-dynamic-multiple-attribute-chart-tutorial\/'>HTML Select Element Dynamic Multiple Attribute Chart 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\/timed_count.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"HTML Select Element Dynamic Multiple Attribute Chart Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/timed_count_chart.jpg\" title=\"HTML Select Element Dynamic Multiple Attribute Chart Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML Select Element Dynamic Multiple Attribute Chart Tutorial<\/p><\/div>\n<p>We&#8217;re starting down the road of &#8220;Reporting&#8221;, primarily, with our latest &#8220;Timed Survey Count&#8221; web application.  In the blog posting title today we say &#8220;Chart&#8221; and that &#8220;Chart&#8221; being referred to today are <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' 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.'>Google Charts<\/a>, specifically &#8230;<\/p>\n<ul>\n<li><a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/histogram' title='Google Histogram Chart'>Histogram Chart<\/a> &#8230; when there is one data point<\/li>\n<li><a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/piechart' title='Google Pie Charts'>Pie Chart<\/a> Differences &#8230; when there are two data points<\/li>\n<li><a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/columnchart' title='Google Column Charts'>Column Chart<\/a> &#8230; when there are more than two data points &#8230; and <i>onclick<\/i> select event usage can glean some statistical information here, as you can seeing happen with today&#8217;s <a target=_blank title='Tutorial picture' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/timed_count_chart.jpg'>tutorial picture<\/a><\/li>\n<\/ul>\n<p>Along the way, getting this functionality together, we used the Emoji Overlay concepts we talked about at <a target=_blank title='Emoji Overlay Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-overlay-primer-tutorial\/'>Emoji Overlay Primer Tutorial<\/a> along with the emoji specifics at this <a target=_blank title='Great link, thanks' href='http:\/\/www.emojimeanings.org\/pie-chart\/'>great link<\/a> (thanks), to hook up with yesterday&#8217;s new Cookie dropdown of <a title='HTML Select Element Dynamic Multiple Attribute Cookie Tutorial' href='#hsedmact'>HTML Select Element Dynamic Multiple Attribute Cookie Tutorial<\/a>, except that instead of yesterday&#8217;s &#8230;<\/p>\n<blockquote><p>\n &#8230; we did think about <a target=_blank title='HTML select element multiple attribute information from w3schools' href='http:\/\/www.w3schools.com\/tags\/att_select_multiple.asp'>multiple<\/a> attribute mode &#8220;dropdown&#8221; use here, but decided against it, for now\n<\/p><\/blockquote>\n<p> &#8230; &#8220;now&#8221; has come with a &#8220;rethink&#8221; for us to remember those early words of the blog posting title, that being &#8220;HTML Select Element Dynamic Multiple Attribute&#8221;, and divide that dropdown&#8217;s usage into &#8230;<\/p>\n<ul>\n<li>single attribute mode usage for Cookie functionality &#8230; and &#8230;<\/li>\n<li>multiple attribute mode usage for Reporting functionality creating HTML iframe &#8220;child&#8221; element reports in the bottom part of the web application&#8217;s table&#8217;s third column<\/li>\n<\/ul>\n<p>We hope you can see it is fairly obvious why when you have multiple related data points of interest to a user a multiple attribute mode dropdown (ie. HTML select element) might be of great usefulness.<\/p>\n<p>Today, the HTML and Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/timed_count.html\">live run<\/a>&#8216;s underlying <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/timed_count.html----GETME\">timed_count.html<\/a> code changed in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/timed_count.html----GETME\">this way<\/a> regarding our initial steps into &#8220;Reporting&#8221; Google Chart functionality today.  We again hope you try it out and\/or get something out of this tutorial.<\/p>\n<p>Before we go, a couple of code points of interest &#8230; those of you interested in the awkward way our PHP code (unchanged) and HTML referenced the Javascript <i>function pifilter()<\/i> even from a couple of days ago, it&#8217;s <b>intent<\/b> becomes clearer today as <i>a foot in a door<\/i> (for Histogram reporting purposes) &#8230;<\/p>\n<p><code><br \/>\nfunction pifilter(inpi) {<br \/>\n<b>  var ainpi=inpi.split(\" value='\"), crest='';<br \/>\n  if (ainpi.length == 1) {<br \/>\n    ainpi=inpi.split(' value=\"');<br \/>\n    if (ainpi.length == 1) {<br \/>\n      ainpi=inpi.split(' value=');<br \/>\n      if (ainpi.length &gt; 1) {<br \/>\n        crest=ainpi[1].split('>')[0];<br \/>\n      }<br \/>\n    } else {<br \/>\n      crest=ainpi[1].split('\"')[0];<br \/>\n    }<br \/>\n  } else {<br \/>\n    crest=ainpi[1].split(\"'\")[0];<br \/>\n  }<br \/>\n  if (crest != \"\") {<br \/>\n    return inpi.replace(\"&lt;p \", \"&lt;p style=display:none; \") + \"&lt;a style=text-decoration:none;cursor:pointer; title='Histogram Google Chart' onclick=' draw_one_histogram(this.innerHTML); '&gt;\" + crest + \"&lt;\/a&gt;&lt;br&gt;&lt;br&gt;\";<br \/>\n  }<\/b><br \/>\n  return inpi;<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; and note here a way we code HTML <i>a<\/i> links more and more these days, when we have functionality to do but no real navigation as our intent, to use an <i>href<\/i> hashtag (#) navigation we&#8217;ve noticed can move things &#8230; and we don&#8217;t want to move &#8230; is to have no <i>href<\/i> at all, and at least <i>style<\/i> with &#8220;cursor:pointer&#8221;.<\/p>\n<p>Secondly, and lastly (&#8230; so turrah for now), we&#8217;ll leave you with an updated <i>function howManyCookies<\/i> because it changed a lot from yesterday &#8230;<\/p>\n<p><code><br \/>\nfunction howManyCookies() {<br \/>\n    var proposedsel=\"\", sorted=\"\", sorteda=[], lastone='';<br \/>\n    var cookies = document.cookie.split(\"; \");<br \/>\n<b><\/b><br \/>\n    for (var i = eval(-1 + cookies.length); i &gt;= 0; i--) {<br \/>\n        var cookie = cookies[i];<br \/>\n        var eqPos = cookie.indexOf(\"=\");<br \/>\n        var name = eqPos &gt; -1 ? cookie.substr(0, eqPos) : cookie;<br \/>\n        if (name.indexOf(\"dat\") == 0) {<br \/>\n          if (proposedsel == \"\") proposedsel='&lt;span style=\"width:300px;position:absolute;top:76px;left:90px;\"&gt;&lt;select id=\"cookiesel\" style=\"width:190px;background-color:pink;\" onchange=\" if (this.value.length != 1) { recallThisCookie(this.value,this);  } \"&gt;&lt;option value=\" \"&gt;Previous session values below ...&lt;\/option&gt;&lt;option value=\"--\"&gt;Clear all below&lt;\/option&gt;&lt;option value=\"\"&gt;Recall all below&lt;\/option&gt;&lt;\/select&gt;&lt;div style=display:inline; id=dchkpie&gt;&nbsp;&lt;input title=\"Histogram and Pie Chart Difference Google Charts\" style=display:inline;color:lightblue; type=checkbox id=chkpie onchange=\" dochkpie(true); \"&gt;&lt;\/input&gt;&nbsp;&lt;\/div&gt;&lt;\/span&gt;&lt;span style=opacity:1.0;position:absolute;top:35px;left:150px;font-size:24px;visibility:hidden;z-index:6; onclick=\"document.getElementById(' + \"'chkpie'\" + ').click();\" class=emojioverlay&gt;&x1F370;&x1F4C8;&lt;\/span&gt;';<br \/>\n          sorteda.push('&lt;option title=\"' + cookiedate(name).replace(\"_\",\"\/\").replace(\"_\",\"\/\").replace(\"_\",\"-\").replace(\"_\",\":\").replace(\"_\",\":\") + \" : \" + decodeURIComponent(cookievalue(name)) + '\" value=\"' + name + '\"&gt;' + cookiedate(name).replace(\"_\",\"\/\").replace(\"_\",\"\/\").replace(\"_\",\"-\").replace(\"_\",\":\").replace(\"_\",\":\") + \" : \" + decodeURIComponent(cookievalue(name)) + '&lt;\/option&gt;');<br \/>\n          \/\/proposedsel=proposedsel.replace('&lt;\/select&gt;','&lt;option title=\"' + cookiedate(name).replace(\"_\",\"\/\").replace(\"_\",\"\/\").replace(\"_\",\"-\").replace(\"_\",\":\").replace(\"_\",\":\") + \" : \" + decodeURIComponent(cookievalue(name)) + '\" value=\"' + name + '\"&gt;' + cookiedate(name).replace(\"_\",\"\/\").replace(\"_\",\"\/\").replace(\"_\",\"-\").replace(\"_\",\":\").replace(\"_\",\":\") + \" : \" + decodeURIComponent(cookievalue(name)) + '&lt;\/option&gt;&lt;\/select&gt;');<br \/>\n        } else if (name == \"subject\") {<br \/>\n          if (proposedsel == \"\") proposedsel='&lt;span style=\"width:300px;position:absolute;top:76px;left:90px;\"&gt;&lt;select id=\"cookiesel\" style=\"width:190px;background-color:pink;\" onchange=\" if (this.value.length != 1) { recallThisCookie(this.value,this);  } \"&gt;&lt;option value=\" \"&gt;Previous session values below ...&lt;\/option&gt;&lt;option value=\"--\"&gt;Clear all below&lt;\/option&gt;&lt;option value=\"\"&gt;Recall all below&lt;\/option&gt;&lt;\/select&gt;&lt;div style=display:inline; id=dchkpie&gt;&nbsp;&lt;input title=\"Histogram and Pie Chart Difference Google Charts\" style=display:inline;color:lightblue; type=checkbox id=chkpie onchange=\" dochkpie(true); \"&gt;&lt;\/input&gt;&nbsp;&lt;\/div&gt;&lt;\/span&gt;&lt;span style=opacity:1.0;position:absolute;top:35px;left:150px;font-size:24px;visibility:hidden;z-index:6; onclick=\"document.getElementById(' + \"'chkpie'\" + ').click();\" class=emojioverlay&gt;&x1F370;&x1F4C8;&lt;\/span&gt;';<br \/>\n          proposedsel=proposedsel.replace('&lt;option value=\"\"&gt;Recall all below&lt;\/option&gt;','&lt;option value=\"\"&gt;Recall all below&lt;\/option&gt;&lt;option value=\"' + name + '\"&gt;Timed Count of: ' + decodeURIComponent(cookievalue(name)) + '&lt;\/option&gt;');<br \/>\n        } else if (name == \"items\") {<br \/>\n          if (proposedsel == \"\") proposedsel='&lt;span style=\"width:300px;position:absolute;top:76px;left:90px;\"&gt;&lt;select id=\"cookiesel\" style=\"width:190px;background-color:pink;\" onchange=\" if (this.value.length != 1) { recallThisCookie(this.value,this);  } \"&gt;&lt;option value=\" \"&gt;Previous session values below ...&lt;\/option&gt;&lt;option value=\"--\"&gt;Clear all below&lt;\/option&gt;&lt;option value=\"\"&gt;Recall all below&lt;\/option&gt;&lt;\/select&gt;&lt;div style=display:inline; id=dchkpie&gt;&nbsp;&lt;input title=\"Histogram and Pie Chart Difference Google Charts\" style=display:inline;color:lightblue; type=checkbox id=chkpie onchange=\" dochkpie(true); \"&gt;&lt;\/input&gt;&nbsp;&lt;\/div&gt;&lt;\/span&gt;&lt;span style=opacity:1.0;position:absolute;top:35px;left:150px;font-size:24px;visibility:hidden;z-index:6; onclick=\"document.getElementById(' + \"'chkpie'\" + ').click();\" class=emojioverlay&gt;&x1F370;&x1F4C8;&lt;\/span&gt;';<br \/>\n          proposedsel=proposedsel.replace('&lt;option value=\"\"&gt;Recall all below&lt;\/option&gt;','&lt;option value=\"\"&gt;Recall all below&lt;\/option&gt;&lt;option value=\"' + name + '\"&gt;Made Up Of: ' + '[' + decodeURIComponent(cookievalue(name)).replace(\/\\+\/g,' ') + ']' + '&lt;\/option&gt;');<br \/>\n        } else if (name == \"howoften\") {<br \/>\n          if (proposedsel == \"\") proposedsel='&lt;span style=\"width:300px;position:absolute;top:76px;left:90px;\"&gt;&lt;select id=\"cookiesel\" style=\"width:190px;background-color:pink;\" onchange=\" if (this.value.length != 1) { recallThisCookie(this.value,this);  } \"&gt;&lt;option value=\" \"&gt;Previous session values below ...&lt;\/option&gt;&lt;option value=\"--\"&gt;Clear all below&lt;\/option&gt;&lt;option value=\"\"&gt;Recall all below&lt;\/option&gt;&lt;\/select&gt;&lt;div style=display:inline; id=dchkpie&gt;&nbsp;&lt;input title=\"Histogram and Pie Chart Difference Google Charts\" style=display:inline;color:lightblue; type=checkbox id=chkpie onchange=\" dochkpie(true); \"&gt;&lt;\/input&gt;&nbsp;&lt;span style=opacity:1.0;position:absolute;top:35px;left:150px;font-size:24px;visibility:hidden;z-index:6; onclick=\"document.getElementById(' + \"'chkpie'\" + ').click();\" class=emojioverlay&gt;&x1F370;&x1F4C8;&lt;\/span&gt;&nbsp;&lt;input title=\"Histogram and Pie Chart Difference Google Charts\" style=display:inline;color:lightblue; type=checkbox id=chkpie onchange=\" dochkpie(true); \"&gt;&lt;\/input&gt;&nbsp;&lt;input title=\"Histogram and Pie Chart Difference Google Charts\" style=display:inline;color:lightblue; type=checkbox id=chkpie onchange=\" dochkpie(true); \"&gt;&lt;\/input&gt;&lt;\/div&gt;&lt;\/span&gt;';<br \/>\n          proposedsel=proposedsel.replace('&lt;option value=\"\"&gt;Recall all below&lt;\/option&gt;','&lt;option value=\"\"&gt;Recall all below&lt;\/option&gt;&lt;option value=\"' + name + '\"&gt;Every Starting: ' + timeval(decodeURIComponent(cookievalue(name))) +  '&lt;\/option&gt;');<br \/>\n        } else if (name == \"reason\" || name == \"person\" || name == \"place\") {<br \/>\n          if (proposedsel == \"\") proposedsel='&lt;span style=\"width:300px;position:absolute;top:76px;left:90px;\"&gt;&lt;select id=\"cookiesel\" style=\"width:190px;background-color:pink;\" onchange=\" if (this.value.length != 1) { recallThisCookie(this.value,this);  } \"&gt;&lt;option value=\" \"&gt;Previous session values below ...&lt;\/option&gt;&lt;option value=\"--\"&gt;Clear all below&lt;\/option&gt;&lt;option value=\"\"&gt;Recall all below&lt;\/option&gt;&lt;\/select&gt;&lt;div style=display:inline; id=dchkpie&gt;&nbsp;&lt;input title=\"Histogram and Pie Chart Difference Google Charts\" style=display:inline;color:lightblue; type=checkbox id=chkpie onchange=\" dochkpie(true); \"&gt;&lt;\/input&gt;&nbsp;&lt;\/div&gt;&lt;\/span&gt;&lt;span style=opacity:1.0;position:absolute;top:35px;left:150px;font-size:24px;visibility:hidden;z-index:6; onclick=\"document.getElementById(' + \"'chkpie'\" + ').click();\" class=emojioverlay&gt;&x1F370;&x1F4C8;&lt;\/span&gt;';<br \/>\n          proposedsel=proposedsel.replace('&lt;option value=\"\"&gt;Recall all below&lt;\/option&gt;','&lt;option value=\"\"&gt;Recall all below&lt;\/option&gt;&lt;option value=\"' + name + '\"&gt;' + name.replace('reason','For').replace('place','At').replace('person','By') + ': ' + decodeURIComponent(cookievalue(name)) +  '&lt;\/option&gt;');<br \/>\n        } else if (proposedsel == \"\") {<br \/>\n          proposedsel='&lt;span style=\"width:300px;position:absolute;top:76px;left:90px;\"&gt;&lt;select id=\"cookiesel\" style=\"width:190px;background-color:pink;\" onchange=\" if (this.value.length != 1) { recallThisCookie(this.value,this);  } \"&gt;&lt;option value=\" \"&gt;Previous session values below ...&lt;\/option&gt;&lt;option value=\"--\"&gt;Clear all below&lt;\/option&gt;&lt;option value=\"\"&gt;Recall all below&lt;\/option&gt;&lt;\/select&gt;&lt;div style=display:inline; id=dchkpie&gt;&nbsp;&lt;input title=\"Histogram and Pie Chart Difference Google Charts\" style=display:inline;color:lightblue; type=checkbox id=chkpie onchange=\" dochkpie(true); \"&gt;&lt;\/input&gt;&nbsp;&lt;\/div&gt;&lt;\/span&gt;&lt;span style=opacity:1.0;position:absolute;top:35px;left:150px;font-size:24px;visibility:hidden;z-index:6; onclick=\"document.getElementById(' + \"'chkpie'\" + ').click();\" class=emojioverlay&gt;&x1F370;&x1F4C8;&lt;\/span&gt;';<br \/>\n        }<br \/>\n    }<br \/>\n    if (proposedsel != \"\" && sorted == \"\" && sorteda.length &gt; 0) {<br \/>\n      sorteda.sort();<br \/>\n      for (var isort=eval(-1 + sorteda.length); isort&gt;=0; isort--) {<br \/>\n       if (lastone == \"\") {<br \/>\n        sorted+=sorteda[isort];<br \/>\n        lastone=sorteda[isort];<br \/>\n       } else if (sorteda[isort] != lastone) {<br \/>\n        sorted+=sorteda[isort];<br \/>\n        lastone=sorteda[isort];<br \/>\n       }<br \/>\n      }<br \/>\n    }<br \/>\n    if (proposedsel != \"\" && sorted != \"\") proposedsel=proposedsel.replace('&lt;\/select&gt;',sorted + '&lt;\/select&gt;');<br \/>\n    if (proposedsel != \"\") setTimeout(checkforclass,500);<br \/>\n    return proposedsel;<br \/>\n}<br \/>\n<\/code><\/p>\n<hr>\n<p id='hsedmact'>Previous relevant <a target=_blank title='HTML Select Element Dynamic Multiple Attribute Cookie Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-select-element-dynamic-multiple-attribute-cookie-tutorial\/'>HTML Select Element Dynamic Multiple Attribute Cookie 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\/timed_count.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"HTML Select Element Dynamic Multiple Attribute Cookie Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/timed_count_cookie_accountability.jpg\" title=\"HTML Select Element Dynamic Multiple Attribute Cookie Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML Select Element Dynamic Multiple Attribute Cookie Tutorial<\/p><\/div>\n<p>We&#8217;ve been going on and on and on and on and on and on and on about &#8220;Save and Recall&#8221; &#8220;accountability&#8221; functionality with our &#8220;Timed Survey Counter&#8221; web application we left off with <a title='HTML Select Element Dynamic Multiple Attribute Post Tutorial' href='#hsedmapt'>HTML Select Element Dynamic Multiple Attribute Post Tutorial<\/a> yesterday, when we shored it up this way for large amounts of data.  That&#8217;s well and good within the one connected &#8220;session&#8221; of work, which is what we&#8217;ve referred to before as &#8220;intrasession&#8221; in our <a target=_blank title='Emoji Overlay Share Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-overlay-share-tutorial\/'>Emoji Overlay Share Tutorial<\/a>.  In that same tutorial we extended &#8230;<\/p>\n<ul>\n<li>intrasession accountability thinking &#8230; with &#8230;<\/li>\n<li>intersession accountability<\/li>\n<\/ul>\n<p> &#8230; via <a target=_blank title='Cookie information from w3schools' href='http:\/\/www.w3schools.com\/js\/js_cookies.asp'><i>HTTP Cookies<\/i><\/a>, and here, today, we are getting that &#8220;intersession&#8221; accountability via client HTTP Cookies stored on your local web browser.  Again, this is a design decision, because, depending on the permanence you want to have regarding your data &#8230;<\/p>\n<ul>\n<li>HTTP Cookies are all fine and good for those smaller amounts of data that doesn&#8217;t have to last beyond the lifespan of your web browser having its Cache cleared &#8230; versus &#8230;<\/li>\n<li>Indexeddb client Javascript run databases, as we mentioned with, <a target=_blank title='Home Grown Spreadsheet Indexeddb Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/home-grown-spreadsheet-indexeddb-primer-tutorial\/'>Home Grown Spreadsheet Indexeddb Primer Tutorial<\/a> have one degree more of a permanent feel &#8230; versus &#8230;<\/li>\n<li>Web Server flat file systems (perhaps based on an IP address formulated naming system) can be a permanent data solution but rely on you having access to that web server, and unless you&#8217;re using directories protected by the web server hosting (eg. Apache can be organised for these), there is nothing more than file priviledge and permissions as security measures &#8230; versus &#8230;<\/li>\n<li>Proprietry Databases like MySql have storage and security features for a fully permanent arrangement<\/li>\n<\/ul>\n<p> &#8230; and we&#8217;ve decided the first HTTP Cookies type of data storage &#8220;intersession&#8221; (and\/or &#8220;intrasession&#8221;) wise will do us for this project.  If you think a weakness here is that just because we use &#8220;client&#8221; HTTP Cookies, that means there is no scope for PHP code to help us out into the future, think again.  PHP can see &#8220;client&#8221; HTTP Cookies, just not at the same time period as your client Javascript does, but can nonetheless.  To read more about this, please consult this <a target=_blank title='PHP Cookie usage information ... thanks' href='http:\/\/php.net\/manual\/en\/features.cookies.php'>useful link<\/a>.<\/p>\n<p>But today, we don&#8217;t call on the PHP to do anything about our first foray into our &#8220;Timed Survey Counter&#8221; web application&#8217;s HTTP Cookie functionality, where, as for most Cookie functionality, you concern yourself (as a coder) with &#8230;<\/p>\n<ul>\n<li>When do we save the web application&#8217;s &#8220;Timed Survey Counter&#8221; data into HTTP Cookie recallable form?  We do it during the HTML form element&#8217;s <a target=_blank title='Event onsubmit information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onsubmit.asp'><i>onsubmit<\/i><\/a> HTML form event logic <b>as so<\/b> &#8230;<br \/>\n<code><br \/>\nfunction validateform() {<br \/>\n  var bulkofurl='';<br \/>\n  var ps=document.getElementsByTagName('p');<br \/>\n  for (var ips=0; ips&lt;ps.length; ips++) {<br \/>\n    if (ps[ips].outerHTML.indexOf(' name=\"') != -1) {<br \/>\n      bulkofurl+='&' + ps[ips].outerHTML.split(' name=\"')[1].split('\"')[0] + '=' + encodeURIComponent(ps[ips].innerHTML);<br \/>\n    } else if (ps[ips].outerHTML.indexOf(' id=\"') != -1) {<br \/>\n      bulkofurl+='&' + ps[ips].outerHTML.split(' id=\"')[1].split('\"')[0] + '=' + encodeURIComponent(ps[ips].innerHTML);<br \/>\n    }<br \/>\n  }<br \/>\n  <b>cookiesaved=false;<br \/>\n  savecookie('theseones');<br \/>\n  <\/b><br \/>\n  if (bulkofurl.length &gt; 800) {<br \/>\n    document.getElementById('myform').action=document.getElementById('myform').action.replace('.html','.php').replace('.htm','.php');<br \/>\n    document.getElementById('myform').method='POST';<br \/>\n    \/\/alert('doing php');<br \/>\n  }<br \/>\n  return true;<br \/>\n}<br \/>\n<\/code><br \/>\n &#8230; which corresponds to the user tapping or clicking the &#8220;Save and Recall&#8221; button, but before it goes off and (actually) &#8220;saves and recalls&#8221;<\/li>\n<li>How will we show previous session HTTP Cookie recallable settings?  We&#8217;ve decided it should be a single attribute mode &#8220;dropdown&#8221; just below the &#8220;Save and Recall&#8221; button.<\/li>\n<li>When do we construct the &#8220;dropdown&#8221; above?  We do it just after the Javascript <b>&#8221; if (count == 0) {&#8220;<\/b> and after any PHP interventional code &#8230; remember yesterday&#8217;s <a title='HTML Select Element Dynamic Multiple Attribute Post Tutorial' href='#hsedmapt'>HTML Select Element Dynamic Multiple Attribute Post Tutorial<\/a> &#8230; and <b>now we add to that<\/b> &#8230;<br \/>\n<code><br \/>\n&lt;script type='text\/javascript'&gt;<br \/>\n\/\/ Other Javascript local code<br \/>\n<b><\/b><br \/>\nfunction <i>docount()<\/i> {<br \/>\n<b>if (count == 0) {<\/b><br \/>\n\/\/ PHP intervention will go here ...<br \/>\n<b><\/b><br \/>\n\/\/ ... end of PHP intervention<br \/>\n<b>    document.getElementById('cookieextras').innerHTML=<\/b><i>howManyCookies()<\/i><b>;<\/b><br \/>\n\/\/ Start of rest of Javascript code of function <i>docount()<\/i> ...<br \/>\n<b><\/b><br \/>\n\/\/ ... End of rest of Javascript code of function <i>docount()<\/i><br \/>\n}<br \/>\n<b><\/b><br \/>\n\/\/ Rest of local Javascript code ...<br \/>\n<b><\/b><br \/>\n\/\/ ... End of rest ... then new ...<br \/>\n<i>function howManyCookies() {<br \/>\n    var proposedsel=\"\";<br \/>\n    var cookies = document.cookie.split(\"; \");<br \/>\n<\/i><i><br \/>\n    for (var i = eval(-1 + cookies.length); i &gt;= 0; i--) {<br \/>\n        var cookie = cookies[i];<br \/>\n        var eqPos = cookie.indexOf(\"=\");<br \/>\n        var name = eqPos &gt; -1 ? cookie.substr(0, eqPos) : cookie;<br \/>\n        if (name.indexOf(\"dat\") == 0) {<br \/>\n          if (proposedsel == \"\") proposedsel='&lt;select id=\"cookiesel\" style=\"background-color:pink;position:absolute;top:76px;left:60px;\" onchange=\" if (this.value.length != 1) { recallThisCookie(this.value);  } \"&gt;&lt;option value=\" \"&gt;Previous session values below ...&lt;\/option&gt;&lt;option value=\"--\"&gt;Clear all below&lt;\/option&gt;&lt;option value=\"\"&gt;Recall all below&lt;\/option&gt;&lt;\/select&gt;';<br \/>\n          proposedsel=proposedsel.replace('&lt;\/select&gt;','&lt;option value=\"' + name + '\"&gt;' + cookiedate(name).replace(\"_\",\"\/\").replace(\"_\",\"\/\").replace(\"_\",\"-\").replace(\"_\",\":\").replace(\"_\",\":\") + \" : \" + decodeURIComponent(cookievalue(name)) + '&lt;\/option&gt;&lt;\/select&gt;');<br \/>\n        } else if (name == \"subject\") {<br \/>\n          if (proposedsel == \"\") proposedsel='&lt;select id=\"cookiesel\" style=\"background-color:pink;position:absolute;top:76px;left:60px;\" onchange=\" if (this.value.length != 1) { recallThisCookie(this.value);  } \"&gt;&lt;option value=\" \"&gt;Previous session values below ...&lt;\/option&gt;&lt;option value=\"--\"&gt;Clear all below&lt;\/option&gt;&lt;option value=\"\"&gt;Recall all below&lt;\/option&gt;&lt;\/select&gt;';<br \/>\n          proposedsel=proposedsel.replace('&lt;option value=\"\"&gt;Recall all below&lt;\/option&gt;','&lt;option value=\"\"&gt;Recall all below&lt;\/option&gt;&lt;option value=\"' + name + '\"&gt;Timed Count of: ' + decodeURIComponent(cookievalue(name)) + '&lt;\/option&gt;');<br \/>\n        } else if (name == \"items\") {<br \/>\n          if (proposedsel == \"\") proposedsel='&lt;select id=\"cookiesel\" style=\"background-color:pink;position:absolute;top:76px;left:60px;\" onchange=\" if (this.value.length != 1) { recallThisCookie(this.value);  } \"&gt;&lt;option value=\" \"&gt;Previous session values below ...&lt;\/option&gt;&lt;option value=\"--\"&gt;Clear all below&lt;\/option&gt;&lt;option value=\"\"&gt;Recall all below&lt;\/option&gt;&lt;\/select&gt;';<br \/>\n          proposedsel=proposedsel.replace('&lt;option value=\"\"&gt;Recall all below&lt;\/option&gt;','&lt;option value=\"\"&gt;Recall all below&lt;\/option&gt;&lt;option value=\"' + name + '\"&gt;Made Up Of: ' + '[' + decodeURIComponent(cookievalue(name)).replace(\/\\+\/g,' ') + ']' + '&lt;\/option&gt;');<br \/>\n        } else if (name == \"howoften\") {<br \/>\n          if (proposedsel == \"\") proposedsel='&lt;select id=\"cookiesel\" style=\"background-color:pink;position:absolute;top:76px;left:60px;\" onchange=\" if (this.value.length != 1) { recallThisCookie(this.value);  } \"&gt;&lt;option value=\" \"&gt;Previous session values below ...&lt;\/option&gt;&lt;option value=\"--\"&gt;Clear all below&lt;\/option&gt;&lt;option value=\"\"&gt;Recall all below&lt;\/option&gt;&lt;\/select&gt;';<br \/>\n          proposedsel=proposedsel.replace('&lt;option value=\"\"&gt;Recall all below&lt;\/option&gt;','&lt;option value=\"\"&gt;Recall all below&lt;\/option&gt;&lt;option value=\"' + name + '\"&gt;Every Starting: ' + timeval(decodeURIComponent(cookievalue(name))) +  '&lt;\/option&gt;');<br \/>\n        } else if (name == \"reason\" || name == \"person\" || name == \"place\") {<br \/>\n          if (proposedsel == \"\") proposedsel='&lt;select id=\"cookiesel\" style=\"background-color:pink;position:absolute;top:76px;left:60px;\" onchange=\" if (this.value.length != 1) { recallThisCookie(this.value);  } \"&gt;&lt;option value=\" \"&gt;Previous session values below ...&lt;\/option&gt;&lt;option value=\"--\"&gt;Clear all below&lt;\/option&gt;&lt;option value=\"\"&gt;Recall all below&lt;\/option&gt;&lt;\/select&gt;';<br \/>\n          proposedsel=proposedsel.replace('&lt;option value=\"\"&gt;Recall all below&lt;\/option&gt;','&lt;option value=\"\"&gt;Recall all below&lt;\/option&gt;&lt;option value=\"' + name + '\"&gt;' + name.replace('reason','For').replace('place','At').replace('person','By') + ': ' + decodeURIComponent(cookievalue(name)) +  '&lt;\/option&gt;');<br \/>\n        } else if (proposedsel == \"\") {<br \/>\n          proposedsel='&lt;select id=\"cookiesel\" style=\"background-color:pink;position:absolute;top:76px;left:60px;\" onchange=\" if (this.value.length != 1) { recallThisCookie(this.value);  } \"&gt;&lt;option value=\" \"&gt;Previous session values below ...&lt;\/option&gt;&lt;option value=\"--\"&gt;Clear all below&lt;\/option&gt;&lt;option value=\"\"&gt;Recall all below&lt;\/option&gt;&lt;\/select&gt;';<br \/>\n        }<br \/>\n    }<br \/>\n    return proposedsel;<br \/>\n}<br \/>\n<\/i><br \/>\n&lt;\/script&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body onload=\"<i>docount();<\/i> amendvia((location.search.split('max=')[1] ? location.search.split('max=')[1].split('&')[0] : ''));\" style='background-color:magenta;'&gt;<br \/>\n&lt;!-- Lots more HTML here --&gt;<br \/>\n<b>&lt;div id=cookieextras&gt;&lt;\/div&gt;<\/b><br \/>\n&lt;!-- Bit more HTML here --&gt;<br \/>\n<\/code><br \/>\n &#8230; making sure there are options to effectively &#8220;Clear Cookies&#8221; and to &#8220;Recall All the Cookie Information&#8221; &#8230; we did think about <a target=_blank title='HTML select element multiple attribute information from w3schools' href='http:\/\/www.w3schools.com\/tags\/att_select_multiple.asp'>multiple<\/a> attribute mode &#8220;dropdown&#8221; use here, but decided against it, for now<\/li>\n<\/ul>\n<p>And so we have an &#8220;intersession&#8221; capability of data &#8220;accountability&#8221; to add to our pre-existing &#8220;intrasession&#8221; data &#8220;accountability&#8221;.<\/p>\n<p>The HTML and Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/timed_count.html\">live run<\/a>&#8216;s underlying <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/timed_count.html---GETME\">timed_count.html<\/a> code changed in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/timed_count.html---GETME\">this way<\/a> regarding &#8220;intersession&#8221; HTTP Cookie data &#8220;accountability&#8221; today.  We hope you try it out and\/or get something out of this discussion.<\/p>\n<hr>\n<p id='hsedmapt'>Previous relevant <a target=_blank title='HTML Select Element Dynamic Multiple Attribute Post Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-select-element-dynamic-multiple-attribute-post-tutorial\/'>HTML Select Element Dynamic Multiple Attribute Post 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\/timed_count.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"HTML Select Element Dynamic Multiple Attribute Post Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/timed_count_long_accountability.jpg\" title=\"HTML Select Element Dynamic Multiple Attribute Post Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML Select Element Dynamic Multiple Attribute Post Tutorial<\/p><\/div>\n<p>In the real world of web application programming, as far as what we call &#8220;accountability&#8221; goes, and we think of &#8230;<\/p>\n<blockquote><p>\n&#8220;accountability&#8221; with a web application, for us, goes along the lines of having a web application whose data can be recalled and reused for another time\n<\/p><\/blockquote>\n<p> &#8230; it often takes up a good deal of the design and programming coding time.  The term &#8220;overkill&#8221; can come into the &#8220;accountability&#8221; topic area &#8220;big time&#8221;.  Overdesign, and you waste time.  It goes towards asking &#8230;<\/p>\n<ul>\n<li>Who could use this web application?<\/li>\n<li>How might they apply the functionality of this web application?<\/li>\n<\/ul>\n<p> &#8230; as to, in your opinion, along with consulting the potential users, how much data will happen to cater for your designated &#8220;happy&#8221; percentage of users out there.  Of course, if you are writing this for a client, the client is always right &#8230; <font size=1>that is, when they aren&#8217;t &#8220;left&#8221; out &#8230; chortle, chortle<\/font>.<\/p>\n<p>Your program design comes into it too.  Are you wasteful with the design?  Like, relooking at our current &#8220;Timed Survey Count&#8221; web application we last talked about at <a title='HTML Select Element Dynamic Multiple Attribute Mobile Tutorial' href='#hsedmamt'>HTML Select Element Dynamic Multiple Attribute Mobile Tutorial<\/a> as shown below, I can see that &#8230;<\/p>\n<ul>\n<li>data length could be made smaller by shortening the &#8220;date&#8221; data item names at the &#8220;cost&#8221; of making the analysis of its meaning proceeding synchronously from the most detailed (perhaps earliest) date definition item and filling in less detailed ones as they are analyzed (through) via previous knowledge &#8230; the simplest example here would be to strip off subsequent dates appearing on the same day as a previously more fully defined date data item, and another would be not to include date data items where nothing happened (ie. the 1*0 ones) &#8230; versus &#8230;<\/li>\n<li>the coding complexity (and the danger of bugs) this might introduce <font size=1> &#8230; but &#8220;Who has bugs?&#8221; &#8220;What&#8217;s this bug thingo?&#8221; &#8230; deeper chortle, deeper chortle<\/font><\/li>\n<\/ul>\n<p> &#8230; and this tradeoff decision, for us, today, is to say &#8220;forget that coding complexity above&#8221; and &#8220;let&#8217;s just cater, dynamically, at the HTML form validation phase (via the <a target=_blank title='Event onsubmit information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onsubmit.asp'><i>onsubmit<\/i><\/a> HTML form event) for the use of a PHP <i>helper<\/i> web application for those longer data <i>tallying<\/i>\/<i>surveys<\/i> the user performs&#8221; &#8230; the latter of which is not trivial either, but, to us, is a more long lasting and satisfying, use of coding time &#8230; and that means &#8230;<\/p>\n<ul>\n<li>the <i>onsubmit<\/i> HTML form event code&#8217;s job becomes to &#8220;guesstimate&#8221; the length of an address bar URL method=GET HTML form scenario &#8220;submit&#8221;, and if less than (we say 800) a conservative length number for the date related data items, then we can stick with the default (and still avoid &#8220;the dreaded&#8221; error 414 <a target=_blank title='Error 414 request URI too long' href='http:\/\/www.checkupdown.com\/status\/E414.html'>request URI too long<\/a> error message) &#8230;\n<ol>\n<li>method=GET<\/li>\n<li>action=.\/timed_count.html<\/li>\n<\/ol>\n<p> &#8230; for a long, but not too long address bar URL to be fired off &#8230; whereas &#8230;<\/li>\n<li>the  <i>onsubmit<\/i> HTML form event code, using Javascript DOM, will set the &#8230;\n<ol>\n<li>method=POST<\/li>\n<li>action=.\/timed_count.php<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p> &#8230; for those more serious surveys.  Which means that users without the means to PHP can still work with the smaller, shorter more trivial data length surveys without having to resort to the more heavy duty PHP web serverside code &#8216;helper&#8217; web application usage.<\/p>\n<p>The design of today&#8217;s new PHP &#8216;helper&#8217; <a target=_blank title='timed_count.php' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/timed_count.php_GETME'>timed_count.php<\/a> is that simple thought process of &#8230;<\/p>\n<ul>\n<li>you take what it&#8217;s helping as a &#8220;basis&#8221; (ie. it has a variable called <i>$basis<\/i>) &#8230; gleaned via good ol&#8217; <a target=_blank title='file_get_contents' href='http:\/\/us1.php.net\/file_get_contents'>file_get_contents<\/a> &#8230; and then &#8230;<\/li>\n<li>trace through all the $_POST data, because on this occasion the date data item names of $_POST[] are not entirely known, and so we got great help here, from this <a target=_blank title='Great link' href='http:\/\/stackoverflow.com\/questions\/8567847\/loop-through-post-variables-with-similar-names'>great link<\/a> &#8230; thanks for &#8230;<\/p>\n<p><code><br \/>\n  foreach($_POST as $k => $v) {   \/\/ thanks to http:\/\/stackoverflow.com\/questions\/8567847\/loop-through-post-variables-with-similar-names<br \/>\n    if(strpos($k, 'data') === 0) {<br \/>\n         \/\/ these are the date related \"tallying\" \"survey\" date\/time pointing data items<br \/>\n    }<br \/>\n  }<br \/>\n<\/code><\/p>\n<p> &#8230; and then<\/li>\n<li>pick the stop where all your PHP intervention Javascript code can be placed (in Javascript function <i>docount()<\/i>) &#8230; and we also show that <i>onsubmit<\/i> event code change &#8230; for us, <b>after<\/b> &#8230;<br \/>\n<code><br \/>\n&lt;script type='text\/javascript'&gt;<br \/>\n\/\/ Other Javascript local code<br \/>\n<b><\/b><br \/>\nfunction <i>docount()<\/i> {<br \/>\n<b>if (count == 0) {<\/b><br \/>\n\/\/ PHP intervention will go here ...<br \/>\n<b><\/b><br \/>\n\/\/ ... end of PHP intervention<br \/>\n\/\/ Start of rest of Javascript code of function <i>docount()<\/i> ...<br \/>\n<b><\/b><br \/>\n\/\/ ... End of rest of Javascript code of function <i>docount()<\/i><br \/>\n}<br \/>\n<b><\/b><br \/>\n\/\/ Rest of local Javascript code ...<br \/>\n<b><\/b><br \/>\n\/\/ ... End of rest ... then new ...<br \/>\n<i>function validateform() {<br \/>\n  var bulkofurl='';<br \/>\n  var ps=document.getElementsByTagName('p');<br \/>\n  for (var ips=0; ips&lt;ps.length; ips++) {<br \/>\n    if (ps[ips].outerHTML.indexOf(' name=\"') != -1) {<br \/>\n      bulkofurl+='&' + ps[ips].outerHTML.split(' name=\"')[1].split('\"')[0] + '=' + encodeURIComponent(ps[ips].innerHTML);<br \/>\n    } else if (ps[ips].outerHTML.indexOf(' id=\"') != -1) {<br \/>\n      bulkofurl+='&' + ps[ips].outerHTML.split(' id=\"')[1].split('\"')[0] + '=' + encodeURIComponent(ps[ips].innerHTML);<br \/>\n    }<br \/>\n  }<br \/>\n  if (bulkofurl.length &gt; 800) {<br \/>\n    document.getElementById('myform').action=document.getElementById('myform').action.replace('.html','.php').replace('.htm','.php');<br \/>\n    document.getElementById('myform').method='POST';<br \/>\n    \/\/alert('doing php');<br \/>\n  }<br \/>\n  return true;<br \/>\n}<\/i><br \/>\n<b><\/b><br \/>\n&lt;\/script&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body onload=\"<i>docount();<\/i> amendvia((location.search.split('max=')[1] ? location.search.split('max=')[1].split('&')[0] : ''));\" style='background-color:magenta;'&gt;<br \/>\n&lt;form <i>onsubmit=\"return validateform()\"<\/i> id='myform' method='GET' action='.\/timed_count.html'&gt;<br \/>\n<\/code><br \/>\n &#8230; then &#8230;<\/li>\n<li>analyze the needs and &#8220;plonk&#8221; the relevant Javascript DOM to &#8220;catch up&#8221; with the default method=GET logic &#8230; arriving back at <strike>a<\/strike>the &#8220;common train stop&#8221; &#8220;GetPost&#8221; (shall we say &#8230; eh, wot, guv&#8217;?)<\/li>\n<\/ul>\n<p>In practice, to get this right takes time, but you have everything there at your disposal to do a good job, as long as you are working with an HTML (and Javascript and CSS) web inspector, as we do today with the Safari web browser&#8217;s Web Inspector (that came with Safari, when it came with Mac OS X).  You can see it there at the bottom in today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/timed_count_long_accountability.jpg\" title='Tutorial picture'>tutorial picture<\/a>.  Doing this job without that Web Inspector is actually hard to imagine, for me at least.<\/p>\n<p>Am sure you won&#8217;t be surprised to hear that all this affects the HTML and Javascript more than you might think, and by the way, as well, today, we&#8217;ve added in more &#8220;accountability&#8221; (for reporting purposes) user fields (&#8220;at&#8221;, &#8220;by&#8221;, &#8220;for&#8221; for &#8220;where?&#8221;, &#8220;who?&#8221;, &#8220;why?&#8221; purposes) in the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/timed_count.html\">live run<\/a>&#8216;s underlying <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/timed_count.html--GETME\">timed_count.html<\/a> code, which changed in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/timed_count.html--GETME\">this way<\/a> regarding the shoring up of data &#8220;accountability&#8221; with the potential for more seriously in depth &#8220;survey&#8221; scenarios.<\/p>\n<hr>\n<p id='hsedmamt'>Previous relevant <a target=_blank title='HTML Select Element Dynamic Multiple Attribute Mobile Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-select-element-dynamic-multiple-attribute-mobile-tutorial\/'>HTML Select Element Dynamic Multiple Attribute Mobile 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\/timed_count.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"HTML Select Element Dynamic Multiple Attribute Mobile Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/timed_count_accountability.jpg\" title=\"HTML Select Element Dynamic Multiple Attribute Mobile Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML Select Element Dynamic Multiple Attribute Mobile Tutorial<\/p><\/div>\n<p>There&#8217;s no <strike>three<\/strike>two ways about it, mobile platforms do not like HTML <a target=_blank title='HTML select tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_select.asp'>select<\/a> element in <a target=_blank title='HTML select element multiple attribute information from w3schools' href='http:\/\/www.w3schools.com\/tags\/att_select_multiple.asp'>multiple<\/a> attribute mode use.  I waited a whole day to see if the &#8220;big guns&#8221; would change their mind, and here we are, and they haven&#8217;t &#8230; and &#8230; <font size=1>just between you and me<\/font> &#8230; we have a feeling in our water they&#8217;re not going to change their mind.<\/p>\n<p>So what&#8217;s an alternative?  Well, given that mobile platforms are still okay writing to (an HTML select element called &#8220;selo&#8221;) <i>selo.options[0].text<\/i> that comma separated &#8220;tallying&#8221; we do, we think, for mobile platforms, as an alternative approach we&#8217;ll combine &#8230;<\/p>\n<ul>\n<li><i>selo.options[0].text<\/i> as that one <i>option<\/i> element &#8220;tallying&#8221; dropdown part (as is) &#8230; with &#8230;<\/li>\n<li>other HTML input type=button replacements for all the other HTML select element option elements (we&#8217;ll still use for non-mobile platforms)<\/li>\n<\/ul>\n<p>And while we&#8217;re at this discusion, building on yesterday&#8217;s <a title='HTML Select Element Dynamic Multiple Attribute Survey Tutorial' href='#hsedmast'>HTML Select Element Dynamic Multiple Attribute Survey Tutorial<\/a>, how do we &#8230; yes, us &#8230; distinguish a mobile platform from a non-mobile one?  We&#8217;re doing it in Javascript DOM via code like &#8230;<\/p>\n<p><code><br \/>\n if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n    \/\/ do mobile specific code<br \/>\n } else {<br \/>\n    \/\/ do non-mobile specific code<br \/>\n }<br \/>\n<\/code><\/p>\n<p>Now, moving on from this, we&#8217;ve done a few other things, namely &#8230;<\/p>\n<ul>\n<li>made the date data sortable in both an alphabetic and\/or numerical way by using YYYY_mm_dd_HH24_mi_ss type of date\/time formatting &#8230; which comes in handy when we come to &#8230;<\/li>\n<li>our first &#8220;accountability&#8221; steps in this project to be able to save a snapshot and recall it via get parameter URL construction<\/li>\n<li>allowed for keyboard &#8220;tallying&#8221; via a new separate &#8220;tallying&#8221; field option, because this allows the user to not have to be accurate with a mouse press of some sort, when they are rushed just trying to record lots of data items, and it could even be that several people can each be responsible for a particular (keyboard) keystroke all recording on the one device (but imagine this would be quite a <i>squeezy<\/i> prospect), and might allow for the screen not to distract from the data recording<\/li>\n<\/ul>\n<p>With this last one, on mobile platforms, have you noticed with web applications on some mobile platforms, how a &#8230;<\/p>\n<p><code><br \/>\ndocument.getElementById(\"myInputTypeIsTextElement\").focus();<br \/>\n<\/code><\/p>\n<p> &#8230; attempt to focus to a &#8220;keyboard&#8221; keystroke element, on entering the web application the first time, is discouraged, or outright ignored?  Am sure there is a reason, but even this is not a big concern here, because subsequent &#8220;document.getElementById(&#8220;myInputTypeIsTextElement&#8221;).focus();&#8221; are granted, and that just means that, perhaps quite rightly, a mobile user initially decides on their focus as to whether they will &#8230;<\/p>\n<ul>\n<li>tap buttons with a mouse &#8230;<\/li>\n<li>tap (keyboard) keystroke buttons<\/li>\n<\/ul>\n<p> &#8230; which, when you think about it, is much of a muchness, unless you have one of those bluetooth keypads we talked about with <a target=_blank title='Tablet Run Web Server Blog PHP Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tablet-run-web-server-blog-php-tutorial\/'>Tablet Run Web Server Blog PHP Tutorial<\/a> when the &#8220;keyboard&#8221; approach could have many advantages for &#8220;tallying&#8221; concentration, when it is very busy.<\/p>\n<p>So we&#8217;re still going, but today&#8217;s work leaves us with this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/timed_count.html\">live run<\/a> and with this HTML and Javascript underlying <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/timed_count.html-GETME\">timed_count.html<\/a> code, which changed in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/timed_count.html-GETME\">this way<\/a> regarding the information above.  We hope you try it out yourself.<\/p>\n<hr>\n<p id='hsedmast'>Previous relevant <a target=_blank title='HTML Select Element Dynamic Multiple Attribute Survey Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-select-element-dynamic-multiple-attribute-survey-tutorial\/'>HTML Select Element Dynamic Multiple Attribute Survey 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\/timed_count.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"HTML Select Element Dynamic Multiple Attribute Survey Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/timed_count.jpg\" title=\"HTML Select Element Dynamic Multiple Attribute Survey Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML Select Element Dynamic Multiple Attribute Survey Tutorial<\/p><\/div>\n<p>It&#8217;s good with web programming where you do an application with realtime use, and we hope we are getting closer today (as with WordPress 4.1.1&#8217;s <a target=_blank title='HTML Select Element Dynamic Multiple Attribute Survey Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-select-element-dynamic-multiple-attribute-survey-tutorial\/'>HTML Select Element Dynamic Multiple Attribute Survey Tutorial<\/a>) with a &#8220;Timed Count&#8221; web application where the words that spring to mind regarding how it works, at least to us, are &#8230;<\/p>\n<ul>\n<li>survey<\/li>\n<li>tally<\/li>\n<\/ul>\n<p>Think the teacher counting students who uses a counter system to &#8220;tally&#8221; the counter with what was expected at the end, or those people doing traffic &#8220;surveys&#8221; &#8220;tallying&#8221; up what they observe, presumably in relation to a time of day as well.  Well, today, with our web application, we default its usage to that latter case, but it is flexible enough, even at this early stage to cater for other scenarios.<\/p>\n<p>In a &#8220;survey&#8221; project of this type, the &#8220;tallying&#8221; is just one aspect of the job, and we&#8217;ll be talking about &#8220;accountability&#8221; and &#8220;reporting&#8221;, from where we see it, in tutorials to come, but just for now, we&#8217;re happy to be &#8230;<\/p>\n<ul>\n<li>Asking (as needed) and recording, &#8220;for internal use only&#8221;, the &#8220;survey&#8221; title<\/li>\n<li>Asking (as required) for a Starting (Time Elapsed) Period of interest<\/li>\n<li>In realtime (ie. dynamically) record, via an HTML <a target=_blank title='HTML select tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_select.asp'>select<\/a> element in <a target=_blank title='HTML select element multiple attribute information from w3schools' href='http:\/\/www.w3schools.com\/tags\/att_select_multiple.asp'>multiple<\/a> attribute mode use (as yesterday&#8217;s <a title='HTML Select Element Dynamic Multiple Attribute Game Tutorial' href='#hsedmagt'>HTML Select Element Dynamic Multiple Attribute Game Tutorial<\/a> got us more and more into, <strike>man<\/strike>person), the &#8220;survey&#8221; &#8220;tallying&#8221; (or measurements, or findings) for that relevant time period &#8230; and &#8230;<\/li>\n<li>At the break of a time period summarize previous, &#8220;for internal use only&#8221;, and ready the user for a clean slate where the counts are zeroed<\/li>\n<\/ul>\n<p>Pretty simple concept, huh?  But am sure you can see what use this could be, particularly with some more bells and whistles?!  And if so &#8230; or even if not &#8230; why not try our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/timed_count.html\">live run<\/a> with its HTML and Javascript underlying <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/timed_count.html_GETME\">timed_count.html<\/a> code.<\/p>\n<hr \/>\n<p id='hsedmagt'>Previous relevant <a target=_blank title='HTML Select Element Dynamic Multiple Attribute Game Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-select-element-dynamic-multiple-attribute-game-tutorial\/'>HTML Select Element Dynamic Multiple Attribute Game Tutorial<\/a> is shown below.<\/p>\n<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/random_counting_numbers.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"HTML Select Element Dynamic Multiple Attribute Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/random_counting_numbers.jpg\" title=\"HTML Select Element Dynamic Multiple Attribute Game Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML Select Element Dynamic Multiple Attribute Game Tutorial<\/p><\/div>\n<p>Today, we have a new game that makes use of HTML <a target=_blank title='HTML select tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_select.asp'>select<\/a> element <a target=_blank title='HTML select element multiple attribute informatiobn from w3schools' href='http:\/\/www.w3schools.com\/tags\/att_select_multiple.asp'>multiple<\/a> attribute mode use during the workings of the game.<\/p>\n<p>This is on the way to a mathematics statistics application and also looking back at yesterday&#8217;s <a title='HTML Select Element Dynamic Multiple Attribute Tutorial' href='#hsedmat'>HTML Select Element Dynamic Multiple Attribute Tutorial<\/a>&#8216;s first <i>HTML select element multiple attribute mode<\/i> blog posting here at this blog.<\/p>\n<p>For this game, unlike yesterday&#8217;s &#8230;<\/p>\n<blockquote>\n<p>\nShould it be &#8220;the full circle&#8221; of toggling capability, or just from Single attribute mode to Multiple attribute mode (but not back again) &#8230; and we pick the latter\n<\/p>\n<\/blockquote>\n<p> &#8230; we have &#8220;the full circle&#8221; applying today, where the user is &#8230;<\/p>\n<ul>\n<li>shown the game status in Single attribute mode &#8230; and &#8230;<\/li>\n<li>waiting for user interaction in Multiple attribute mode<\/li>\n<\/ul>\n<p> &#8230; and we need all of &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Javascript onclick event information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/event_onclick.asp'>onclick<\/a> (select) and onclick (option)<\/li>\n<li><a target=_blank title='Event onfocus information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onfocus.asp'>onfocus<\/a> (select) and onfocus (option)<\/li>\n<\/ul>\n<p> &#8230; but curiously, not the usual <i><a target=_blank title='Event onchange information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onchange.asp'>onchange<\/a> (select)<\/i> event &#8230; to work the functionality for the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/random_counting_numbers.html\" title='Click picture'>Random Counting Numbers Game<\/a> whose HTML and Javascript code you can examine at <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/random_counting_numbers.html_GETME\" title='random_counting_numbers.html'>random_counting_numbers.html<\/a> link.  Food for thought, we hope.<\/p>\n<hr \/>\n<p id='hsedmat'>Previous relevant <a target=_blank title='HTML Select Element Dynamic Multiple Attribute Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-select-element-dynamic-multiple-attribute-tutorial\/'>HTML Select Element Dynamic Multiple Attribute 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\/karaokeyoutubeapi.htm?emoji=on&#038;nokaraoke=y&#038;youtubeid=%20%20%20%20%20%20%20%20%20%20%20%20%20%20Adelaide\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"HTML Select Element Dynamic Multiple Attribute Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/tz_places_multiple_video.jpg\" title=\"HTML Select Element Dynamic Multiple Attribute Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML Select Element Dynamic Multiple Attribute Tutorial<\/p><\/div>\n<p>Am sure a lot of web programmers would like to invent some generic code to allow the HTML select (&#8220;dropdown&#8221;) element be able to toggle between the &#8230;<\/p>\n<ol>\n<li>Single select attribute mode &#8230; and &#8230;<\/li>\n<li><a target=_blank title='HTML select element multiple attribute informatiobn from w3schools' href='http:\/\/www.w3schools.com\/tags\/att_select_multiple.asp'>Multiple<\/a> select attribute mode<\/li>\n<\/ol>\n<p> &#8230; dynamically, using Javascript DOM.  But in order to be able to write a practically useful generic bit of code you have to have a confluence of agreed design guidelines, with lots of people participating and sticking to the guidelines, or have a concept whose predictability about &#8220;event&#8221; logic is pretty easy to envisage and define, for a lot of programmers to agree upon.  But trying to pin down the &#8220;event&#8221; logic of a &#8230;<\/p>\n<ul>\n<li>HTML select (&#8220;dropdown&#8221;) element <i>onchange<\/i> event &#8230; or even the &#8230;<\/li>\n<li>HTML select (&#8220;dropdown&#8221;) element <i>onclick<\/i> event (as a first &#8220;wild&#8221; thought getting into the problem)<\/li>\n<\/ul>\n<p> &#8230; is like catching a worm at the bottom of a 27 storey building being thrown from the top &#8230; you need to know when to give up too &#8230; think <a target=_blank title='Wargames' href='http:\/\/www.youtube.com\/watch?v=NHWjlCaIrQo'>this salutary thought<\/a>.<\/p>\n<p>But that doesn&#8217;t mean the idea of an HTML select (&#8220;dropdown&#8221;) element being able to be dynamically toggled is not a good idea, but it just means you need to focus on &#8230;<\/p>\n<ul>\n<li>Should it be &#8220;the full circle&#8221; of toggling capability, or just from Single attribute mode to Multiple attribute mode (but not back again) &#8230; and we pick the latter<\/li>\n<li>Define what can be done to repeat the actions of the (what was only for the Single attribute mode of use) <i>onchange<\/i> event logic but for a scenario where that is applied several times for variable inputs, and is that requirement &#8230;\n<ol>\n<li>synchronous &#8230; or &#8230;<\/li>\n<li>asynchronous<\/li>\n<\/ol>\n<p> &#8230; and for us, today, we need &#8220;synchronous&#8221; alas (as &#8220;asynchronous&#8221; would be a lot easier) &#8230; and this will become apparent later\n<\/li>\n<\/ul>\n<p>Okay, &#8220;later&#8221; has arrived, and it is time to define where we applied an example of <i>HTML select (&#8220;dropdown&#8221;) element being able to be dynamically toggled<\/i> in our web applications.  We decided to do it for our interfacings to our &#8230;<\/p>\n<ul>\n<li><a target=_blank title='YouTube API for Iframe embedded videos' href='https:\/\/developers.google.com\/youtube\/iframe_api_reference'>YouTube API for Iframe embedded videos<\/a> interface HTML\/Javascript &#8220;parent&#8221; web application called <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html----------GETME\" title='karaoke_youtube_api.htm'>karaoke_youtube_api.htm<\/a> to change in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html----------GETME\" title='karaoke_youtube_api.html'>this way<\/a>, for today&#8217;s work, and that we last tweaked with <a target=_blank title='Australian Indigenous Language HTML Map Audio and YouTube Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/australian-indigenous-language-html-map-audio-and-youtube-tutorial\/'>Australian Indigenous Language HTML Map Audio and YouTube Tutorial<\/a> &#8230; and that supervises &#8230;<\/li>\n<li>&#8220;Child&#8221; HTML\/Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html--------GETME\" title='stop_start_youtube.html'>stop_start_youtube.html<\/a> that changed in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html--------GETME\" title='stop_start_youtube.html'>this way<\/a> for today&#8217;s work, both establishing each other&#8217;s requirements for this new functionality via URL get parameter usage (ie. via use of the ? and &#038; of URLs), with or without HTML form element usage<\/li>\n<\/ul>\n<p>As we said earlier, we&#8217;re dealing with &#8220;synchronous&#8221; requirements here, giving the user the nominal video duration time, plus twenty seconds, to view the current video before the &#8220;child&#8221; calls the &#8220;parent&#8221; to change videos, powered via the Javascript <a target=_blank title='Javascript setTimeout method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_settimeout.asp'><i>setTimeout<\/i><\/a> timer functionality, possible only because of the YouTube API&#8217;s video duration time information (which we already had stored on the text of the &#8220;dropdown&#8221; &#8230; we must have seen this coming?!).<\/p>\n<p>Okay, what we are doing here can be defined, and that is good for this project, but can you imagine a generic <i>HTML select (&#8220;dropdown&#8221;) element being able to be dynamically toggled<\/i> for all the other myriad of uses HTML select (&#8220;dropdown&#8221;) elements are put to by programmers &#8230; recalls to mind that lame excuse at school &#8230; &#8220;it depends&#8221; &#8230; but that is true here, and generic thoughts will need a much more lateral thought process &#8220;outside the box&#8221; to get towards a better generic idea.<\/p>\n<p>However, in the meantime, this change today will have made quite a lot of difference to &#8230;<\/p>\n<ul>\n<li>YouTube API for Iframe embedded videos &#8220;parent&#8221; web application <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm\" title='karaoke_youtube_api.htm'>live run<\/a> (where you perform a Search for YouTube videos of interest such as <a target=_blank title='Example search' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaokeyoutubeapi.htm?emoji=on&#038;nokaraoke=y&#038;youtubeid=%20%20%20%20%20%20%20%20%20%20%20%20%20%20Adelaide'>this Adelaide search<\/a> example) &#8230; and the recent &#8230;<\/li>\n<li>TimeZone Places &#8220;grandparent&#8221; web application <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/tz_places.php\" title='tz_places.php'>live run<\/a> &#8230; and &#8230;<\/li>\n<li>Australian Indigenous Languages &#8220;grandparent&#8221; web application <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ImageMap\/Languages\/aboriginal_language_regions.html\" title=\"aboriginal_language_regions.html\">live run<\/a> &#8230; and &#8230;<\/li>\n<li>Country Quiz &#8220;grandparent&#8221; web application <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/country_flag_quiz.php\" title=\"country_flag_quiz.php\">live run<\/a><\/li>\n<\/ul>\n<p>And we hope you get something out of trying out this new additional functionality &#8230; the Single attribute mode of use is unchanged.<\/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='#d27104' onclick='var dv=document.getElementById(\"d27104\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/youtube\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d27104' 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='#d27117' onclick='var dv=document.getElementById(\"d27117\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/dropdown\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d27117' 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='#d27127' onclick='var dv=document.getElementById(\"d27127\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/survey\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d27127' 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='#d27139' onclick='var dv=document.getElementById(\"d27139\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/mobile\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d27139' 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='#d27161' onclick='var dv=document.getElementById(\"d27161\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/php\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d27161' 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='#d27187' onclick='var dv=document.getElementById(\"d27187\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/cookie\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d27187' 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='#d27207' onclick='var dv=document.getElementById(\"d27207\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/emoji\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d27207' 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='#d27217' onclick='var dv=document.getElementById(\"d27217\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/statistics\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d27217' 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='#d27231' onclick='var dv=document.getElementById(\"d27231\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/table\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d27231' 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='#d27247' onclick='var dv=document.getElementById(\"d27247\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/share\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d27247' 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='#d39413' onclick='var dv=document.getElementById(\"d39413\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/data\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d39413' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Our study of the Google Charts API has led us to identify &#8220;synergy sets&#8221; of chart functionality as per &#8230; &#8220;the statisticals&#8221; &#8230; Area and Bar and Column and Line charts &#8230; the subject of today&#8217;s tutorial &#8230; damn! &#8230; &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-area-bar-column-line-superimposition-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":[2419,88,2543,130,199,231,290,513,518,2614,549,587,699,894,932,997,2615,1226,2504],"class_list":["post-39413","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-aesthetics","tag-api","tag-area-chart","tag-bar-chart","tag-chart","tag-column-chart","tag-data","tag-google","tag-google-chart","tag-google-chart-api","tag-gui","tag-iframe","tag-line-chart","tag-overlay","tag-php","tag-programming","tag-superimposition","tag-svg","tag-synergy"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/39413"}],"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=39413"}],"version-history":[{"count":9,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/39413\/revisions"}],"predecessor-version":[{"id":39430,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/39413\/revisions\/39430"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=39413"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=39413"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=39413"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}