score:1

It's not that straightforward because Highcharts automatically determines the labels to use when the x-axis is of the type 'datetime':

"In a datetime axis, the numbers are given in milliseconds, and tick marks are placed on appropriate values like full hours or days"

To set labels like '10:33' you need to create your own categories. Luckily these can simply be derived from your data and the desired time interval.

Here's a working example: http://jsfiddle.net/Rt7ZV/

We just take the given start date, interval and number of points and build an array of the categories to be used as the x-axis labels.

function getTimes(numTimes, interval) {

    var ms = (new Date(2012, 02, 30, 10, 33)).getTime();
    var times = [];
    var startDate = new Date(ms);
    times.push(startDate.getHours() + ":" + startDate.getMinutes());

    for (var i = 1; i< numTimes; i++)
    {
        ms += interval;
        var nextTime = (new Date()).setTime(ms);
        var nextDate = new Date(nextTime);
        times.push(nextDate.getHours() + ":" + pad(nextDate.getMinutes(), 2));
    }

    return times;

}

function pad(num, size) {
    var s = num+"";
    while (s.length < size) s = "0" + s;
    return s;
}

var data = [1, 2, 3, 4, 5, 3, 2, 5, 7, 6, 4];
var interval = 10*60*1000
var timeCategories = getTimes(data.length, interval);

$(function () {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                zoomType: 'x',
                spacingRight: 20
            },
            title: {
                text: 'Time series'
            },
            xAxis: {
                categories: timeCategories,
                title: {
                    text: null
                },
                startOnTick: false
            },
            yAxis: {
                title: {
                    text: 'Exchange rate'
                },
                startOnTick: false,
                showFirstLabel: true
            },
            tooltip: {
                shared: true
            },
            legend: {
                enabled: false
            },


            series: [{
                type: 'line',
                name: 'time series',
                data: [
                    1, 2, 3, 4, 5, 3, 2, 5, 7, 6, 4
                ]
            }]
        });
    });

});

score:1

I found the tickPositions property on xAxis, which isn't documented on highcharts, only on highstock, but seems to work fine on both. With this property you can specify which values you want to hace a tick for, and work perfectly for my problem.


Related Articles