Advertiser dashboard: Average salaries

by Angelos Chaidas

HTML

<script src="http://code.highcharts.com/highcharts.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: 'column'
        },
        title: {
            text: ''
        },
        xAxis: {
            categories: ['All your jobs', 'Your <strong>IT</strong> jobs', 'National avg'],
            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'
        },
        tooltip: {
            valuePrefix: '£'
        },
        plotOptions: {
            column: {
                dataLabels: {
                    enabled: true,
                    format: '£{point.y:,.0f}',
                    style: {
                        fontSize: '12px',
                        lineHeight: '14px',
                        fontFamily: 'Arial'
                    }
                }
            }
        },
        legend: {
            enabled: false
        },
        credits: {
            enabled: false
        },
        series: [{
            pointPadding: 0.1,
            groupPadding: 0,
            name: 'Average salary',
            data: [35456, {
                y: 52532,
                color: '#CC0000'
            }, {
                y: 40540,
                color: '#999'
            }]
        }]
    });
});