Graphs
Circle Graph
Graph Title
Progress Towards
Goal of
20 PL Credits
PL credits earned (20 credits goal)
15/ 20
Rollover Your Credits
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
Progress Towards
Goal of
20 PL Credits
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.
HTML
Code coming soon!
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.
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 |
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>
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.