Graphs

Example: Circle Graph

Graph Title

Date Range

Progress Towards
Goal of
20 PL Credits

PL Credits SER Credits

PL credits earned (20 credits goal)

15/ 20

SER (a subset of PL Credits - 2 credits goal)

3.5/ 2

See Details

Balance as of Today

PL Year: 1 January 2019 - 30 June 2020

Rollover Your Credits

Would you like to opt in to rollover your extra credits to next year's goal?

Goal of
20 PL Credits

PL Credits Earned

15/ 20

Goal of
2 SER Credits

SER Credits Earned

1/ 2

Credits available
to rollover

Rollover Credits

0/ 20 PL | 0/ 2 SER

Graph Title

Date Range

Progress Towards
Goal of
20 PL Credits

PL Credits SER Credits
CIPM Credits

PL credits earned (20 credit goal)

15/ 20

SER (a subset of PL Credits - 2 credits goal)

3.5/ 2

CIPM credits earned (15 credit goal)

15/ 15

See Details

Attestation

Date Range

Goal of
20 CE Credits

CE Credits Earned

15/ 20

Goal of
2 SER Credits

SER Credits Earned

1/ 2

The Professional Learning credits displayed represent activities that have been entered into your PL Tracker. It may not reflect all activities you participated in during the year. You can attest Yes if you have or will have completed the recommended credits, even if they are not represented in your PL Tracker.

If you attended a CFA Institute or Society event where credits were earned, they may have been recorded automatically.

Documentation

Problem Being Solved

We want to display data in an easy to read visual format.

When To Use

Circle graphs should be used when describing percentage data from 1-100%.

The overlay graph can be used when describing percentages that are related to each other.

When Not To use

When the data being described is an arbitrary number.

When the data being overlaid can potentially hide the data underneath.

Formatting

Because we want to reuse as much code as possible, the javascript is generic and is fed by a series of data attributes attached to the canvas which determine styling.

  • data-total
    • REQUIRED
    • Accepts an integer representing the current data value.
    • For Overlay or Double graphs, represents the current value of the more prominent / outer circle.
  • data-goal
    • REQUIRED
    • Accepts an integer value representing the maximum data value, ie 100%.
    • For Overlay or Double graphs, represents the maximum value of the more prominent / outer circle.
  • data-graph-type
    • single - Describes a single data range. Uses a slim line width.
    • double - Allows for a second data range to be placed inside of the primary. Uses a slim line width.
    • overlay - Allows for a second data range to be placed on top of the primary. Uses thicker line width.
    • If not set, defaults to "single".
  • data-graph-color
    • Accepts any hex code color value, including hash symbol.
    • If not set, defaults to "#138761" (primary green).
    • For Overlay or Double graphs, sets the color of the more prominent / outer circle.
  • data-ticks
    • Accepts a boolean value. Set to true to draw tick marks on the graph in quarters.
    • If not set, defaults to false.
  • data-checkmark
    • Accepts a boolean value. Set to true to draw a checkmark when the total meets the goal.
    • If not set, defaults to false.

Overlay and Double graph types only

  • data-inner-total
    • Accepts an integer representing the current data value.
    • Represents the current value of the less prominent / inner circle.
  • data-inner-goal
    • Accepts an integer value representing the maximum data value, ie 100%.
    • Represents the maximum value of the less prominent / inner circle.
  • data-inner-color
    • Accepts any hex code color value, including hash symbol.
    • If not set, defaults to "#00b5e2" (secondary blue).
    • Sets the color of the less prominent / inner circle.

Example: Line 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 that changes over time needs to be displayed.

When To Use

It can be used to display a single, small set of data points.

When Not To Use

It should not be used to display more than 12 data points. If the data is large or complex, an infographic should be considered.