ONA 16 Board - YouTube Views

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: 'YouTube (Views)',
            align: 'left',
            style: {
            	fontWeight: 800,
              fontSize: "2em"
            }
        },
        series: [{
            name: 'Total Views',
            data: [null, 1589,2416,12668,15144,27310],
            dataLabels: {
                enabled: true,
                rotation: -60,
                color: '#213563',
                align: 'right',
                format: '{point.y:,.0f}', // one decimal
                y: 10, // 10 pixels down from the top
                x: -4,
                style: {
                    fontSize: '13px',
                    textOutline: 0
                }
            },
            marker: {
            	fillColor: '#213563' 
            }
        },{
            name: '"Spotlight" keynote',
            data: [null,null,null,null,3921,17462],
            dataLabels: {
                enabled: true,
                rotation: -60,
                color: '#213563',
                align: 'right',
                format: '{point.y:,.0f}', // one decimal
                y: 20, // 10 pixels down from the top
                x: -4,
                style: {
                    fontSize: '13px',
                    textOutline: 0
                }
            },
            marker: {
            	fillColor: '#213563' 
            }
        }],
        xAxis: {
            categories: [
                '2011',
                '2012',
                '2013',
                '2014',
                '2015',
                '2016'
            ],
        		tickLength: 0,
            lineColor: "#eeeeee"
        },
        yAxis: {
            min: 0,
            max: 28000,
            endOnTick: false,
            title: {
              text: 'Views',
            	align: "low"
            }
     ...