CODEWITHSUNDEEP
datetimeplothighcharts
user2599730
user2599730

Reputation: 1

date time plotting in highcharts

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.

Upvotes: 0

Views: 2350

Answers (2)

wergeld
wergeld

Reputation: 14442

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.

Upvotes: 1

Paweł Fus
Paweł Fus

Reputation: 45079

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])

Upvotes: 0

Related Questions