AnnualDataSummary: Difference between revisions

m
Minor rewrite to clarify 'understanding the basics' following a forum query
m (Minor rewrite to clarify 'understanding the basics' following a forum query)
 
'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 languagelibrary script 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 twothree 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:
 
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 the JS version
* for both JS and PHP versions you need the script library and styling:
: In the <HEADhead> 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/12.51/jquery.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, amenduse the older '1.5' used by DAJ instead of '2.1' if you want to); and loads the Javascript to build the table
&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, amend the '1.5' used by DAJ 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 a DIV called 'tableData'; inserting the data table within it. You can change the DIV 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>
 
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 ayour DIVHTML 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