Advertiser dashboard: Avg, min, max, stddev

by Angelos Chaidas

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<div id="container"></div>

CSS

#container {
    width:420px;
    height:240px;
    margin:0 auto;
    border:1px solid #EFEFEF;
}

JavaScript

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'bar'
        },
        title: {
            text: ''
        },
        xAxis: {
            categories: ['Maximum salary', 'Average salary', 'Minimum salary'],
            title: {
                text: null
            },
            labels: {
                style: {
                    fontSize: '12px',
                    lineHeight: '14px',
                    fontFamily: 'Arial',
                    color: '#313131'
                }
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: '',
            },
            labels: {
                style: {
                    fontSize: '12px',
                    lineHeight: '14px',
                    fontFamily: 'Arial'
                },
                formatter: function () {
                    return '£' +
                    // Todo: Fix this for millions?
                    Highcharts.numberFormat(this.value / 1000, 0) + 'K';
                }
            },
            gridLineDashStyle: 'Dot'
           /* plotBands: [{
                color: '#FCFFC5',
                from: 25334,
                to: 34200,
                label : {
                    text:'Standard deviation',
                    align : 'right'
                }
            }]*/
        },
        tooltip: {
            valuePrefix: '£'
        },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true,
                    format: '£{point.y:,0f}',
                    style: {
                        fontSize: '12px',
                        lineHeight: '14px',
                        fontFamily: 'Arial'
                    }
                }
            }
        },
        legend: {
            enabled: false
        },
        credits: {
            enabled: false
        },
        series: [
            {
                type : 'bar',
     ...