(3M) Time Scaling in Highcharts

by bakhshi

HTML

<script src="http://code.highcharts.com/3.0.5/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

var dateRanges = {
    millisecond: 'millisec',
    second: 'second',
    minute: 'month',
    hour: 'hour',
    day: 'day',
    week: 'week',
    month: 'month',
    year: 'year'
}

Date.prototype.getWeek = function() {
        var onejan = new Date(this.getFullYear(), 0, 1);
        return Math.ceil((((this - onejan) / 86400000) + onejan.getDay() + 1) / 7);
    }


function getYear(date){
    return date.getFullYear();
}

var months = ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'];

var weekDays = ['sun', 'mon', 'tue', 'wed', 'thr', 'fri', 'sat'];
function getMonth(date){
    if(date.getMonth())
        return months[date.getMonth()];
    return 'jan '+getYear(date);
}

function getWeek(date){
    return months[date.getMonth()] + ' ' + date.getDate();
}

function getDay(date){
    return weekDays[date.getDay()] + ' '+ months[date.getMonth()] + ' ' + date.getDate();
}

    function printUTC(a) {
        console.log(a.getUTCFullYear(), a.getUTCMonth(), a.getUTCDate(), a.getUTCHours(), a.getUTCMinutes(), a.getUTCMilliseconds());
    }

    function getDateString(date, isFirst, isLast, dateRange) {
        if (isFirst) return "first";
        if (isLast) return "last";
        switch (dateRange) {
            case dateRanges.year:return getYear(date);
            case dateRanges.month: return getMonth(date);
            case dateRanges.week : return getWeek(date);
            case dateRanges.day: return getDay(date);
        }
    }

$(function () {
    $('#container').highcharts({
        chart: {
            zoomType: 'x'
        },
        title: {
            text: 'USD to EUR exchange rate from 2006 through 2008'
        },
        subtitle: {
            text: document.ontouchstart === undefined ?
                'Click and drag in the plot area to zoom in' :
                'Pinch the chart to zoom in'
        },
        xAxis: {
            type: 'datetime',
            minRange: 7 * 24 * 3600000 // one week (do not...