ASIST Visualization

author(s): Torstein Hønsi, Coogan Brennan

by Coogan

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="height: 400px"></div>

CSS

#container {
    height: 100%; 
    min-width: 310px; 
    max-width: 800px;
    margin: 0 auto;
}

JavaScript

$(function () {
    Highcharts.setOptions({
        colors: ['#a4d5ea', '#1d98cc', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
    });
    $('#container').highcharts({
        chart: {
            type: 'column',
            options3d: {
                enabled: true,
                alpha: 15,
                beta: 15,
                viewDistance: 25,
                depth: 47
               
            }
            
        },

        title: {
            text: 'Confidence Before and After ASIST Workshops'
        },

        xAxis: {
            categories: ['Asking Directly About Suicide', 'Doing a Suicide Intervention', 'Feeling Prepared to Help', 'Feeling Confident to Help']
        },

        yAxis: {
            allowDecimals: false,
            min: 0,
            max: 100,
            title: {
                text: 'Number of Participants Confident (%)'
            }
        },

        tooltip: {
            headerFormat: '<b>{point.key}</b><br>',
            pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.y}'
        },

        plotOptions: {
            column: {
                stacking: 'normal',
                depth: 40
            }
        },

        series: [{
            name: 'Before',
            data: [43, 51, 28, 25],
            stack: 'Before'
        },  {
            name: 'After',
            data: [97, 99, 98, 99],
            stack: 'After'
        }]
    });
});