Drilldown Help

Understand why drilldown data does not appear in UI but does in the console

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="http://code.highcharts.com/modules/drilldown.js"></script>
<body>
    <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
</body>
<div id="data">AREA,VALUE,TYPE,SHIFT1,SHIFT2
    Blog1,50000,Blog1_Shift,5,6
    Blog2,60000,Blog2_Shift,2,3
    Blog3,40000,Blog3_Shift,7,8
</div>

JavaScript

$(document).ready(function () {
    var options = {
        chart: {
            renderTo: 'container',
            type: 'column'
        },
        title: {
            text: 'My Title Here'
        },
        xAxis: {
            categories: [],
            name: []
        },
        yAxis: {
            title: {
                text: 'Value Here'
            }
        },
        legend: {

            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            y: 15,
            borderWidth: 0,
            itemStyle: {

                color: '#333',
                fontSize: '15px'

            },
            navigation: {
                activeColor: '#3E576F',
                animation: true,
                arrowSize: 12,
                inactiveColor: '#CCC',

                style: {
                    fontWeight: 'bold',
                    color: '#333',
                    fontSize: '15px'

                }
            }
        },
        tooltip: {
            shared: true,
            crosshairs: true
        },

        plotOptions: {
            series: {

                marker: {
                    lineWidth: 1
                }
            }
        },

        series: [],
        drilldown: {}

    };

    var csvData = document.getElementById("data").innerHTML;

    console.log(csvData);
    var lines = csvData.split('\n');

    var series = {
        data: [],
        visible: true,
        type: 'column',
        colorByPoint: true,
        drilldown: true
    };

    var drilldown = {
        series: []
    };
    // I know with the below I get an extra line so can deal with that when I get the rest of the data sorted

    $.each(lines, function (lineNo, line) {

        if (lineNo > 0 && lineNo < 4) {

            var items = line.split(',');
            var seriesname = String(items[0]); // this is the area name
            var area_cost = parseFloat(items[1]); // this is the data for the area...