Updated by BCJKiwi:
|Name:||Annual Data Summary|
updated=7 March 2011
|Last update:||17 December 2012|
An updated article, that supercedes 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 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
- 1 Requirements
- 2 Original 1.1 Fileset and instructions:-
- 3 Usage
- 4 Possible problems
- 5 Customisation
- 6 Version Control
- webserver space
- Cumulus Dayfile.txt file uploaded to the webserver
- 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
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),
- (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
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
- Copy datasummary.css
- open datasummary.html or datasummary.php from your website in a browser
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.
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.
- 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.
Understanding the Basics
If you wish to use your own page to show the data on, do the following:
- for the JS version
- In the <HEAD> section.....
- 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
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!)
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
- 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.
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:
|#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|
1.2 New PHP version
1.1 PHP version included
1.0 Public launch