CODEWITHSUNDEEP
javascripthighcharts
Alfonso
Alfonso

Reputation: 1325

Highcharts: Not showing values, datetime type

I'm trying to figure it out but I don't know exactly how to do it..

This is my current demo code: http://jsfiddle.net/cf88s6ky/

This one works, but I don't know how: http://jsfiddle.net/93Xcu/7/

What I'm doing wrong?

I don't know exactly how works this part:

  data: [
            [1369206795000, 1],
            [1369225421000, 3],
            [1369230934000, 2]
        ]

enter image description here

Upvotes: 0

Views: 1284

Answers (2)

muradin
muradin

Reputation: 1277

It is a conversion of full time in seconds or something that as an X-data passed to your chart and since you change the min and max value of time it has been out of range value, so you have not any presentation of your data.

I suggest you to write your own data conversion. In this case if you want to have daily values use something like this in X axis.

xAxis: {
        min: 0,
        max: 86400,
            reversed: false,
            title: {
                enabled: true,
                text: 'Time'
            },
            labels: {
                formatter: function () {
                    return Math.floor(this.value/3600) + ":" + Math.floor((this.value%3600)/60);
                }
            }
}

And you need to pass data elements in format of [time_in_seconds, value] in each series.

Upvotes: 1

David John Smith
David John Smith

Reputation: 1864

The first column in your data array is a timestamp - the reason nothing is appearing on your updated graph is that you've adjusted the x-axis range but the timestamps are outside of this new range.

To make the time values more readable you could change it to something like this:

$(function () {
    $('#container').highcharts({
        chart: {
            zoomType: 'x'
        },
        xAxis: {
            type: 'datetime',
            tickInterval: 3600 * 1000,
            min: Date.UTC(2014,11,14),
            max: Date.UTC(2014,11,15),
        },
        series: [{
            data: [
                [Date.UTC(2014,11,14, 0, 0, 0), 1],
                [Date.UTC(2014,11,14, 8, 0, 0), 3],
                [Date.UTC(2014,11,14, 16, 0, 0), 2]
            ],
            pointStart: Date.UTC(2014,11,14),
            pointInterval: 24 * 3600 * 1000 // one day
        }]
    });
});

Upvotes: 2

Related Questions