5,838
edits
AnnualDataSummary: Difference between revisions
m
→Understanding the Basics
| Line 128: | Line 128: | ||
# either readDayfile.js (the JavaScript) or readDayfile.php (the PHP version of the script). | # either readDayfile.js (the JavaScript) or readDayfile.php (the PHP version of 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!) | |||
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 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 both JS and PHP versions you need the script library and styling: | * for both JS and PHP versions you need the script library and styling: | ||
: In the <head> section..... | : 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/ | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1/jquery.js" type="text/javascript"></pre> | ||
: This loads the stylesheet; loads a jQuery library from Google servers rather than having the file on your server, (note many versions of jQuery are not supported by old versions of Internet Explorer, use the very old version '1.5' used by DAJ instead of the current version '3.1' if you need to); | |||
Next you must load the | Next you must load the script to build the table: | ||
*for the JS version | *'''for the JS version''' | ||
: In the <body> section where you want the table to appear | : In the <body> section, where you want the table to appear, declare the element | ||
<pre>< | <pre><section id="tableDiv"> | ||
<noscript>Your browser has not enabled the JavaScript necessary to display the table here<noscript> | <noscript>Your browser has not enabled the JavaScript necessary to display the table here<noscript> | ||
</ | </section></pre> | ||
<script src="readDayfile.js" type="text/javascript"></script></pre> | |||
: Once the page is loaded it runs readDayfile.js | : In the <body> section, near the end, call the script: | ||
<pre><script src="readDayfile.js" type="text/javascript"></script></pre> | |||
: Once the page is loaded it runs readDayfile.js, that will look for your HTML element with an id attribute called 'tableData'; then will insert the data table within it. | |||
Other code can be inserted inbetween such as anchor links to your other pages. | |||
*for the PHP version | *'''for the PHP version''' | ||
:use the code <pre><?php include('readDayfile.php');?></pre> to include the script | : In the <body> section, use the code <pre><?php include('readDayfile.php');?></pre> to include the script that creates all the HTML elements required | ||
== Localization / Language == | == Localization / Language == | ||