(5D) 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 'w ' + date.getWeek();
}

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: 0 // one week (do not zoom in to smaller than a week)
            ,
           ...