AnnualDataSummary: Difference between revisions

no edit summary
No edit summary
No edit summary
 
'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.
*The tool uses HTML and jQuery (a library scriptlanguage that produces Javascript) and includes 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).
== Understanding the Basics ==
 
The 'tool' relies on threetwo files for successful operation:.... datasummary.css (the style sheet) and either 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.
# 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).
 
If you wish to use your own page to show the data on, do the following:
 
*for the JS version
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:
: In the <headHEAD> section.....
* for both JS and PHP versions you need the script library and styling:
: In the <head> 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/2.1.5/jquery.js" type="text/javascript"&gt;<&lt;/pre> 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, (note later versions of jQuery are available, but not supported by old versions of Internet Explorer, useamend the older '1.5' used by DAJ instead of '2.1' if you want to); and loads the Javascript to build the table
 
: Once the page is loaded it runs readDayfile.js and will look for youra HTML element with an id attributeDIV 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).
 
*for the PHP version
:you still need the jQuery library as above
:use the code <pre><?php include('readDayfile.php');?></pre> to include 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!)
 
Next you must load the Javascript to build the table:
*for the JS version
: In the &lt;body&gt; 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>&lt;div id="tableDiv"&gt;
&lt;noscript&gt;Your browser has not enabled the JavaScript necessary to display the table here&lt;noscript&gt;
&lt/div&gt;
&lt;script src="readDayfile.js" type="text/javascript"&gt;&lt;/script&gt;</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).
 
*for the PHP version
:use the code <pre><?php include('readDayfile.php');?></pre> to include the script
 
== Localization / Language ==
5,838

edits