Faculty Gender/Ethnicity
by Kathryn Atwood
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto"></div>
JavaScript
$(function () {
// Create the chart
$('#container').highcharts({
chart: {
type: 'pie'
},
title: {
text: 'SSU Faculty Gender and Ethnicity Statistics, Spring 2016'
},
subtitle: {
text: 'Click the slices to view ethnicity breakdown.'
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}: {point.y}'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b> faculty<br/>'
},
series: [{
name: 'Gender',
colorByPoint: true,
data: [{
name: 'Female',
y: 328,
drilldown: 'Female'
}, {
name: 'Male',
y: 300,
drilldown: 'Male'
}]
}],
drilldown: {
series: [{
name: 'Female',
id: 'Female',
data: [
['Am. Indian', 1],
['Asian', 10],
['Black', 4],
['Hispanic/Latino', 18],
['Multiracial', 4],
['Unknown', 50],
['White', 241]
]
}, {
name: 'Male',
id: 'Male',
data: [
['Am. Indian', 0],
['Asian', 18],
['Black', 2],
['Hispanic/Latino', 14],
['Multiracial', 3],
['Unknown', 53],
['White', 210]
]
}]
}
});
});