1,120
edits
AnnualDataSummary: Difference between revisions
m
Updated for PHP version
(Created Page) |
m (Updated for PHP version) |
||
| Line 1: | Line 1: | ||
{{AddOnBanner|name=Annual Data Summary|type=HTML & Javascript|author=David Jamieson|contact=[[User:Daj|DAJ]]|updated= | {{AddOnBanner|name=Annual Data Summary|type=HTML & Javascript|author=David Jamieson|contact=[[User:Daj|DAJ]]|updated=7 March 2011|version=1.1}} | ||
'Annual Data Summary' is a small tool to read the [[dayfile.txt]] produced by Cumulus and summarise this in a table showing a full years worth of data. This tool uses standard HTML and Javascript so 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) | 'Annual Data Summary' is a small tool to read the [[dayfile.txt]] produced by Cumulus and summarise this in a table showing a full years worth of data. This tool uses standard HTML and Javascript so 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). However, a PHP version is included so you have the option to use either. Both provide identical data 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.grantownweather.co.uk/historic/dataSummary.php here] | An working example is [http://www.grantownweather.co.uk/historic/dataSummary.php here] | ||
| Line 11: | Line 11: | ||
*Javascript enabled browser (all modern browsers use Javascript) | *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, 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 | |||
= The Basics = | = The Basics = | ||
*download the following file...[http://wiki.sandaysoft.com/files/AnnualDataSummary.zip AnnualDataSummary.zip] | *download the following file...[http://wiki.sandaysoft.com/files/AnnualDataSummary.zip AnnualDataSummary.zip] | ||
*Unzip the contents ( | *Unzip the contents (five files will be extracted) | ||
*Edit the file 'readDayfile | *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 ' | *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 | *Copy the necessary files to your web site into a subfolder, or the root -- your choice | ||
* open datasummary.html | : 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 = | = Usage = | ||
| Line 29: | Line 32: | ||
As this is a pure Javascript solution it means your browser is doing all the work. The complete dayfile.txt is loaded each time you show the data and your PC then filters and processes it. This is in contrast to a PHP solution where the server does all the work and only sends the results. | As this is a pure Javascript solution it means your browser is doing all the work. The complete dayfile.txt is loaded each time you show the data and your PC then filters and processes it. This is in contrast to a PHP solution where the server does all the work and only sends the results. | ||
= Possible problems = | = Possible problems = | ||
| Line 35: | Line 37: | ||
*This has been tested and runs on IE 7, IE 8, FireFox 3 & 4, Chrome and Safari -- the latter three for both Windows and the Mac. | *This has been tested and runs on IE 7, IE 8, FireFox 3 & 4, Chrome and Safari -- the latter three 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) | *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 = | = Customisation = | ||
| Line 42: | Line 43: | ||
== Understanding the Basics == | == Understanding the Basics == | ||
The 'tool' relies on two files for successful operation.... datasummary.css (the style sheet) and readDayfile.js (the Javascript). The third file, datasummary.html, is simply a carrier page to show the data. | 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: | |||
In the <HEAD> section..... | *for the JS version | ||
: In the <HEAD> section..... | |||
<pre><link rel="stylesheet" type="text/css" media="screen" href="datasummary.css" /> | <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="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js" type="text/javascript"></script> | ||
<script src="readDayfile.js" type="text/javascript"></script> | <script src="readDayfile.js" type="text/javascript"></script></pre> | ||
</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 | ||
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 <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!) | |||
<br> | <br> | ||
| Line 61: | Line 66: | ||
by default, the script will do the following: | by default, the script will do the following: | ||
*Insert it's contents into a DIV called 'tableData' | *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 date format in the dayfile is dd/mm/yy | ||
*Assumes the data in the dayfile is separated with a comma | *Assumes the data in the dayfile is separated with a comma | ||
| Line 69: | Line 74: | ||
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: | 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 | *'''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 (.) | *'''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 - | *'''date_delimiter''' - the symbol separating your date format. In the UK this is / however in other countires it may be - | ||
| Line 79: | Line 84: | ||
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 above, edit the readDayfile.js | 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. | ||
| Line 95: | Line 100: | ||
By default the table will summaries the maximum temperature for the current year, however you can start with any dataset or year (assuming you have the data in the dayfile.txt) but adding a string to the end of your URL in the browser. examples...., | By default the table will summaries the maximum temperature for the current year, however you can start with any dataset or year (assuming you have the data in the dayfile.txt) but adding a string to the end of your URL in the browser. examples...., | ||
*myserver.com/datasummary.html?year=2010 | *JS version --myserver.com/datasummary.html?year=2010 | ||
*PHP version -- myserver.com/datasummary.php?year=2010 | |||
:This will open the data set initially showing year 2010 | |||
*myserver.com/datasummary.html?data=rainfall&year=2009 | *myserver.com/datasummary.html?data=rainfall&year=2009 | ||
:This will open the rainfall dataset for the year 2009. | :This will open the rainfall dataset for the year 2009. | ||
| Line 140: | Line 145: | ||
= Version Control = | = Version Control = | ||
1.1 PHP version included | |||
1.0 Public launch | 1.0 Public launch | ||