HighChart Bar example Date Timeline

<!DOCTYPE html>
<html ng-app="myModule">

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="myController">
    <div id="conta" style="width:100%; ">Placeholder for chart</div>
  </body>

</html>

// Code goes here

angular.module('myModule', [])
  .controller('myController', function($scope) {
  Highcharts.getOptions().colors[0] = {
            linearGradient: {x1: 0, y1: 0, x2: 0, y2: 1},
            stops: [[0, '#6EB7D8'],
                [0.4, '#2989D8'],
                [0.7, '#207cca'],
                [1, '#1E5799']]
        };

        var yAxisLabels = [1, 5000, 10000, 15000, 20000];
        var seriesDataSource = [
            10000, 5000, 4000, 15000, 16000, 10000, 5000, 4000, 15000, 2000,
            10000, 5000, 4000, 15000, 16000, 10000, 5000, 4000, 15000, 2000,
            10000, 5000, 4000, 15000, 16000, 10000, 5000, 4000, 15000, 2000
        ];
        
        var index = seriesDataSource.length;
        var bucketCount = 1;
        
        Highcharts.setOptions({
            lang: {
                thousandsSep: ','
            }
        });
        
        Highcharts.chart('conta', {
            chart: {
                type: 'column',
                margin: [70, 30, 30, 80],
                events: {
                  load: function () {
                    var series = this.series[0];
                    setInterval(function () {
                      if (seriesDataSource.length <= index) {
                        seriesDataSource.push(0);
                      }
                      
                      if (bucketCount > 10) {
                        index++;
                        bucketCount = 1;
                      }
                      
                      bucketCount++;
                      var value = Math.random() * (2000);
                      seriesDataSource[index - 1] += value;
                      series.setData(seriesDataSource, true, true, false);
                    }, 1000);
                  }
                }
            },
            exporting: {
                enabled: false
            },
            credits: {
                enabled: false
            },
            legend: {
                enabled: false
            },
            title: {
                text: 'Weekly Inventory at Cost',
                style: {
                    color: '#333'
                },
                align: 'left',
                x: 10,
                y: 20

            },

            xAxis: {
                type: 'datetime',
                dateTimeLabelFormats: {
                    month: '%b'
                },
                lineColor: '#333',
                tickColor: '#333',
                crosshair: true,
                startOnTick: false,
                endOnTick: false,
                minPadding: 0,
                maxPadding: 0,
                tickmarkPlacement: 'on',
                labels: {
                    align: 'left',
                    rotation: 0
                }
            },

            yAxis: {
                crosshair: true,
                lineColor: '#333',
                tickColor: '#333',
                tickPositioner: function () {
                    return yAxisLabels;
                },
                labels: {
                    format: '{value:,.0f}'
                },
                title: {
                    enabled: false
                },
                lineWidth: 1,
                tickWidth: 1,
                id: 'cost',
                gridLineWidth: 0,
                min: 1
            },

            plotOptions: {
                column: {
                    pointPadding: 0.1,
                    borderWidth: 0,
                    pointPlacement: 'between'
                }
            },
            shadow: true,

            series: [{
                data: seriesDataSource,
                pointStart: Date.UTC(2016, 0, 1),
                pointInterval: 7 * 24 * 3600 * 1000 // 7days
            }]
    });
  });

/* Styles go here */