Numbers Guessing Game
Your Numbers Game
Get
clueYour
answerYour
ScoreClue? Score 0/0
-
Recent Posts
- PHP Exif Quiz Geographicals Tutorial
- PHP Exif Quiz Tutorial
- PHP Exif Retention off iPhone Images Tutorial
- List to Grid Layout CSS Media Query Tutorial
- List to Grid Layout Primer Tutorial
- Out and About WordPress Blog Content Tweaks Just with iPhone Tutorial
- Command Line History By Date Tutorial
- Overseas Travel Global Roaming Mobile Primer Tutorial
Categories
- Ajax
- Android
- Animation
- Anything You Like
- Code::Blocks
- Coding
- Colour Matching
- Data Integration
- Database
- Delphi
- Eclipse
- eLearning
- ESL
- Event-Driven Programming
- Games
- GIMP
- GUI
- Hardware
- Installers
- iOS
- Land Surveying
- Moodle
- Music Poll
- NetBeans
- Networking
- News
- Not Categorised
- OOP
- Operating System
- Photography
- Projects
- Signage Poll
- Software
- SpectroPhotometer
- Tiki Wiki
- Trips
- Tutorials
- Uncategorized
- Visual Studio
- Xcode
Meta
Tags
Ajax animation background button canvas command line CSS Did you know DOM dropdown email emoji event form game Google Google chart hashtag HTML IFRAME image iOS Javascript MAMP media mobile navigation onclick overlay PHP popup programming select share sharing SMS SVG table text textarea tutorial url video web browser webpageYour Background Image
OnTopList
Tag Archives: timeline
Google Chart via CSV Header Data Tutorial
Many jobs that involve data form themselves into a … header details … data model. It happens all the time in Information Technology. Just think of General Ledgers in accounting. At the database table level supporting these arrangements there’ll be a smaller sized header table off which there will be a mechanism to “drill down” into the details database table. In our current project, up until today, we’ve only taken a cursory interest in the “header” data thinking for it, offering only a pretty awkward and clunky mechanism for the user to enter a Google Chart title with that “#” method on the top textbox. In our priorities for this job we were much more focussed on how to deal with the larger volumes of data, and this is always associated with the “details” of the Google Chart data. Within what we categorize into a “header” data categorization of the Google Chart data we would include … chart title chart axis labelling chart legend wording chart menu wording (on the Annotated Timeline Chart for instance) … the data items needed to “personalize” (or “particularize”) the data into the “business logic” associated with the CSV data (or subset of that data, being as we can select columns of interest with our web application) of the job. Behind the scenes even before today we’d hidden the “header” data into the HTML form (type=hidden) textboxes POSTed to the Google Chart interfacers, but today we … change relevant type=hidden textboxes in the HTML form to type=text style=display:inline (so that they line up in one row across the screen below the column selectors, and the use of HTML input placeholder attributes we think does away with the need for labels) make sure the HTML form “action” attribute reflects any user changed textbox fields add an HTML form onsubmit event function that makes these textboxes disappear once the CSV columns of interest are decided upon add a user entered “?” for the “title” textbox be a mechanism to preview the Google Chart of interest that shows the (often) complex user interactivity possibilities for that Google Chart, so that the user can do this with that “title” textbox as well should they be more advanced users So see what we did to get to where we are today after yesterday’s Google Chart Date Time Charts via CSV Tutorial … supervisor CSV to Bubble Chart csv_to_bubblechart.htm‘s live run
Posted in eLearning, Event-Driven Programming, Tutorials
Tagged Ajax, baby name, Bubble Chart, business logic, calendar, child, correlation, cross-browser, cross-platform, CSV, data.gov, date, datetime, details, dropdown, file API, form, Google chart, header, HTML, HTML5, IFRAME, input, iOS, iPad, iPhone, Javascript, New York, parent, personalize, PHP, placeholder, programming, select, testing, time, timeline, tutorial, unit test
Leave a comment
Google Chart Date Time Charts via CSV Tutorial
With the recent Google Chart More Charts via CSV Tutorial‘s CSV file interfacing to our interfacings to Google Charts … Bubble Chart Pie Chart Histogram Chart Map Chart Geo Chart Intensity Chart Area Chart Bar Chart Column Chart Line Chart … did you notice a common theme, or perhaps a common non-theme?! Yes, none of the Google Charts above involved date nor datetime fields. So, today, we add … Annotated Timeline Chart Calendar Chart Timeline Chart … to the list, and so add some “when of life” interest to the potential for converting CSV data into meaningful chart data representations of that data. You might wonder, “Where’s the complication there? Why didn’t this get scheduled earlier?” Well, like we’ve mentioned before at this blog, really appreciate the times when you, as the programmer, are in charge of the form of the data, but this job is not such a case, alas. We just do our best trying to imagine what might be thrown at the PHP (actually done in the Javascript client realms) as far as representing a date goes. Sadly though, there are many ways to represent a date, and we just try to imagine what is likely here. One difficult issue is the common way some countries represent dates in MM/DD/YYYY format. We like a default set of thinking that a user will use DD/MM/YYYY and if MM/DD/YYYY is being used, we hope the first instance of its use is one where the “DD” used is bigger than “12”, and we can know the date format being used is more likely to be MM/DD/YYYY. But please be aware there are many more delimiter and inhouse approaches that might pass by code that allows for date and/or datetime based data. Later, at the interfacing to the Google Chart, the Google Chart wants dates or datetimes to be represented by a Date object (“constructor”). Plain sailing once you get to this, as long as one last quirk is attended to … A date of 13 July 2018 … needs a Google Chart date “constructor” of the form … new Date(2018, 6, 13) … Go Monthly DeficitFigure?! As for the HTML and Javascript supervisors … supervisor CSV to Bubble Chart csv_to_bubblechart.htm‘s live run link web application changed this way … calls and uses … external Javascript csv_to_bubblechart.js changed this way … interfacing to the changed Google Chart interfacer PHP code report
Posted in eLearning, Event-Driven Programming, Not Categorised, Tutorials
Tagged Ajax, baby name, Bubble Chart, calendar, child, correlation, cross-browser, cross-platform, CSV, data.gov, date, datetime, dropdown, file API, form, Google chart, HTML, HTML5, IFRAME, input, iOS, iPad, iPhone, Javascript, New York, parent, PHP, programming, select, testing, time, timeline, tutorial, unit test
Leave a comment
HTML5 Time Tag Timeline Tutorial
The recent HTML5 Time Tag Primer Tutorial introduced the time tag, an HTML5 initiative, into our frame of reference here at this blog. As soon as date and/or time come into the picture the “when” of life comes into focus, and the use of the fourth dimension. As such, this HTML time tag can be the launching pad for interfacing to other “when” based web applications we’ve developed here. With this in mind we … interface use_time.htm‘s live run to the Google Chart Timeline Chart interfacing timeline_chart.php‘s live run take the opportunity, while the HTML is so separated from the Javascript (and CSS) in this project to move the Javascript to an external Javascript use_time.js (causing the HTML and CSS to shrink in this way) With changes like this it can be important to leave the door open for people to not access this new Timeline (in an HTML iframe element), in terms of backward compatibility “friendliness”, and we allow for that via either/both bold (part of) ways below … HTML and CSS parent use_time.htm calling supervised Javascript use_time.js via … <script type=’text/javascript’ src=’use_time.js?notimeline=y’></script> … and/or … web browser address bar URL such as … HTTP://www.rjmprogramming.com.au/HTMLCSS/use_time.htm?notimeline=y But we are of the view that interfacing to other web applications with synergies is generally a good thing to do, and can inspire other ideas to develop regarding improvements to functionality. Previous relevant HTML5 Time Tag Primer Tutorial is shown below. You might be forgiven reading this webpage about the time tag introduced with HTML5 that it is not of much use, because it doesn’t show any distinguishing feature yet, in any of the web browsers. But you can tailor the use of it yourself, and to show this we took the HTML lacking a <head></head> section and not change this HTML at all, but add our own CSS and Javascript (DOM) <head></head> section to embellish its functionality considerably. We use a combination of … CSS ::after { content: ‘blah blah’; } pseudo-element CSS :hover selector window.onload = init; // Javascript onload functionality document.body.innerHTML+=styles; // Javascript where styles variable contains dynamically constructed <body></body> section CSS <style></style> (an important thing to remember you can do (at a document.body onload event Javascript function, for example)) … and for this we used … dynamically classed HTML time elements and moving on the onclick event (for mobile device use) as per … times[iw].onclick = function() { };
Posted in eLearning, Tutorials
Tagged body, class, CSS, DOM, external Javascript, Google, Google chart, head, HTML, HTML5, IFRAME, interface, Javascript, mark, programming, pseudo element, stop press, style, timeline, tutorial
Leave a comment
Thanks. Since then, a Shower Songs project at https://www.rjmprogramming.com.au/HTMLCSS/shower_songs.html is an improvement regarding "Radio Play" on mobile platforms.