A11y form results

author(s): Øystein Moseng

by oysteinmoseng

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/themes/high-contrast-light.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        Results from the accessibility working group focus area form. The results are grouped into tech/design, web, and marketing/sales.
    </p>
</figure>

CSS

body {
 	font-family: Verdana, sans-serif;
}

.highcharts-figure, .highcharts-data-table table {
    min-width: 310px;
    max-width: 800px;
    margin: 1em auto;
}

#container {
    height: 500px;
}
.highcharts-description {
    margin-top: 35px;
    text-align: center;
}
.highcharts-data-table table {
	border-collapse: collapse;
	border: 1px solid #EBEBEB;
	margin: 10px auto;
	text-align: center;
	width: 100%;
	max-width: 500px;
}
.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}
.highcharts-data-table th {
	font-weight: 600;
    padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
    padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}
.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

JavaScript

var chart = Highcharts.chart('container', {
    chart: {
        type: 'bar',
        scrollablePlotArea: {
        	minHeight: 1500,
            opacity: 0.92
        }
    },
    title: {
        text: 'A11y Form Results'
    },
    xAxis: {
        categories: [
            'Planning new a11y projects',
            'Work on new a11y projects',
            'User testing on HC features',
            'Provide input on HC features',
            'Generic training',
            'Specific training',
            'Dataviz training',
            'HC a11y features training',
            'AT experience workshop',
            'Workshops for rest of company',
            'Discuss my a11y issues',
            'Discuss a11y issues of others',
            'Discuss a11y work of other teams',
            'A11y trends',
            'A11y material for team',
            'Improve a11y portal',
            'Improve a11y demos on website'
        ],
        crosshair: true
    },
    yAxis: {
		visible: false
    },
    legend: {
    	backgroundColor: 'rgba(255, 255, 255, 0.6)',
        padding: 10
    },
    series: [{
    	name: 'Total',
	    id: 'total',
        color: '#f45b5b',
        pointWidth: 1,
        groupPadding: 0.25,
        dataLabels: {
        	style: {
            	color: '#000'
            },
            y: -10,
        	enabled: true,
            inside: true,
            formatter: function () {
            	return 'total: ' + this.point.y / 8 * 100 + '%';
            }
        },
    	data: total
    }, {
        name: 'Tech/design',
        data: [3, 3, 2, 1, 2, 2, 3, 3, 3, 2, 3, 3, 3, 3, 2, 2, 3]
    }, {
        name: 'Web',
        data: [2, 2, 1, 0, 2, 2, 0, 0, 2, 1, 2, 2, 1, 2, 2, 2, 0]
    }, {
        name: 'Marketing/sales',
        data: [1, 2, 1, 1, 3, 3, 3, 3, 2, 3, 2, 2, 2, 3, 2, 2, 2]
    }]
});


var total = [];
var len = chart.series[1].points.length;
for (var i = 0; i < len; ++i) {
	total[i] =
    	chart.series[1].points[i].y +
       ...