Jugal | Customize tick positions | Highchart & Highstock

http://stackoverflow.com/questions/13289934/highchart-datetime-x-axis-display-end-of-month-date-instead-of-first-day-of-mo Jugal Thakkar http://jugal.me/

by Jugal Thakkar

HTML

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js" ></script>
<script type="text/javascript" src="http://code.jugal.me/js/jugalsLib.js" ></script>
<script type="text/javascript" src="http://code.highcharts.com/stock/highstock.src.js" ></script>
<script type="text/javascript" src="http://code.highcharts.com/stock/modules/exporting.src.js" ></script>

<div id="container"></div>

CSS

#container{
    min-width:500px;
}

JavaScript

var chartingOptions = {
    xAxis: {
        type: 'datetime',
        tickPositioner: function() {
            var ticks = [
                Date.UTC(2012, 0, 31), 
                Date.UTC(2012, 2, 31), 
                Date.UTC(2012, 4, 31), 
                Date.UTC(2012, 6, 31), 
                Date.UTC(2012, 8, 30), 
                Date.UTC(2012, 10, 30)];
            //dates.info defines what to show in labels
            //apparently dateTimeLabelFormats is always ignored when specifying tickPosistioner
            ticks.info = {
                unitName: "month", //unitName: "day",
                higherRanks: {} // Omitting this would break things
            };           
            return ticks;
        }
    },
    series: [{
        name: 'Portfolio',
        data: [
            [Date.UTC(2012, 0, 31), 1.9],
            [Date.UTC(2012, 1, 29), 1.2],
            [Date.UTC(2012, 2, 31), 2.0],
            [Date.UTC(2012, 3, 30), 2.5],
            [Date.UTC(2012, 4, 31), 2.8],
            [Date.UTC(2012, 5, 30), 2.9],
            [Date.UTC(2012, 6, 31), 2.4],
            [Date.UTC(2012, 7, 31), 2.6],
            [Date.UTC(2012, 8, 30), 3.2],
            [Date.UTC(2012, 9, 31), 3.4],
            [Date.UTC(2012, 10, 30), 3.6],
            [Date.UTC(2012, 11, 31), 3.9]
            ]}]

};

chartingOptions = $.extend({}, jugalsLib.getBasicChartOptions(), chartingOptions);
var chart = new Highcharts.Chart(chartingOptions);