Web services

Charts

For now, the only type of chart we have on the website are simple pie charts. Charts are difficult to make accessible, and this limits our ability to use them. The only place they’re currently used is on the demographics page.

The charts include an accessible text version which also serves as the color key.

Styling

The pie charts are circular and have slices that add up to equal 100% of the circle. Each slice is a slightly different shade (darker or lighter) of the same color.

Responsive behavior

No change.

Development info
  • Stylesheet location: /_source/styles/components/_page-specific.scss
  • There isn’t currently a way to add charts in the WordPress editor without accessing the source code.
  • The Google API creates the pie chart image based on the colors and percentages you provide. The chart is an image, not live data.
  • <img src="https://www.pcc.edu/feeds/chart?d=48,34,4,11,3&width=200&hex=ffbbo" alt="" class="graphic">
    • 200 is the size of the image, ffbb00 is the darkest color (it generates the lighter colors based on this), and 48,34,4,11,3 are the slice sizes – adjust these to create your chart.
  • Make sure to add the percentages and text below for accessibility, and as a key for the pie chart image. 
    • <dl>
  <!-- match the corresponding pie chart slice color -->
  <dt style="border-color: #FFBB00;">48%</dt>
  <!-- match the corresponding pie chart slice size -->
  <dd>No previous college</dd>
</dl>

Pie chart example

New Students (Background Education) Chart

48%
No previous college
34%
Some college
4%
Associate’s degree
11%
Bachelor’s Degree
3%
Master’s / Doctoral degree