View source for AnnualDataSummary

{{AddOnBanner|name=Annual Data Summary|type=HTML & Javascript|author=David Jamieson|contact=[[User:Daj|DAJ]]|updated=6 March 2011|version=1.0}} 

'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) 

An working example is [http://www.grantownweather.co.uk/historic/dataSummary.php 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]]

= The Basics  =

*download the following file...[http://wiki.sandaysoft.com/files/AnnualDataSummary.zip AnnualDataSummary.zip] 
*Unzip the contents (three files will be extracted) 
*Edit the file 'readDayfile.js' file in a a good text editor (for example, [http://notepad-plus-plus.org/ notepad++]). 
*Look for the line 'var 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 all the files to your web site into a subfolder, or the root -- your choice
* open datasummary.html in from your website in a browser 

<br> 

= 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 data. Depending on the speed of your internet connection, and your browser, the data may take a few seconds to be processed. 

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. 

<br> 

= Possible problems  =

*This has been tested and runs on IE 7, IE 8, FireFox 3 &amp; 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)

<br> 

= Customisation  =

== 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. 

Including the following three lines on ANY of your own pages will build a summary table 

In the &lt;HEAD&gt; section..... 
<pre>&lt;link rel="stylesheet" type="text/css" media="screen" href="datasummary.css"  /&gt; 
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script src="readDayfile.js" type="text/javascript"&gt;&lt;/script&gt;
</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). By inserting it in a DIV you have complete control over where and how the table is displayed. However, 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> 

== Configuration Variables  ==

by default, the script will do the following: 

*Insert it's contents into a DIV called 'tableData' 
*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 
*'''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 

*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,....
<pre>['maxtemp','Max Temp','Maximum Temperature',true]</pre> 
*The first element, in this case 'maxtemp' -- do NOT change, this is a system variable to identify the data 
*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' data change the 'true' to 'false' in the rianfall element of the variable. true/false MUST be lowercase

<br> 

== Opening a specific data set  ==

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

:This will open the data set initially showing year 2010

*myserver.com/datasummary.html?data=rainfall&amp;year=2009

:This will open the rainfall dataset for the year 2009.

The parameter 'data' takes mintemp, maxtemp, avgtemp, minmaxt, rainfall, windgust. You can supply both parameters, one only, or none 

== 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: 

{| class="wikitable" border="1"
|-
! scope="col" width="300px" | CSS Element 
! scope="col" | 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 &amp; 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.0 Public launch 

<br> 

{{WatchReminderBanner}} 

[[Category:WebTools]]