AnnualDataSummary: Difference between revisions
No edit summary |
m (spelling) |
||
(44 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
{{AddOnBanner|name=Annual Data Summary|type=HTML & Javascript|author=David Jamieson|contact=[[User:Daj|DAJ]]|updated=7 March 2011|version=1.1|updated=17 December 2012|version=1.2 BCJKiwi}} |
|||
Revision as of 22:41, 27 November 2012 |
|||
'Annual Data Summary' is a small tool to read the [[dayfile.txt]] produced by Cumulus and summarise this in a table, arranged like a calendar, showing a full years worth of a selected field such as maximum daily temperature. |
|||
Name: Annual Data Summary |
|||
Type: HTML & Javascript |
|||
Author: David Jamieson |
|||
Contact: DAJ |
|||
Last update: 7 March 2011 |
|||
Version: 1.1 |
|||
Updated by BCJKiwi: |
|||
= Requirements = |
|||
{{AddOnBanner|name=Annual Data Summary|type=HTML & Javascript|author=David Jamieson|contact=[[User:Daj|DAJ]]<br>updated=7 March 2011<br>version=1.1|updated=17 December 2012|version=1.2 BCJKiwi}} |
|||
*webserver space (could be on your own local machine or on a commercial server) |
|||
*Cumulus [[Dayfile.txt]] file on the webserver (for the original version of this tool, the default location is a subfolder called 'data') |
|||
*JavaScript enabled browser (all modern browsers use JavaScript) |
|||
*Use of '''Daily''' option (bottom left) on ''Sites/Options'' tab of '''Internet Settings'''screen to call command to upload 'dayfile.txt' to your web server (See Cumulus ''Help'' for more details) |
|||
*optionally, PHP enabled web server if you wish to use the PHP version |
|||
'''An updated article, that supersedes this one is called [[Daily_Summary]]''' |
|||
= The Source Code = |
|||
'Annual Data Summary' is a small tool to read the [[dayfile.txt]] produced by Cumulus and summarise this in a table, arranged like a calendar, showing a full years worth of a selected criterion such as maximum daily temperature. |
|||
== Original Fileset == |
|||
*The tool uses HTML, jQuery (a library script that produces Javascript) and a CSS file. |
*The tool uses HTML, jQuery (a library script that produces Javascript) and a CSS file. |
||
Line 20: | Line 21: | ||
*Both provide identical looking output and functionality, however if you have PHP services on your web server use the PHP version as it is slightly faster. |
*Both provide identical looking output and functionality, however if you have PHP services on your web server use the PHP version as it is slightly faster. |
||
An working example is [http://www.ibtest.dk/vejr/datasummary.html here] |
|||
*Download the following file...[http://wiki.sandaysoft.com/files/AnnualDataSummary.zip AnnualDataSummary.zip] |
|||
*Unzip the contents (five files will be extracted) |
|||
An working example used to be available at the subsequently abandoned web site [http://www.grantownweather.co.uk/historic/dataSummary.php here] |
|||
===Instructions=== |
|||
*Edit the file 'readDayfile.js' or 'readDayfile.php' depending on your choice in a good text editor (for example, [http://notepad-plus-plus.org/ notepad++]) and consider the variables in the top section of the script. |
|||
These are the configuration variables described below. |
|||
If you need to adjust any of these settings, edit the appropriate file. |
|||
<br> |
|||
*Copy the necessary files to your web site into a subfolder, or the root -- your choice |
|||
: if using the PHP version copy ''datasummary.php'' and ''readDayfile.php'' |
|||
: for the JavaScript version copy '''datasummary.html''' and '''readDayfile.js''' |
|||
*Copy ''datasummary.css'' |
|||
* Open '''datasummary.html''' or ''datasummary.php'' from your website in a browser |
|||
= Requirements = |
|||
*webserver space |
|||
*Cumulus [[Dayfile.txt]] file uploaded to the webserver |
|||
*Javascript enabled browser (all modern browsers use Javascript) |
|||
*optionally, a tool to automate the uploading of dayfile.txt to your webserver once per day. Example, [[CumulusToolbox]] |
|||
*optionally, PHP enabled web server if you wish to use the PHP version |
|||
== Configuration Variables == |
|||
by default, the script (the file 'readDayfile.js' or 'readDayfile.php' depending on your choice) will do the following: |
by default, the script (the file 'readDayfile.js' or 'readDayfile.php' depending on your choice) will do the following: |
||
Line 54: | Line 50: | ||
Change as needed, save and test |
Change as needed, save and test |
||
== Revised PHP == |
== Revised PHP == |
||
Here is a revised set of files (PHP only) ver 1.2. |
Here is a revised set of files (PHP only) ver 1.2. |
||
These are available here and update the Ver 1.1 fileset |
These are available here and update the Ver 1.1 fileset to eliminate errors in validation due to non-standard or deprecated code routines. |
||
They also include a couple of updates from DAJ version as advised by posts in the Forum. |
They also include a couple of updates from DAJ version as advised by posts in the Forum. |
||
The files include additional notes, and explanations on the changes, where relevant. |
The files include additional notes, and explanations on the changes, where relevant. |
||
*A working example is [http://www.fordingbridgeweather.co.uk/datasummary.php here] |
|||
*A working example was [http://silveracorn.co.nz/weather/datasummary.php here] and also [http://www.fordingbridgeweather.co.uk/datasummary.php here] |
|||
*Download the following file...[http://wiki.sandaysoft.com/files/AnnualDataSummary_12.zip AnnualDataSummary_12.zip], the zip contains 3 files: |
|||
*Download the following file...[https://cumuluswiki.org/files/AnnualDataSummary_12.zip AnnualDataSummary_12.zip], the zip contains 3 files: |
|||
*#'''readDayfile.php''' - script for reading the dayfile.txt and for creating the table structure that displays selected statistics in a calendar style |
*#'''readDayfile.php''' - script for reading the dayfile.txt and for creating the table structure that displays selected statistics in a calendar style |
||
*#'''datasummary.php''' - example 'carrier' web page, this one uses the Saratoga template system, so also requires 2 more scripts (not provided) ''Settings.php'' and ''common.php''. |
*#'''datasummary.php''' - example 'carrier' web page, this one uses the Saratoga template system, so also requires 2 more scripts (not provided) ''Settings.php'' and ''common.php''. You can use your own page instead of this file. |
||
*#'''datasummary.css''' - styling sheet for the table structure that displays selected statistics in a calendar style |
*#'''datasummary.css''' - styling sheet for the table structure that displays selected statistics in a calendar style |
||
*Follow the instructions below for the PHP version. |
|||
*Follow the instructions below for the PHP version. |
|||
== Alternative Web Tools == |
|||
Available only from either the Website Development or the Third Party Tools sections of the support forum are alternative tools that will display daily or seasonal summaries of the contents of [[dayfile.txt]]. Although they work with daily extremes and other statistics produced by Cumulus in that file, they are also designed to cope with additional information imported into that file. Consequently although Cumulus itself cannot produce nor process 'Nulls', these tools do have some capacity to handle null fields representing missing observations. |
|||
The tools are written in code to more modern standards than the original here and are generally far more flexible in what they can output. |
|||
= Original 1.1 Fileset and instructions:- = |
|||
=== Alternative PHP === |
|||
Look in the Website Development section of the Cumulus support forum - '''Web general''' sub forum: |
|||
*[http://sandaysoft.com/forum/viewtopic.php?f=14&t=5319 'Annual Data Summary - Coloured Values'] - An extensively coloured version with some useful discussion on the trade-off between testing values and efficient code here. |
|||
*[http://sandaysoft.com/forum/viewtopic.php?f=14&t=11133 'Annual data Summary (DAJ script) - show day-of-week'] - This is just one of several places where further ideas are explored by Mark Crossley and beteljuice. |
|||
*[http://sandaysoft.com/forum/viewtopic.php?f=14&t=11397 'Yet Another Dayfile Reader (PHP)'] - This is the ultimate/latest PHP version, it incoporates all the ideas discussed before, amongst many features the highlighting makes day of week appear in row headers, you can swap between daily and seasonal views and there is a table summary including averages. See that forum url for links to sites that use this version. |
|||
*download the following file...[https://cumuluswiki.org/files/AnnualDataSummary.zip AnnualDataSummary.zip] |
|||
=== Alternative JavaScript === |
|||
*Unzip the contents (five files will be extracted) |
|||
This section only is by [[User:Sfws|Sfws]] 00:53, 18 May 2013 (PDT) (slightly updated) |
|||
*Edit the file 'readDayfile' file in a a good text editor (for example, [http://notepad-plus-plus.org/ notepad++]). Edit the .js version or the .php depending on your choice |
|||
*Look for the line 'dayfile='/data/dayfile.txt';' around line 15 and change this to point to your dayfile.txt on your webserver. This path should start from the / (root) |
|||
An [http://sandaysoft.com/forum/viewtopic.php?f=18&t=8690 alternative Javascript/jQuery solution] is in the 3rd party tools sub forum within the Cumulus forum and its advantages are fully described in a file within the package. They include standards compliance, better integration with standard Cumulus pages, statistical additions to the bottom of each month's column, and easier tailoring to your preferences on wording, language, and text colouring. |
|||
*Copy the necessary files to your web site into a subfolder, or the root -- your choice |
|||
: if using the PHP version copy datasummary.php and readDayfile.php |
|||
One site using in January 2013 a variant based on an early version of my Javascript/jQuery alternative code, with its own look to the page, is [http://sassafras.id.au/projects/weather/dailyrecords.shtml found here]. Whilst a number of other people have tried later versions of this alternative code, it has not been adopted as widely as the PHP alternatives above, partly because this is designed for tailoring, and those are off the shelf packages. |
|||
: for the Javascript version copy datasummary.html and readDafyfile.js |
|||
*Copy datasummary.css |
|||
I originally edited a version in December 2011 from the original to offer easier customisation plus standards compliance etc. (similar aims to PHP version 1.2). During 2012-2013, my alternative JavaScript version evolved so none of the original code remained, while a number of additional features were added, whilst attempting to preserve ease of customisation to suit any requirements you have e.g. on the language and level of diagnostics output. Please note that it is difficult for me to provide any support on the final 15 Jan 2014 7:08 am script I offer in the forum as I actually swapped to a PHP version of this alternative script, and due to lack of interest in my javascript version I never considered sharing my PHP version. |
|||
* open datasummary.html or datasummary.php from your website in a browser |
|||
= Usage = |
= Usage = |
||
Along the top will be a menu of the (in original version) six data sets available and on the top left of the table is the year currently being shown. Change either the year, or click one of the top buttons to change the data set. Depending on the speed of your internet connection, and your browser, the new web page may take a few seconds to be processed as it involves: re-reading the dayfile.txt file, redrawing the table, and inserting the values. |
|||
Along the top will be a menu of the six data sets available and on the top left of the table is the year currently being shown. Change either the year, or click one of the top buttons to change the dataset. Depending on the speed of your internet connection, and your browser, the data may take a few seconds to be processed. |
|||
If you mouse over a particular value, it will be highlighted together with the corresponding day (row heading) and month (column heading). The highlighting functionality varies a bit between versions (see possible problems below). |
|||
If you select the pure Javascript solution available here, it means the page viewer's browser is doing all the work. The complete dayfile.txt is loaded each time you select a dataset, and your PC then filters and processes it. An [https://cumulus.hosiene.co.uk/viewtopic.php?f=18&t=8690 alternative Javascript/jQuery solution] that only reads the dayfile.txt once, however many times you choose a different data set or a different year is in the 3rd party tools forum. That alternative is thus considerably faster, especially with large dayfile.txt files. |
|||
What is shown, and how, in the cells at the intersection of the day and month headings, depends on the version you choose to install. |
|||
This is in contrast to a PHP solution also available here, where the source server does all the work and only sends the results to the viewer's browser. |
|||
== Opening a specific data set when the page is first loaded == |
|||
By default (in the original version) the table created will show the available daily values of the ''maximum temperature'' for the current ''local calendar year'' (see possible problems below), however you can start with any data set and any year (assuming you have those values in the dayfile.txt) by ''adding a 'Query String' to the end of your URL'' in the browser. |
|||
= Possible problems = |
|||
*The parameter 'data' (in the original version) takes mintemp, maxtemp, avgtemp, minmaxt, rainfall, windgust. (You can add further data sets or change the language of these values - see Localization). '''Note''' the specified data will be displayed even if it is assigned 'false' and does not appear as a button. |
|||
*You can supply both data set and year parameters, one only, or none |
|||
*This has been tested and runs on IE 7, IE 8, IE9, FireFox 3 to 14, Chrome/Dragon/SRWare Iron, and Safari -- running on the non IE browsers for both Windows and the Mac. |
|||
examples...., |
|||
*IE7 is notoriously slow for Javascript processing so there will be a longer delay as you change the data set (a few more seconds in some cases) |
|||
= Customisation = |
|||
*JS version -- '''myserver.com/datasummary.html?year=2010''' |
|||
*PHP version -- ''myserver.com/datasummary.php?year=2010'' |
|||
:This will open the default (maximum temperature) data set but initially showing year 2010 |
|||
== Understanding the Basics == |
|||
The 'tool' relies on two files for successful operation.... datasummary.css (the style sheet) and readDayfile.js (the Javascript) or readDayfile.php (the PHP version). The third file, datasummary.html/php, is simply a carrier page to show the data. |
|||
*JS version -- myserver.com/datasummary.html?data=rainfall&year=2009 |
|||
:This will open the rainfall data set for the year 2009. |
|||
If you wish to use your own page to show the data on, do the following: |
|||
== Processing == |
|||
If you select the pure Javascript original solution downloaded from this section, it means the page viewer's browser is doing all the work. The complete dayfile.txt is reloaded each time you select a dataset, and your browser then filters and processes the required subset of values from it. A table is then constructed by the script at the point indicated by the HTML DIV called 'tableData', and the values are then inserted. |
|||
*for the JS version |
|||
If you select one of the various PHP versions available from this page or the forum links above, the source server does all the work of constructing the HTML page and sends the result to the viewer's browser. |
|||
: In the <HEAD> section..... |
|||
<pre><link rel="stylesheet" type="text/css" media="screen" href="datasummary.css" /> |
|||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js" type="text/javascript"></script> |
|||
<script src="readDayfile.js" type="text/javascript"></script></pre> |
|||
: This loads the stylesheet; loads a jQuery library from Google servers (rather than having the file on your server); and loads the Javascript to build the table |
|||
: Once the page is loaded it runs readDayfile.js and will look for a DIV called 'tableData'; inserting the data table within it. You can change the DIV it inserts into (see later in this article). |
|||
*for the PHP version |
|||
= Customisation = |
|||
:use the code <pre><?php include('readDayfile.php');?></pre> |
|||
Please note that the table needs a good amount of space to show a full year of data (at least 900 pixels unless you start reducing the font size!) |
|||
== Understanding the Basics == |
|||
<br> |
|||
The original 'tool' relies on three files for successful operation: |
|||
# the jQuery library routines that allow it to work in any user agent (browser) |
|||
# datasummary.css (the style sheet) and |
|||
# either readDayfile.js (the JavaScript) or readDayfile.php (the PHP version of the script). |
|||
== Configuration Variables == |
|||
by default, the script will do the following: |
|||
In addition you need a carrier page to show the data. You can either use the page provided in the zip (datasummary.html or datasummary.php), or create your own page including: |
|||
* for both JS and PHP versions you need the script library and styling: |
|||
: In the <head> section..... |
|||
<pre><link rel="stylesheet" type="text/css" media="screen" href="datasummary.css" /> |
|||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1/jquery.js" type="text/javascript"></pre> |
|||
: This loads the stylesheet; loads a jQuery library from Google servers rather than having the file on your server, (note later versions of jQuery are not supported by old versions of Internet Explorer, use the older '1.5' used by DAJ instead of '2.1' if you want to); |
|||
*Insert it's contents into a DIV called 'tableData' (JS version only) |
|||
*Assumes the date format in the dayfile is dd/mm/yy |
|||
*Assumes the data in the dayfile is separated with a comma |
|||
The last two assumptions are fine for UK based systems, however others should check the dayfile.txt and adjust as necessary |
|||
If you need to adjust any of these settings, edit the readDayfile.js file and consider the variables in the top section of the script: |
|||
Please note that the table needs a good amount of space to show a full year of data (at least 900 pixels unless you start reducing the font size!) |
|||
*'''tableDiv''' - the name of the DIV on your webpage to insert the table into (JS Version only) |
|||
*'''field_delimiter''' - the symbol separating each of your fields in the dayfile.txt. For most people this is a comma but may also be a period (.) |
|||
*for the JS version |
|||
*'''date_delimiter''' - the symbol separating your date format. In the UK this is / however in other countires it may be - |
|||
: In the <body> section where you want the table to appear first declare the element and then call the script (other code can be inserted inbetween such as anchor links to your other pages): |
|||
<pre><div id="tableDiv"> |
|||
<noscript>Your browser has not enabled the JavaScript necessary to display the table here<noscript> |
|||
</div> |
|||
<script src="readDayfile.js" type="text/javascript"></script></pre> |
|||
: Once the page is loaded it runs readDayfile.js and will look for your HTML element with an id attribute called 'tableData' already existing; then inserting the data table within it. You can change the DIV (or HTML5 alternative blocking elements) it inserts into (see above). |
|||
Change as needed, save and test |
|||
*for the PHP version |
|||
:use the code <pre><?php include('readDayfile.php');?></pre> to include the script |
|||
== Localization / Language == |
== Localization / Language == |
||
Line 152: | Line 138: | ||
The script has been designed to be easily translated to your language of choice. |
The script has been designed to be easily translated to your language of choice. |
||
As |
As above, edit the readDayfile.js / .php |
||
*variable '''mn''' is a list of the 12 months of the year, in an abbreviated format. You may change these as necessary, but try to keep it to an abbreviation as there is limited space. |
*variable '''mn''' is a list of the 12 months of the year, in an abbreviated format. You may change these as necessary, but try to keep it to an abbreviation as there is limited space. |
||
*''''label_items'''' is a list of all possible data sets to be displayed. Again you can change these to suit |
*''''label_items'''' is a list of all possible data sets to be displayed. Again you can change these to suit. However, the format is a little more involved and you should take some care. Example,.... |
||
Example of a row,.... |
|||
<pre>['maxtemp','Max Temp','Maximum Temperature',true]</pre> |
<pre>['maxtemp','Max Temp','Maximum Temperature',true]</pre> |
||
*The first element, in this case 'maxtemp' -- |
*The first element, in this case 'maxtemp' -- must remain '''unchanged''', this is a system variable to identify the dataset and tested elsewhere in the code |
||
However, if you add a new data set, then your new first element should be a unique identifier. |
|||
*Second, '''Max Temp''' is the text to be displayed in the ''button'' at the top of the table. You may change this to your own language |
*Second, '''Max Temp''' is the text to be displayed in the ''button'' at the top of the table. You may change this to your own language |
||
If you add a new data set, remember to consider how many buttons can be fitted across the top of the table, you may wish to split into multiple rows. |
|||
*Third, '''Maximum Temperature''' is the text shown at the top of the table to ''describe the current data set''; again you may change this |
*Third, '''Maximum Temperature''' is the text shown at the top of the table to ''describe the current data set''; again you may change this |
||
*Finally, 'true' will display this button at the top; 'false' will hide it. Therefore, if you do not wish to allow users to jump to the 'Rainfall |
*Finally, 'true' will display this button at the top; 'false' will hide it. Therefore, if you do not wish to allow users to jump to the 'Rainfall dataset' change the 'true' to 'false' in the 'rainfall' element of the variable. (true/false MUST be lowercase) |
||
(NOTE: [[User:Sfws|Sfws]] 12:22, 31 December 2012 (UTC) |
|||
The ''switch'' part of the coding identifies the columns in dayfile.txt for the values to be displayed. If you wish to add new data sets then see the alternative JavaScript version in the forum for more explanation about the original coding, and an alternative way to specify the columns in a revised version of the above array.) |
|||
<br> |
<br> |
||
== Opening a specific data set when the page is first loaded == |
|||
== Styling (applies only to original version of code) == |
|||
By default (in the original version) the table created will show the available daily values of the ''maximum temperature'' for the current ''local calendar year'' (see possible problems below), however you can start with any data set and any year (assuming you have those values in the dayfile.txt) by ''adding a 'Query String' to the end of your URL'' in the browser. |
|||
*The parameter 'data' (in the original version) takes mintemp, maxtemp, avgtemp, minmaxt, rainfall, windgust. (You can add further data sets or change the language of these values - see Localization). '''Note''' the specified data will be displayed even if it is assigned 'false' and does not appear as a button. |
|||
*You can supply both data set and year parameters, one only, or none |
|||
examples...., |
|||
*JS version -- '''myserver.com/datasummary.html?year=2010''' |
|||
*PHP version -- ''myserver.com/datasummary.php?year=2010'' |
|||
:This will open the default (maximum temperature) data set but initially showing year 2010 |
|||
The table styling is completely configurable using the included datasummary.css [[Stylesheet]]. By default it is using similar colours to the standard Cumulus website. Below are a few of the key entries to consider when adjusting settings (typically colouring)... Also see [http://sandaysoft.com/forum/viewtopic.php?f=14&t=5319 support forum thread about colouring with php] |
|||
*JS version -- myserver.com/datasummary.html?data=rainfall&year=2009 |
|||
:This will open the rainfall data set for the year 2009. |
|||
== Styling == |
|||
The table styling is completely configurable using the included datasummary.css [[Stylesheet]]. By default it is using similar colours to the standard Cumulus website. Below are a few of the key entries to consider when adjusting settings (typically colouring)... |
|||
In the 'datasummary.css' file: |
In the 'datasummary.css' file: |
||
Line 190: | Line 184: | ||
|- |
|- |
||
| #table_container .zerovalue |
| #table_container .zerovalue |
||
| In the Rainfall and Windgust |
| In the Rainfall and Windgust datasets this style is applied to any values of 0. By default, the colour is set to a lighter grey but you could add 'dispaly:none;' to hide zero values completely |
||
|- |
|- |
||
| #table_container table th |
| #table_container table th |
||
Line 205: | Line 199: | ||
|} |
|} |
||
<br> |
|||
= Possible problems = |
|||
*Version 1.1 has been tested and runs on IE 7, IE 8, IE 9, FireFox 3 to 14, IceDragon, Chrome/Dragon/SRWare Iron, and Safari -- running on the non IE browsers for both Windows and the Mac. |
|||
*IE7 is notoriously slow for Javascript processing so there will be a longer delay as you change the data set (a few more seconds in some cases) |
|||
*Non-standard attributes 'datacol' and 'datarow' are generated by the original javascript and php routines that will not pass validation against standards (in HTML5 these can be made to validate by changing to 'data-col' and 'data-row'). |
|||
*In version 1.1 of this tool, jQuery version 1.5 is called, this permitted use of '.attr' object to add/remove the highlight; from jQuery version 1.6 that was deprecated and the '.prop' object is now specified for the same purpose. |
|||
*Version 1.0 and 1.1 default to showing a table for viewer's local current calendar year. Remember the dayfile.txt (even if updated each day) only contains records up to the day ending at the last rollover time using the timezone local to the weather station. Timezone differences when combined with rollover time variations can lead to a period of 2 days discrepancy. At New Year a blank table will be displayed during this period by default. For example, 30 or 31 (depending on whether rollover has occured) in December of the last year could be the latest available for a site in USA whilst the original version of the code is showing a blank table of the next year during early morning on 2 January in Austrailia. Even when station and viewer are in same timezone, there will be a blank table until the first rollover on 2 January. |
|||
*Version 1.2 defaults to showing the year found in the last row of dayfile.txt. |
|||
*The final field on each row is not read correctly, because the row break has been specified wrongly for a Microsoft Windows environment, it should quote '''fdata.split("\r\n");''' i.e. ''defines that carriage return then line feed (newline) used to split daily observations in dayfile''. Because the script presented here only processes a small number of fields from earlier in the row, this error does not affect the output for the published code. |
|||
= Version Control = |
= Version Control = |
||
1.2 New PHP version |
|||
(Alternative JavaScript and PHP versions not listed here - see forum references above) |
|||
1.2 This revised PHP only version can also be downloaded above |
|||
1.1 PHP version included with JavaScript version in new download package |
|||
1.0 Public launch (JavaScript only, no longer available for download) |
|||
1.1 PHP version included |
|||
<br> |
|||
1.0 Public launch |
|||
{{WatchReminderBanner}} |
|||
[[Category:WebTools]] |
[[Category:WebTools]] |
Latest revision as of 10:02, 9 January 2022
Revision as of 22:41, 27 November 2012 Name: Annual Data Summary Type: HTML & Javascript Author: David Jamieson Contact: DAJ Last update: 7 March 2011 Version: 1.1
Updated by BCJKiwi:
Name: | Annual Data Summary |
Type: | HTML & Javascript |
Author: | David Jamieson |
Contact: | DAJ updated=7 March 2011 version=1.1 |
Last update: | 17 December 2012 |
Version: | 1.2 BCJKiwi |
An updated article, that supersedes this one is called Daily_Summary
'Annual Data Summary' is a small tool to read the dayfile.txt produced by Cumulus and summarise this in a table, arranged like a calendar, showing a full years worth of a selected criterion such as maximum daily temperature.
- The tool uses HTML, jQuery (a library script that produces Javascript) and a CSS file.
- The JavaScript version does not require a webserver with PHP services enabled. (Many of the free hosting services do not offer PHP so this was a solution to that problem).
- The alternative is a PHP version (included so you have the option to use either).
- Both provide identical looking output and functionality, however if you have PHP services on your web server use the PHP version as it is slightly faster.
An working example used to be available at the subsequently abandoned web site here
Requirements
- webserver space
- Cumulus Dayfile.txt file uploaded to the webserver
- Javascript enabled browser (all modern browsers use Javascript)
- optionally, a tool to automate the uploading of dayfile.txt to your webserver once per day. Example, CumulusToolbox
- optionally, PHP enabled web server if you wish to use the PHP version
Configuration Variables
by default, the script (the file 'readDayfile.js' or 'readDayfile.php' depending on your choice) will do the following:
- (both versions) Assume the dayfile.txt is read from a subfolder called 'data'.
- (JS version only) Insert the table it generates into a HTML element with attribute id='tableData'
- (both versions) Assume the date format in the dayfile is dd/mm/yy (the month is always in the middle for all Cumulus log files)
- (both versions) Assume the data in the dayfile is separated with a comma
The last two assumptions are fine for UK based systems, however others should check their dayfile.txt and adjust as necessary
- Look for the line 'dayfile='/data/dayfile.txt';' around line 15 and change this to point to your dayfile.txt on your webserver.
- for PHP version the path should start from the / (root),
- for JavaScript version the path should start from where the HTML will be stored.
- (JS Version only) tableDiv - the HTML element id attribute on your webpage to insert the table into
- (both versions) field_delimiter - the symbol separating each of your fields in the dayfile.txt. For most people this is a comma but (if you use comma to separate integer and decimal parts of real numbers) it could be a semi-colon (;) or other symbol.
- (both versions) date_delimiter - the symbol separating your date format. See setup.
Change as needed, save and test
Revised PHP
Here is a revised set of files (PHP only) ver 1.2.
These are available here and update the Ver 1.1 fileset to eliminate errors in validation due to non-standard or deprecated code routines. They also include a couple of updates from DAJ version as advised by posts in the Forum. The files include additional notes, and explanations on the changes, where relevant.
- A working example was here and also here
- Download the following file...AnnualDataSummary_12.zip, the zip contains 3 files:
- readDayfile.php - script for reading the dayfile.txt and for creating the table structure that displays selected statistics in a calendar style
- datasummary.php - example 'carrier' web page, this one uses the Saratoga template system, so also requires 2 more scripts (not provided) Settings.php and common.php. You can use your own page instead of this file.
- datasummary.css - styling sheet for the table structure that displays selected statistics in a calendar style
- Follow the instructions below for the PHP version.
Original 1.1 Fileset and instructions:-
- download the following file...AnnualDataSummary.zip
- Unzip the contents (five files will be extracted)
- Edit the file 'readDayfile' file in a a good text editor (for example, notepad++). Edit the .js version or the .php depending on your choice
- Look for the line 'dayfile='/data/dayfile.txt';' around line 15 and change this to point to your dayfile.txt on your webserver. This path should start from the / (root)
- Copy the necessary files to your web site into a subfolder, or the root -- your choice
- if using the PHP version copy datasummary.php and readDayfile.php
- for the Javascript version copy datasummary.html and readDafyfile.js
- Copy datasummary.css
- open datasummary.html or datasummary.php from your website in a browser
Usage
Along the top will be a menu of the six data sets available and on the top left of the table is the year currently being shown. Change either the year, or click one of the top buttons to change the dataset. Depending on the speed of your internet connection, and your browser, the data may take a few seconds to be processed.
If you select the pure Javascript solution available here, it means the page viewer's browser is doing all the work. The complete dayfile.txt is loaded each time you select a dataset, and your PC then filters and processes it. An alternative Javascript/jQuery solution that only reads the dayfile.txt once, however many times you choose a different data set or a different year is in the 3rd party tools forum. That alternative is thus considerably faster, especially with large dayfile.txt files.
This is in contrast to a PHP solution also available here, where the source server does all the work and only sends the results to the viewer's browser.
Possible problems
- This has been tested and runs on IE 7, IE 8, IE9, FireFox 3 to 14, Chrome/Dragon/SRWare Iron, and Safari -- running on the non IE browsers for both Windows and the Mac.
- IE7 is notoriously slow for Javascript processing so there will be a longer delay as you change the data set (a few more seconds in some cases)
Customisation
Understanding the Basics
The 'tool' relies on two files for successful operation.... datasummary.css (the style sheet) and readDayfile.js (the Javascript) or readDayfile.php (the PHP version). The third file, datasummary.html/php, is simply a carrier page to show the data.
If you wish to use your own page to show the data on, do the following:
- for the JS version
- In the <HEAD> section.....
<link rel="stylesheet" type="text/css" media="screen" href="datasummary.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js" type="text/javascript"></script> <script src="readDayfile.js" type="text/javascript"></script>
- This loads the stylesheet; loads a jQuery library from Google servers (rather than having the file on your server); and loads the Javascript to build the table
- Once the page is loaded it runs readDayfile.js and will look for a DIV called 'tableData'; inserting the data table within it. You can change the DIV it inserts into (see later in this article).
- for the PHP version
- use the code
<?php include('readDayfile.php');?>
Please note that the table needs a good amount of space to show a full year of data (at least 900 pixels unless you start reducing the font size!)
Configuration Variables
by default, the script will do the following:
- Insert it's contents into a DIV called 'tableData' (JS version only)
- Assumes the date format in the dayfile is dd/mm/yy
- Assumes the data in the dayfile is separated with a comma
The last two assumptions are fine for UK based systems, however others should check the dayfile.txt and adjust as necessary
If you need to adjust any of these settings, edit the readDayfile.js file and consider the variables in the top section of the script:
- tableDiv - the name of the DIV on your webpage to insert the table into (JS Version only)
- field_delimiter - the symbol separating each of your fields in the dayfile.txt. For most people this is a comma but may also be a period (.)
- date_delimiter - the symbol separating your date format. In the UK this is / however in other countires it may be -
Change as needed, save and test
Localization / Language
The script has been designed to be easily translated to your language of choice.
As above, edit the readDayfile.js / .php
- variable mn is a list of the 12 months of the year, in an abbreviated format. You may change these as necessary, but try to keep it to an abbreviation as there is limited space.
- 'label_items' is a list of all possible data sets to be displayed. Again you can change these to suit. However, the format is a little more involved and you should take some care. Example,....
['maxtemp','Max Temp','Maximum Temperature',true]
- The first element, in this case 'maxtemp' -- must remain unchanged, this is a system variable to identify the dataset and tested elsewhere in the code
- Second, Max Temp is the text to be displayed in the button at the top of the table. You may change this to your own language
- Third, Maximum Temperature is the text shown at the top of the table to describe the current data set; again you may change this
- Finally, 'true' will display this button at the top; 'false' will hide it. Therefore, if you do not wish to allow users to jump to the 'Rainfall dataset' change the 'true' to 'false' in the 'rainfall' element of the variable. (true/false MUST be lowercase)
Opening a specific data set when the page is first loaded
By default (in the original version) the table created will show the available daily values of the maximum temperature for the current local calendar year (see possible problems below), however you can start with any data set and any year (assuming you have those values in the dayfile.txt) by adding a 'Query String' to the end of your URL in the browser.
- The parameter 'data' (in the original version) takes mintemp, maxtemp, avgtemp, minmaxt, rainfall, windgust. (You can add further data sets or change the language of these values - see Localization). Note the specified data will be displayed even if it is assigned 'false' and does not appear as a button.
- You can supply both data set and year parameters, one only, or none
examples....,
- JS version -- myserver.com/datasummary.html?year=2010
- PHP version -- myserver.com/datasummary.php?year=2010
- This will open the default (maximum temperature) data set but initially showing year 2010
- JS version -- myserver.com/datasummary.html?data=rainfall&year=2009
- This will open the rainfall data set for the year 2009.
Styling
The table styling is completely configurable using the included datasummary.css Stylesheet. By default it is using similar colours to the standard Cumulus website. Below are a few of the key entries to consider when adjusting settings (typically colouring)...
In the 'datasummary.css' file:
CSS Element | Description |
---|---|
#table_container .highlight | Used to highlight the mouse position within the table, and also the row and column header of the data cell. |
#table_container .smallfont | Adjusting the font size to something smaller when showing both Max & Min temp on one data cell |
#table_container .zerovalue | In the Rainfall and Windgust datasets this style is applied to any values of 0. By default, the colour is set to a lighter grey but you could add 'dispaly:none;' to hide zero values completely |
#table_container table th | Colouring for the top header (Month names) and left header (day numbers) |
#table_container table td,table th | The width of each data cell in the table. Be careful adjusting this as making it too small will stop the data being displayed completely |
#table_menu li | The styling for the buttons at the top of the page (those for changing the data set) |
#table_container | Set the overall font size and style used in the table, as well as the text colour; table positioning and maximum width |
Version Control
1.2 New PHP version
1.1 PHP version included
1.0 Public launch