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.
- Stylesheet location:
- 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 give it. The chart is an image, not live data.
<img src="https://chart.apis.google.com/chart?cht=p&chs=200x200&chma=0,0,0,0|0,0&chco=ffbb00&chd=t:48,34,4,11,3" alt="" class="graphic">
200x200is the size of the image,
ffbb00is the darkest color (it generates the lighter colors based on this), and
48,34,4,11,3are 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>
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.
- No previous college
- Some college
- Associate’s degree
- Bachelor’s Degree
- Master’s / Doctoral degree