Tables and Graphs

Example: Simple Table

Name Position Office Age
Airi Satou Accountant Tokyo 33
Angelica Ramos Chief Executive Officer (CEO) London 47
Ashton Cox Junior Technical Author San Francisco 66
Bradley Greer Software Engineer London 41
Brenden Wagner Software Engineer San Francisco 28
Brielle Williamson Integration Specialist New York 61
Bruno Nash Software Engineer London 38

Code

HTML

<table class="adjust-for-mobile">
    <thead>
        <tr role="row">
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody>
        <tr role="row">
            <td data-label="Name">Airi Satou</td>
            <td data-label="Position">Accountant</td>
            <td data-label="Office">Tokyo</td>
            <td data-label="Age">33</td>
        </tr>
    </tbody>
</table>
                

Documentation

Problem Being Solved

Content needs to be displayed in a table format.

When To Use

This pattern can be used for any tabular data that does not exceed 4 columns.

When Not To use

This pattern should not be used for complex or data-heavy tables, or if the goal of the table is to compare information across categories.

Example: Comparison Table

Level I Knowledge and Comprehension Investment Tools
Level II Application and Analysis Asset Valuation
Level III Synthesis and Evaluation Portfolio Management

Code

HTML

<table class="comparison-table">
    <tbody class="js">
        <tr class="equal-height">
            <th>
                Level I
            </th>
            <td data-rhead="Learning Focus">
                Knowledge and Comprehension
            </td>
            <td data-rhead="Topic Focus">
                Investment Tools
            </td>
        </tr>
        <tr class="equal-height">
            <th>
                Level II
            </th>
            <td data-rhead="Learning Focus">
                Application and Analysis
            </td>
            <td data-rhead="Topic Focus">
                Asset Valuation
            </td>
        </tr>
        <tr class="equal-height">
            <th>
                Level III
            </th>
            <td data-rhead="Learning Focus">
                Synthesis and Evaluation
            </td>
            <td data-rhead="Topic Focus">
                Portfolio Management
            </td>
        </tr>
    </tbody>
</table>
                

Documentation

Problem Being Solved

Content needs to be displayed in a way that allows users to compare across categories.

When To Use

This pattern can be used when there are no more than 3 categories to compare. It should be used only for high-importance content that benefits from showcasing.

When Not To use

If there are more than 3 categories to be compared, or the content is of secondary importance, an alternative should be used.

Formatting

  • Comparison tables require JS to force equal cell heights, otherwise they will default to mobile view.
  • They can be used in either normal or wide content wells.

Example: Graph

Views in the last 12 months

Month Views
December 2018 0
January 2019 0
February 2019 0
March 2019 0
April 2019 87
May 2019 63
June 2019 26
July 2019 48
August 2019 21
September 2019 13
October 2019 8
November 2019 7
Download all views of this post (.CSV)

Code

HTML

<section>
    <noscript>
        canvas.graph {
            display: none;
        }
        table.graph {
            display: table;
        }
    </noscript>
    <h4>Views in the last 12 months</h4>
    <canvas id="canvas" class="graph" width="694" height="325"></canvas>
    <table class="graph">
        <thead>
            <tr role="row">
                <th>Month</th>
                <th>Views</th>
            </tr>
        </thead>
        <tbody>
            <tr role="row">
                <td data-label="Month">December 2018</td>
                <td data-label="Views">0</td>
            </tr>
            <tr role="row">
                <td data-label="Month">January 2019</td>
                <td data-label="Views">0</td>
            </tr>
            <tr role="row">
                <td data-label="Month">February 2019</td>
                <td data-label="Views">0</td>
            </tr>
            <tr role="row">
                <td data-label="Month">March 2019</td>
                <td data-label="Views">0</td>
            </tr>
            <tr role="row">
                <td data-label="Month">April 2019</td>
                <td data-label="Views">87</td>
            </tr>
            <tr role="row">
                <td data-label="Month">May 2019</td>
                <td data-label="Views">63</td>
            </tr>
            <tr role="row">
                <td data-label="Month">June 2019</td>
                <td data-label="Views">26</td>
            </tr>
            <tr role="row">
                <td data-label="Month">July 2019</td>
                <td data-label="Views">48</td>
            </tr>
            <tr role="row">
                <td data-label="Month">August 2019</td>
                <td data-label="Views">21</td>
            </tr>
            <tr role="row">
                <td data-label="Month">September 2019</td>
                <td data-label="Views">13</td>
            </tr>
            <tr role="row">
                <td data-label="Month">October 2019</td>
                <td data-label="Views">8</td>
            </tr>
            <tr role="row">
                <td data-label="Month">November 2019</td>
                <td data-label="Views">7</td>
            </tr>
        </tbody>
    </table>
    <a href="#">Download all views of this post (.CSV)</a>
</section>
                

Documentation

Problem Being Solved

Data points need to be displayed in a graph.

Example: Circle Graph

Graph Title

Date Range

Progress Toward Goal of 20 CE Credits

Primary Total (optional goal display)

12

Tertiary Total (optional goal display)

3.5

Secondary Total (optional goal display)

15

Code

HTML

<section class="card-standalone no-border graph-container">
    <h3>Graph Title</h3>
    <div class="circle-graph">
        <canvas id="circle-graph-canvas" class="circle-graph-canvas" width="250" height="250"></canvas>
        <div class="graph-item primary-graph-item" data-total="12" data-goal="20">
            <p>
                <span>Total Earned CPD</span>
                <span class="cpd-goal">(20 CPD Goal)</span>
            </p>
            <p class="graph-item-total">12</p>
        </div>
    </div>
    <div>
        <div class="graph-item tertiary-graph-item" data-total=".25" data-goal="20">
            <p>
                <span>Total SER Amount</span>
                <span class="cpd-goal">(2 SER goal)</span>
            </p>
            <p class="graph-item-total">.25</p>
        </div>
        <div class="graph-item secondary-graph-item" data-total="5" data-goal="15">
            <p>
                <span>Earned CPD amount applied towards CIPM</span>
                <span class="cpd-goal">(15 CPD goal)</span>
            </p>
            <p class="graph-item-total">5</p>
        </div>
    </div>
</section>
                

Documentation

Problem Being Solved

One to three data points need to be displayed in a visual way.

Formatting

  • jquery.circle-graph.js is needed to render graph, otherwise it will default to mobile view.
  • This graph supports tracking up to three values.
  • There must be a primary-graph-item, but secondary and tertiary can be added as needed.
  • A tertiary item should always have a total/goal less than the primary item.
  • The attribute data-goal for the tertiary item should be the same as the primary item's goal, to keep perspective.