ONA 16 Board - Website - Month comparison

by Adam Nekola

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="width: 500px; height: 350px; margin: 0 auto"></div>

JavaScript

$(function () {

    Highcharts.setOptions({
        lang: {
            thousandsSep: ","
        }
    });
    
    Highcharts.chart('container', {
        title: {
            text: 'Month over month, 2015-2016',
            align: 'left',
            style: {
            	fontWeight: 800,
              fontSize: "2em"
            }
        },
        series: [{
        		name: '2015',
            data: [19929,12732,17235,14934,17928,19159,14128,27084,33572,23302,22322,19442]
        },{
            name: '2016',
            data: [22735,20560,20520,15253,26184,31800,22913,33599,37425,17038,22053,15255],
            dataLabels: {
                enabled: true,
                rotation: -60,
                color: '#213563',
                align: 'right',
                y: -30, // 10 pixels down from the top
                x: 6,
                style: {
                    fontSize: '13px',
                    textOutline: 0
                }
            },
            marker: {
            	fillColor: '#213563' 
            }
        }],
        xAxis: {
            categories: ['Jan','Feb','Mar','Apr','May','June','July','Aug','Sep','Oct','Nov','Dec'],
        		tickLength: 0,
            lineColor: "#eeeeee"
        },
        yAxis: {
            min: 0,
            max: 45000,
            endOnTick: false,
            title: {
              text: 'Total pageviews',
            	align: "low"
            }
        },
        chart: {
            type: 'column',
            style: {
            	fontFamily: "\"Source Sans Pro\", Verdana, Arial, Helvetica, sans-serif"
            }
        },
        plotOptions: {
            column: {
                pointPadding: 0.05,
                groupPadding: 0.1,
                borderWidth: 0
            }
        },
        colors: ["#b3e1ef",'#213563'],
        tooltip: { enabled: false },
        credits: { enabled: false },
        legend:  { enabled: true },
        subtitle: { text: '' }
    });
});