Main Content

Using WC Graph Table

Calculations

The WC Graph Tables also allows you to create a table that performs calculations.

Calculations Example 1
Television Newspapers Radio Magazines Internet Mobile Total
319.2 26.4 91.2 15.6 156.6 19.2


Calculations Example 2
Television Newspapers Radio Magazines Internet Mobile
Value 319.2 26.46 91.21 15.6 156.6 19.2
Round to .10
Round to 10

The basic setup (using default options) for the built-in table calculations is as follows:

    Insert the table.

    The table tag only requires the following:

    • a unique id
    • the calculatedata class
    • any other functionality you need, eg graphme, linechart barchart, and piechart classes for graphs and/or editadata class to make the data sources editable
    <table id="table2" summary="..." class="calculatedata">
    </table>

    Insert the table caption.

    Add the table caption to the caption tag of your table.

    <table id="table2" summary="..." class="calculatedata">
    <caption>...</caption>
    </table>

    Insert the series labels.

    Add each series label to the thead section as a th.

    Note: Some simpler pie charts do not need the thead section for your data series. See Chart Types: Line, Bar and Pie for more information.
    <table id="table2" summary="..." class="calculatedata">
    <caption>...</caption>
    <thead>
    <tr>
    <th scope="col">Television</th>
    <th scope="col">Newspapers</th>
    <th scope="col">Radio</th>
    <th scope="col">Magazines</th>
    <th scope="col">Internet</th>
    <th scope="col">Mobile</th>
    </tr>
    </thead>
    </table>

    Insert the cells with data.

    Add the data to the tbody section as a td.

    If the cell will contain the calculation, it will do the following:

    1. Give the cell a unique id, eg. <td id="sumUsage">.
    2. Add the calculateme class, eg. <td id="sumUsage" class="calculateme">.
    3. Add a class that indicates the type of calculation, eg. <td id="sumUsage" class="calculateme sum">. (See Types of Calculations for a list of calculations that can be performed.)
    4. For each cell used in this calculation add that unique id as a class, eg. <td class="sumUsage">.
    <table id="table2" summary="..." class="calculatedata">
    <caption>...</caption>
    <thead>
    <tr>
    <th scope="col">Television</th>
    <th scope="col">Newspapers</th>
    <th scope="col">Radio</th>
    <th scope="col">Magazines</th>
    <th scope="col">Internet</th>
    <th scope="col">Mobile</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td class="sumUsage">319.2</td>
    <td class="sumUsage">26.4</td>
    <td class="sumUsage">91.2</td>
    <td class="sumUsage">15.6</td>
    <td class="sumUsage">156.6</td>
    <td class="sumUsage">19.2</td>
    <td id="sumUsage" class="calculateme sum"></td>
    </tr>
    </tbody>
    </table>
    Types of Calculations
    If you want this calculation... ..add this class to the cell that will contain the calculation.
    Absolute Value abs
    Arc Cosign acos
    Ceiling ceil
    Cosign cos
    Divide
    (first by second of cells with this id class, eg. 6 and 3 = 2)    		 divide
    Equals
    (grabs the value of the first cell with this id class from any table on the page)    		 equals
    Floor
    (round down to nearest integer)    		 floor
    Highest Value
    (of all cells with this id class)    		 max
    Mean
    (of all cells with this id class)    		 mean
    Median
    (of all cells with this id class)    		 median
    Lowest Value
    (of all cells with this id class)    		 min
    Multiply
    (of all cells with this id class)    		 mult
    Power
    (first to tde second power of cells with this id class, eg. 3 and 3 = 27)    		 pow
    Random Number
    (between 0 and first cell with this id class)    		 rand
    Get Remainder
    (of first by second of cells with this id class, eg. 8 and 3 = 2)    		 rmdr
    Round to Nearest Whole Number rnd
    Round to Nearest Thousandth rnd1000th
    Round to Nearest Hundredth rnd100th
    Round to Nearest Tenth rnd10th
    Round to Nearest Ten rnd10
    Round to Nearest Hundred rnd100
    Round to Nearest Thousand rnd1000
    Sine sin
    Square Root sqrt
    Standard Deviation
    (of all cells with this id class)    		 stddev
    Sum
    (of all cells with this id class)    		 sum
    Tangent tan

    Tip: When you only want to graph part of a table's data, you can do so by creating a hidden table that pulls values from the table you wish to display.

    For example, consider following table...

    Full Data Example
      Television Movies Music/Audio Print Computer Video Games
    1999 227 18 108 43 27 26
    2004 231 25 104 43 62 49
    2009 269 25 151 38 89 73
    Total
    Data Subset
    Television
    Movies
    Music/Audio
    Print
    Computer
    Video Games

    Top of page