barchart date months

by igor_nov

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/css/bootstrap.min.css" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/css/bootstrap-responsive.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/bootstrap.min.js"></script>
    
    <style>
        .popover.top {
margin-top: -80px;
}.popover.top {
margin-top: -100px;
        }</style>
        
        
        
<!-- <div style="overflow-y:auto; height: 200px"> -->
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
    <!-- </div> -->

JavaScript

$(function () {

    var today = {};
    today.label = 'Today';
    today.date = new Date();
    today.date.setHours(0,0,0,0);
    today.time = today.date.getTime();
    
    
    var colors = [
        '#7a1f1f',
        '#005028',
        '#1a676a',
        '#5c5c5c'
    ]
    
    

    
    var dateRange = [
                { 
                y: 1,
                low: Date.UTC(2013, 11, 31),
                high: Date.UTC(2015, 11, 31),
                color: colors[0]
            },
            { 
                y: 2,
                low: Date.UTC(2012, 12, 31),
                high: Date.UTC(2015, 11, 31),
                color: colors[1]
            },
            { 
                y: 3,
                low: Date.UTC(2012, 12, 31),
                high: Date.UTC(2014, 11, 31),
                color: colors[1]
            }  
            ];
    
       
    var subReleases = [
            { 
                y: Date.UTC(2013, 12, 31),
                x: 0,                
                color: "white",
                name: 'relase !!!!!!',
                type: 'release',
                description: '1st release'
            }
    
    ];

    
    $('#container').highcharts({
        
        scrollbar: {
            enabled: true
        },
        
        legend: {
            enabled: false
        },
        
        chart: {
            
            renderTo: 'container',
            type: 'columnrange',
            //height: 200,
            inverted: true,
                events: {
                    
                    load: function(e) {
                    /*    $(".highcharts-tracker rect").popover({trigger:'hover', placement:'top', title:'Title!', content:'Content'}).hover(function() {
                        $('.popover').appendTo($(document.body));
                    });
                    */
                        /*
                        $(".highcharts-tracker rect")
                        .hover(function() {
                 ...