|
<p>
The short, easy directions on how to do the auto-graphs (from a page table) are
ALL in the last 5 lines of THIS web page. It is virtually automatic: Table turned into
charts. <- This top section is where YOUR Table Description would go -> (The rest of the top part of this page is an example table you can use as a starting point for YOUR actual table.) </p>
<table id="thetable">
<!-- This starts the table; the id="thetable" is necessary
for the auto-graphing to work -->
<caption>
2009
Individual Sales by Category</caption>
<!-- Pick a caption --> <thead>
<!-- Begins table head --> <tr>
<!-- Begins first and only row in head -->
<td> <!-- First cell
(TABLE DATA) (it
is empty to allow for the fact that the top cell of the first column will be
empty because this 1st column is the row-labels on the left). --> </td>
<!-- (Also note this first table data cell contains a --
just a Non-Breaking SPace, recommended for empty td's.) </td> ends the cell -->
<th>
food</th>
<!--These 2 lines are the first COLUMN HEADING (in the top row
-- there are headings for each of the column of data) You will likely have 3-8 of these.
-->
<!-- Add or subtract 2-line units like these as needed for your 3-8 column
headings. (Note browsers ignore comments marked-up like these.) --> <th> auto</th>
<!-- (Note there are a total of 5 more, in addition to the one
above, for a total of 6 column headings.) --> <th> household</th> <th>
furniture</th> <th> kitchen</th> <th> bath</th> </tr>
<!--This ends the row the TABLE HEADINGS (at the top) are in
--> </thead> <!--This is also, thus the end of
the TABLE HEAD section of the table. -->
<tbody> <!-- Now the TABLE BODY BEGINS --> <tr>
<!--This signifies the beginning of a new TABLE ROW (second
row; but the first row with left-side headings and data) -->
<th>
Mary</th>
<!--This is the first ROW HEADING -- this one for the first row
of data --> <td>
150</td>
<!--This 2-line group and the following FIVE 2-line groups are
the first row of data -- data for Mary and corresponding to the COLUMN HEADINGS
--> <td> 160</td>
<td> 40</td> <td> 120</td> <td> 30</td> <td> 70</td> </tr> <!--This ends row two, the first TABLE ROW with
left-side headings and cells of data --> <tr>
<!--This begins a new TABLE
ROW .(Note there are a total of 3 more complete TABLE ROWS, in addition to the
one above, for a total of 4 ROWS
<!--
(with appropriate ROW HEADINGS -- at the beginning). You will likely have 3-6
row headings for your data and add or substract accordingly. -->
<th>
Tom</th>
<td>
3</td>
<td>
40</td>
<td>
30</td>
<td>
45</td>
<td>
35</td>
<td>
49</td>
</tr>
<!-- (Browsers ignore white space, like extra blank
lines, as well as COMMENT LINES,
like this one beginning with the special start arrow, and ending with the end
arrow) -->
<tr> <th> Brad</th> <td> 10</td> <td> 180</td> <td>
10</td> <td> 85</td> <td> 25</td> <td> 79</td> </tr>
<tr> <th> Kate</th> <td> 40</td> <td> 80</td> <td>
90</td> <td> 25</td> <td> 15</td> <td> 119</td> </tr>
</tbody> <!-- End of the Table Body. --> </table>
<!-- End of the Table-->
<p><iframe height="375" id="I1" name="I1" scrolling="yes"
src="http://mynichecomputing.org/visualize/jquery_plugin/tryit4.html"
style="margin-left: -13px" width="650">Your browser does not support inline
frames or is currently configured not to display inline frames.</iframe></p>
THAT'S IT. With Input Format (for the page) set to "Full HTML"
and working in the "Switch to Plain Text Editor" mode (via link
at the bottom of Body textarea): Just change the contents of
the table (P.S. it may have more OR less rows and/or columns) AND make sure to
have id="thetable" in your top table tag AND Copy and
Paste the exaxt <iframe> ... </iframe> you see above at
the bottom THEN YOUR Table will turn into an editable table and 3 kinds of
dynamic graphs automatically!
[NOTES: If a Pie Graph showing 'Contribution to Grand Total by Table Row Members' does not make sense, Use tryit5.html for the iframe's source (src) instead of tryit4.html .
It is best to translate scales to whole numbers for accurate depictions -- experiment for best display. Here is an IMAGE-view of what the sample table on this current page generates.]
|