Highcharts Demo

author(s): Torstein Hønsi

by Roydon DSouza

HTML

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

<div id="container" style="height: 400px; width: 800px"></div>

JavaScript

$(function () {
    var cmonth;

    $('#container').highcharts({
        xAxis: [{
            type: 'datetime',
            labels: {
            formatter: function() {
                if(this.isFirst){
                     return Highcharts.dateFormat('%e', this.value);
                }else{
                    return Highcharts.dateFormat('%e', this.value);
                }
                
            }
        },
        
      tickInterval: 1 * 24 * 3600 * 1000
        },
        {   lineWidth: 0,
           minorGridLineWidth: 0,
           lineColor: 'transparent',
           minorTickLength: 0,
           tickLength: 0,
            type: 'datetime',
            labels: {
               // step:2,
            formatter: function() {
                if(((this.isFirst) && (Highcharts.dateFormat('%e', this.value)!=1) )|| (Highcharts.dateFormat('%e', this.value)==1)){
                    
                    return Highcharts.dateFormat('%b', this.value);
                }
                    
                
            }
        },

       //tickInterval: 30 *24 * 3600 * 1000,
                 
        }],
        tooltip: {
            dateTimeLabelFormats: {
                day: '%e of %b'
            }
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6,
                  29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6,
                  29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6,
                   29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6,
                  29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6,
               
            135.6,176.0, 135.6,176.0, 135.6
                  ],
            pointStart: Date.UTC(2010, 0, 30),
            pointInterval: 24 * 3600 * 1000 // one day
        }]
    }, function(chart) {
        var extremes = chart.xAxis[0].getExtremes();
        chart.xAxis[1].setExtremes(extremes.min-0.5,extremes.max+0.5);
        });
});