Tag Archives: timeline

Calendar iCal Integration Itinerary Tutorial

Posted on by

After the recent Calendar iCal Integration Timeline Tutorial you may have associated a Timeline with a Calendar event, even when the End Time of that event is not a defined concept, but what about a software integration, again with a Google Chart, but this time with … Google Chart Timeline Chart … “shaped” into a web application suitable to enter Itinerary information and then be able to associate these Timeline Start and End Events with iCal Calendar Starts and Ends to events, created … interactively, using the user’s default iCal application … and/or (in the case of “mobile” we should say “but rather”) via … email via PHP mail function ? This “Itinerary” concept has a huge amount of synergy with Calendar events, especially as a reminder service to people going on the trip (of the Itinerary) and/or to those affected by their absence, and so we found it a concrete type of web application to “start” out on. Yes, and there’s more! Tomorrow’s blog posting, you’ll have trouble believing, will have a connection, as a “proof of concept”, of where we go next with this project. So, after tomorrow’s explanation, we’ll probably see you back hereabouts in two days. But, in the meantime, for starters, try the PHP source code of itinerary.php and its live run to see what we are getting at here. If you try it, you’ll see that the Emoji Overlay sizing is determined on a integration “parent” subject by integration “parent” subject basis. Previous relevant Calendar iCal Integration Timeline Tutorial is shown below. After the recent Calendar iCal Integration WordPress Tutorial we found another integration candidate for our Calendar Event (creating) (component) “tool” web application that could be used in a variety of ways by other web applications. The second cab off the rank for this we decided should be (this) … Google Chart Annotated Timeline Chart … which should come as no surprise of a candidate for Calendar integration. So a few things have come together for this work, those being … Calendar iCal Integration WordPress Tutorial got us into an integration with PHP and fitting in with existing Javascript DOM issues … but only for discrete Emoji concepts … whereas … Emoji Overlay Share Tutorial yesterday was a proof of concept in two ways … code to respond to click events with regard to Emoji Overlays … but it also had within the code, and we tested it behind the scenes, the way it could … work off HTML primed with the special class “emojioverlay” and primed with a Javascript DOM property that would yield Emoji discrete “characters” but with the “#” missed out … believe me, this “kludgy feeling” idea saves a lot of bother because when you go back and retrieve the innerHTML property of Emoji data you do not easily arrive back at … &#[codepoint]; … and we work via … Continue reading →

Posted in eLearning, Event-Driven Programming, Trips, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

Calendar iCal Integration Timeline Tutorial

Posted on by

After the recent Calendar iCal Integration WordPress Tutorial we found another integration candidate for our Calendar Event (creating) (component) “tool” web application that could be used in a variety of ways by other web applications. The second cab off the rank for this we decided should be (this) … Google Chart Annotated Timeline Chart … which should come as no surprise of a candidate for Calendar integration. So a few things have come together for this work, those being … Calendar iCal Integration WordPress Tutorial got us into an integration with PHP and fitting in with existing Javascript DOM issues … but only for discrete Emoji concepts … whereas … Emoji Overlay Share Tutorial yesterday was a proof of concept in two ways … code to respond to click events with regard to Emoji Overlays … but it also had within the code, and we tested it behind the scenes, the way it could … work off HTML primed with the special class “emojioverlay” and primed with a Javascript DOM property that would yield Emoji discrete “characters” but with the “#” missed out … believe me, this “kludgy feeling” idea saves a lot of bother because when you go back and retrieve the innerHTML property of Emoji data you do not easily arrive back at … &#[codepoint]; … and we work via our homegrown Javascript docgetclass function to be able to overlay Emojis via the usual … position:absolute property opacity … and though it was optional for today’s work, we also included the third often used “overlay” CSS “player” … namely … z-index … and this Javascript function … function checkforclass() { var buildup=””; var cfcs=docgetclass(’emojioverlay’,’*’); for (var ij=0; ij<cfcs.length; ij++) { if (cfcs[ij].innerHTML.replace(/&amp;/g,’&’).indexOf(‘;&’) != -1) { var emjs=cfcs[ij].innerHTML.replace(/&amp;/g,’&’).split(“&”); buildup=”; cfcs[ij].style.opacity=eval(cfcs[ij].style.opacity / eval(-1 + emjs.length)); for (var iemjs=1; iemjs<emjs.length; iemjs++) { buildup+='<span style=”position:absolute;top:’ + cfcs[ij].style.top + ‘;left:’ + cfcs[ij].style.left + ‘;font-size:’ + cfcs[ij].style.fontSize + ‘;opacity:’ + cfcs[ij].style.opacity + ‘;z-index:’ + cfcs[ij].style.zIndex + ‘;”>&#’ + emjs[iemjs].split(‘;’)[0] + ‘;</span>’; } cfcs[ij].innerHTML=buildup; cfcs[ij].style.visibility=’visible’; } } } … that is the method used today to display an Emoji Overlay “character” to reflect, for a mobile application WebView scenario, of PHP mail created email usage for the Calendar Event creation functionality Google Chart Annotated Timeline Flash Legacy Tutorial introduced the flexible non-flash and flash toggling functionality of the Google Chart for Timelines PHP web application we wrote called annotatedtimeline_chart.php which changed quite a lot, like “function checkforclass” above, for this Calendar Event creation integration Why not try a Google Chart Annotated Timeline Chart live run to see what we are getting at, and while you’re there, try turning on a Calendar Event linked to one of the Timeline Events? Previous relevant Calendar iCal Integration WordPress Tutorial is shown below. After yesterday’s Calendar iCal Integration Email Tutorial we hoped we had a Calendar Event (creating) (component) “tool” web application that could be used in a variety … Continue reading →

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

Trip Google Chart London Population Timeline Tutorial

Posted on by

As far as the practicalities of using the closely related Google Chart Line/Bar/Area/Column Charts goes … area_chart.php is PHP programming source code for this live run bar_chart.php is PHP programming source code for this live run column_chart.php is PHP programming source code for this live run line_chart.php is PHP programming source code for this live run … we discovered today, that there are better representations than others in this set of four regarding the nature of the data you try to represent. I’ll explain this with regard to what we wanted to show the data for today. In the Museum of London on the trip that we’ve talked about recently with respect to mobile device usage, we found this intriguing display in the Museum of London (that we can not find the data of on the “net” … so you’ll just have to go there (and it’s somewhere in the “most recent period” section) … quick, before it moves) graphing the Population of London through history. So we’ve written a “Population of London Timeline” web application. Now at this point you may be wondering why … annotatedtimeline_chart.php is the changed Annotated Timeline Chart PHP code here for non-Flash mode becoming the default behaviour, and for the ability to switch between non-Flash and Flash (legacy) modes of use … and please feel free to try a live run … isn’t included in the list above regarding a “Population of London Timeline” web application? After all, it sounds ideal, but the fact is, when you are dealing with Year data that comes before 1900 their representation can be difficult to achieve given the Integer*4 (sorry to go all Fortran on you) (date difference in the smallest unit of time) arrangement behind the representation of dates in some computer programs. Pity really, because we would like proportion to the timeline, but then again we are not talking regular date data points, so this would have been “cramped” for the Annotated Timeline … so … my first thought, otherwise was the Column Chart … but in doing this realized that the Years disappeared with the 38 data points, and that the really small Populations in those early historical Years made them disappear and not be “clickable” … yes, we are using those Google Chart Select Event ideas you can read about a lot on this blog, and that you can get a taste for by perusing the relevant “similar feeling and concepts” Google Chart Select Event Post Readiness Tutorial as shown below, and that you can see in action if you look at our tutorial picture closely. So what turned out to be the best of the four Google Charts to use? The Bar Chart was the best at showing the Years and the small Population data values in those early historical years. Am sure there are other scenarios where the others are the … Continue reading →

Posted in eLearning, GUI, Not Categorised, Trips, Tutorials | Tagged , , , , , , , , , , | Leave a comment

Google Chart Annotated Timeline Flash Legacy Tutorial

Posted on by

With major players in the Information Technology space there are bound to be clashes regarding supported platforms. One ongoing dispute involves support for Adobe‘s Flash (Player) with Apple mobile devices (using the iOS operating system). When such concerns arise, developers often look for solutions that do not rub up against limitations such as this, rather than waiting for the dispute to finish, as that can take a long time. Some Google Charts code goes back to times before this issue and as such, some of the charts were designed with Flash usage in mind. One of these is the Annotated Timeline Chart which we last talked about with Google Chart Annotated Timeline Select Event Tutorial as shown below. So today we “bite the bullet” and make the Flash version (usage) of this chart become non-default, and use the Google Chart Annotation Chart as the underlying default methodology for our Annotated Timeline web application. Link to Google Chart Tools “spiritual home” … via Google. Link to Google Chart Annotation Charts (non-Flash) information … via Google. Link to Google Chart Annotated Timeline Charts (Flash) information … via Google. The switching between non-Flash and Flash modes of use is available via the optional suffix “&flash=y” applied to the Google Chart Annotated Timeline title, which flows on directly to the iPad iOS App we created and talked about, last, with Xcode Swift iOS Application End Game Primer Tutorial. Software wise our new Google Chart Annotated Timeline Chart integration involved … annotatedtimeline_chart.php is the changed Annotated Timeline Chart PHP code here for non-Flash mode becoming the default behaviour, and for the ability to switch between non-Flash and Flash (legacy) modes of use … and please feel free to try a live run … chow for now Previous relevant Google Chart Annotated Timeline Select Event Tutorial is shown below. Yesterday’s Google Chart Gantt Chart Primer Tutorial was the start of our voyage of discovery into Google Charts Gantt Chart here at this blog. Looking at this Gantt Chart reminded us of another chart that doesn’t form the dependencies of the Gantt Chart but does offer a good way to display the Gantt Chart data in such a way that information is all there in a good display mode, and that chart is the Google Chart Annotated Timeline Chart we first talked about with PHP/Javascript/HTML Google Chart Annotated Timeline Chart Tutorial. Well, today, it seems like a good time to introduce some ‘select’ event functionality to the Annotated Timeline Chart, so that it is ready to have some synergies with the Gantt Chart, to end up with relationships among … Calendar Chart Timeline Chart Annotated Timeline Chart Gantt Chart … which is not particularly surprising, as they all relate to the “when” of life, and if that’s how you tend to think as well, they can be a useful way to express your linking of “when” concepts … Continue reading →

Posted in eLearning, Event-Driven Programming, GUI, Tutorials | Tagged , , , , , , , , , , , | 9 Comments

Reservations Web Application Database Tutorial

Posted on by

The part we start off on today with the continuation of our PHP Reservations web application, we started at with Reservations Web Application Primer Tutorial as shown below, relates to an “early days” look at a proposed MySql database structure we can use with our application. As we also said yesterday, we see the crux of a reservation system as needing a … timeline display mechanism … yesterday’s work a database of some sort … today’s work … and for the future … at the very least … reports of sorts a payment system gateway arrangement … if you want online bookings to be a possibility … though we may not be doing this, because our project is fictional We hope over time, at this blog, that we’ve imbued an enthusiasm and admiration for the combination of PHP and MySql … our Fred and Ginger functionality duo … and the Edward Everett Horton of supporting acts … phpMyAdmin. MySql databases, in relation to PHP, are often seen as the “backend”, and it can be good for envisagement reasons and organizational reasons to compartmentalize a project into this “backend” (database) and “frontend” (web application). And so, in these early stages, it is debatable with design whether to work from the database “out” or the web application “in”, but either way, it is probably a database like MySql with the serverside language like PHP that will be needed to achieve the needs of a project like this with any commercial value. Plan ahead in these matters for whether any online payment (gateway) system arrangement fits in with your plans. There are also “out of the box” ways to approach this, especially with PHP, as well, that some search engine searches could soon uncover. Please know we are only advising on the gist of some of the components that go into such a job, but there are loads and loads of different approaches to trying to achieve all this. So here is some SQL (that starts with “use users;” (ie. our database is called users but you can call it what suits your project) you could use with MySql to follow up the phpMyAdmin interactive bits … create database users CHARACTER SET = utf8 COLLATE = utf8_bin; create user ‘stay_user’@’localhost’ IDENTIFIED BY ‘password’; … you could call reservation.sql that can be executed with MySql command line or, like we did with tutorial picture, interactively, in a phpMyAdmin SQL window … cute, huh?! To not create the database in the same SQL as with the table creation SQL is a good security measure that many eCommerce and blog installations make use of, so that this whole set of procedures is not too automatic … (that a robot could do it) … “not that there’s anything wrong with that”. We’ll be back with more as time goes on. Previous relevant Reservations Web Application Primer Tutorial … Continue reading →

Posted in Database, eLearning, Installers, Projects, Tutorials | Tagged , , , , , , , , , , , | 3 Comments

Reservations Web Application Primer Tutorial

Posted on by

We’re setting off on what could be a long running project to construct a PHP Reservations web application today. We see the crux of a reservation system as needing a … timeline display mechanism … today’s work … and for the future … at the very least … a database of some sort reports of sorts a payment system gateway arrangement … if you want online bookings to be a possibility … though we may not be doing this, because our project is fictional So with the “timeline display mechanism” let’s use a Google Chart Timeline Chart which we … first mentioned with PHP/Javascript/HTML Google Chart Timeline Chart Tutorial last mentioned with Google Chart Select Event Calendar Timeline Post Tutorial So here is the PHP source code you could call reservation.php and it was changed from the Timeline Chart code as per this link. Here is a live run link, as well. We’ll be back with more. If this was interesting you may be interested in this too.

Posted in eLearning, Projects, Tutorials | Tagged , , , , , , , , , , | 6 Comments

Google Chart Annotated Timeline Select Event Tutorial

Posted on by

Yesterday’s Google Chart Gantt Chart Primer Tutorial was the start of our voyage of discovery into Google Charts Gantt Chart here at this blog. Looking at this Gantt Chart reminded us of another chart that doesn’t form the dependencies of the Gantt Chart but does offer a good way to display the Gantt Chart data in such a way that information is all there in a good display mode, and that chart is the Google Chart Annotated Timeline Chart we first talked about with PHP/Javascript/HTML Google Chart Annotated Timeline Chart Tutorial. Well, today, it seems like a good time to introduce some ‘select’ event functionality to the Annotated Timeline Chart, so that it is ready to have some synergies with the Gantt Chart, to end up with relationships among … Calendar Chart Timeline Chart Annotated Timeline Chart Gantt Chart … which is not particularly surprising, as they all relate to the “when” of life, and if that’s how you tend to think as well, they can be a useful way to express your linking of “when” concepts with “why” and “how” and “where” concepts, perhaps … or some other types of concepts. “Who” knows? But I ask you, or perhaps Abbott and Costello first asked, “Who told Who?”. Yesterday we said … What can a Gantt Chart help with? Not looking anything up here (but you might) we think the Gantt Chart is great for setting deadlines and to turn up with in meetings focussed on outcomes (more so than incomes … chortle, chortle). Gantt Charts … establish date ranges for when tasks (or activities) should start and when they should complete allow for estimates of task “percentage achieved” define dependencies, as in, “does this task depend on the completion (or some other criteria) of another task” … and today we use the Duration and Percent Finished data points as the numerical datapoints the Annotated Timeline Chart asks for. Software wise our new Google Chart Gantt Chart integration involved … gantt_chart.php is the changed Gantt Chart PHP code here from yesterday annotatedtimeline_chart.php is the changed Annotated Timeline Chart PHP code here from some time back adding in new select event logic csv.php is the changed CSV spreadsheet export functionality supervised PHP programming source code as per changes (to cater for spreadsheet CSV exports involving this type of date data types) Link to Google Chart Tools “spiritual home” … via Google. Link to Google Chart Gantt Charts information … via Google. Link to Google Chart Annotated Timeline Charts information … via Google. This extra ‘select’ event functionality, available via the suffix “&onclick=y” applied to the Google Chart Gantt Chart title, flows on directly to the iPad iOS App we created and talked about, last, with Xcode Swift iOS Application End Game Primer Tutorial. So please try creating your own emailable Google Chart live run for … Annotated Timeline Chart Gantt Chart … Continue reading →

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , | 13 Comments

Google Chart Gantt Chart Primer Tutorial

Posted on by

Seems a fair time back we were discussing the ‘select’ event in relation to Google Charts functionality, but probably it isn’t. And perhaps it was a fair while back, but maybe it wasn’t, that Google and its Charts team introduced a new chart called the Gantt Chart, which a lot of people out there will know well, or less well, as a Project Management tool. What can a Gantt Chart help with? Not looking anything up here (but you might) we think the Gantt Chart is great for setting deadlines and to turn up with in meetings focussed on outcomes (more so than incomes … chortle, chortle). Gantt Charts … establish date ranges for when tasks (or activities) should start and when they should complete allow for estimates of task “percentage achieved” define dependencies, as in, “does this task depend on the completion (or some other criteria) of another task” Okay, so we are in the “when” of life, linking to other aspects like “why” or “how” or “where” perhaps. This means there are synergies with … Calendar Chart Timeline Chart … as we last were talking about with Google Chart Select Event Calendar Timeline Post Tutorial as shown below … and so, in our business logic ‘select’ event logic, we mention conversions to these other chart types. Along the way we got great help from this very useful link, so, thanks. Software wise our new Google Chart Gantt Chart integration involved … gantt_chart.php csv.php is the changed CSV spreadsheet export functionality supervised PHP programming source code as per changes (to cater for spreadsheet CSV exports involving this type of date data types) Link to Google Chart Tools “spiritual home” … via Google. Link to Google Chart Gantt Charts information … via Google. This extra ‘select’ event functionality, available via the suffix “&onclick=y” applied to the Google Chart Gantt Chart title, flows on directly to the iPad iOS App we created and talked about, last, with Xcode Swift iOS Application End Game Primer Tutorial. So please try creating your own emailable Google Chart live run for … Gantt Chart Stop Press It pays to stay informed of changes, here on 6th October 2016. At Google Charts, the “visualization” call has changed and we’ve changed accordingly as per gantt_chart.php is the changed PHP programming source code as per changes. We apologize for this “outage” on this Google Chart … for how long …. we’re not sure … oops. Previous relevant Google Chart Select Event Calendar Timeline Post Tutorial is shown below. With our Google Graphs API, or Google Chart Tools, web and mobile applications changes today, as with WordPress 4.1.1’s Google Chart Select Event Calendar Timeline Post Tutorial, we chip away at a useful generic improvement. We hook into the PHP server language strength of allowing the POST method processing of HTML form data, to get around the URL “GET” (method) … Continue reading →

Posted in eLearning, Event-Driven Programming, Projects, Tutorials | Tagged , , , , , , , , , , , , | 29 Comments