date time plotting in highcharts

Question

I have 15 min interval date wise data to plot. Dates might not be consistent in my case.

Sample format: var row = ["2012-02-29", " 00:15", "0"]

I am getting the array from Java class for plotting.

I tried a few options like :

    var tempVal = new Array();

    for(var i=0;i<row.length;i++){

        var record = row[i].split(",");
        tempVal[i]=Date.UTC(record[0].substring(0,4), record[0].substring(5,7),   record[0].substring(8,10), record[1].substring(1,3), record[1].substring(4,7)), record[2];

}

In Highcharts : series: [{ data: tempVal }]

But i am unable to plot this on Highcharts.

Any guidance would be helpful.

wergeld · Answer 1 · 2013-07-22T14:13:06.260

To plot a date time on HighCharts you need a date time value and a y value. It should look something like the following:

data: [
                [Date.UTC(2010, 0, 1), 29.9], 
                [Date.UTC(2010, 2, 1), 71.5], 
                [Date.UTC(2010, 3, 1), 106.4]
            ]

Or your could replace Date.UTC(2010, 0, 1) with the equivalent javascript time value.

Date.UTC() can accept several different formats. See here.

So what you need to do is combine your date value and your time value into one single time value.

EDIT after looking at your example code you have a couple of issues. For one your data array tempVal is declared wrong. It should be:

var tempVal = [];

You should also be using array.push to get the data into the tempVal array.

The other issue is that your time series does not appear to be in chronological order - when I had your series set up correctly I got the area "line" going back and forth.

All that being said what I came up with is that you need to fix your data array declaration and how you are assigning data to that array. This is a very simple method and it can of course be made faster but I like verbose:

for (var i = 0; i < row.length; i++) {
    var record = row[i].split(",");
    var xVal = Date.UTC(parseInt(record[0].substring(0, 4)), parseInt(record[0].substring(5, 7)), parseInt(record[0].substring(8, 10)), parseInt(record[1].substring(1, 3)), parseInt(record[1].substring(4, 7)));
    var yVal = Math.random() * 10;
    var x = [xVal, yVal];
    tempVal.push(x);
}

See updated example here. Note that the lines go back and forth - as I said this has to do with your time series not being in chronological order. Also note that months are 0-based so Jan = 0 and Dec = 11.

Thanks but i did try putting in the date and time in Date.UTC() but still it doesn't plot anything. The data is 15-min interval data but dates might not be consistent. Please advise — user2599730, Jul 22 '13 at 08:10
the fact that the "dates might not be consistent" is not important. We are going to see a bit more code or even better a representative jsFiddle showing some example data and the issue you are facing. — wergeld, Jul 22 '13 at 12:24
Thanks a lot, it works fine now. I hope i don't get into any further issues :) — user2599730, Jul 23 '13 at 07:35

score 0 · Answer 2 · answered Jul 22 '13 at 10:57

0

Do you have errors in console? If you have code you posted, you should have one.

Regarding Highcharts - it is required to values should be numbers, not strings, soe for example: record[2] should be parsed before, for example: parseFloat(record[2])

answered Jul 22 '13 at 10:57

Paweł Fus

44,795
3
61
77

Please look at my [question here](http://stackoverflow.com/questions/27983248/need-help-in-plotting-a-chart-using-highcharts-in-angularjs) – AabinGunz Jan 17 '15 at 19:09

date time plotting in highcharts

2 Answers2