highstocks x-axis time incorrect

Question

I have stock market data plotted over highcharts:

My JS Code:

    $(function() {

    $.getJSON('data.php', function(data) {
        console.log(data);
        // Create the chart
        $('#container').highcharts('StockChart', {

            rangeSelector:{
                enabled:false
            },

            navigator: {
                enabled: true
            },

            useUTC: false,

            xAxis: {
                    type: 'datetime',
                    labels: {
                        formatter: function () {
                            return Highcharts.dateFormat('%H:%M', this.value);
                        },
                    }
                },

            title : {
                text : 'NSE Stock Price'
            },

            credits: {
                enabled : false
            },

            series : [{
                name : 'NSE Stock Prices',
                data : data,
                tooltip: {
                    valueDecimals: 2
                }
            }]

        });
    });
});

My JSON output (partial):

[["09:01:00",27966.96],["09:03:00",27934.64],["09:03:00",27934.64],["09:07:00",27952.66],["09:07:00",27952.66],["09:07:00",27952.66]]

I expect time from 9:00am to 4:00pm on x-axis but I am just not getting it.

enter image description here

I tried changing time to unix time changing date format useUTC to true but noting worked out.

Update:

Tried this format too,

[["2014-11-14 09:01:00",27966.96],["2014-11-14 09:03:00",27934.64],["2014-11-14 09:03:00",27934.64]]

Update 2

My PHP code,

$array_item[] = array(date('H:i:s',strtotime($price_date)), (float)$last_traded_price);

Update 3: (some of the latest values)

[["2014-11-17 09:00:00",28065.72],["2014-11-17 09:02:00",28048.8],["2014-11-17 09:04:00",28041.93],["2014-11-17 09:06:00",28029.58],["2014-11-17 09:08:00",28018.68],["2014-11-17 09:10:00",28018.68],["2014-11-17 09:12:00",28018.68],["2014-11-17 09:14:00",28018.68],["2014-11-17 09:16:00",27988.73],["2014-11-17 09:18:00",28001.06],["2014-11-17 09:20:00",28003.06],["2014-11-17 09:22:00",27988.44],["2014-11-17 09:24:00",28011.67],["2014-11-17 09:26:00",27988.56],["2014-11-17 09:28:00",27991.17],["2014-11-17 09:30:00",27983.98],["2014-11-17 09:32:00",27972.01],["2014-11-17 09:34:00",27980.87],["2014-11-17 09:36:00",27994.42],["2014-11-17 09:38:00",28007.38],["2014-11-17 09:40:00",28005.57],["2014-11-17 09:42:00",27986.39],["2014-11-17 09:44:00",28010.79],["2014-11-17 09:46:00",27998.44],["2014-11-17 09:48:00",28012.66]]

This is as per: $array_item[] = array(strtotime($price_date), (float)$last_traded_price);

[[1416195000,28065.72],[1416195120,28048.8],[1416195240,28041.93],[1416195360,28029.58],[1416195480,28018.68],[1416195600,28018.68],[1416195720,28018.68],[1416195840,28018.68],[1416195960,27988.73],[1416196080,28001.06],[1416196200,28003.06],[1416196320,27988.44],[1416196440,28011.67],[1416196560,27988.56],[1416196680,27991.17],[1416196800,27983.98],[1416196920,27972.01],[1416197040,27980.87],[1416197160,27994.42],[1416197280,28007.38],[1416197400,28005.57],[1416197520,27986.39],[1416197640,28010.79],[1416197760,27998.44],[1416197880,28012.66],[1416198000,28018.49],[1416198120,28010.15],[1416198240,28028.18],[1416198360,28035.61],[1416198480,28024.87],[1416198600,28018.95],[1416198720,28007.81],[1416198840,28001.57],[1416198960,28006.85],[1416199080,27997.68],[1416199200,27993.06]]

The output: Still not giving perfect timings although not giving 00:00 as before.

enter image description here

The graph is breaking in middle.

enter image description here

Update 3:

PHP Code,

while ($stocks_bse_price->fetch()) { $array_item[] = array(strtotime($price_date)*1000, (float)$last_traded_price); }

JSFidle link: http://jsfiddle.net/Ywr3L/38/

Update 4:

Just realized its going wrong if figures for entire day is given as an input to array.

I have stored entire days data http://pastebin.com/NVAD5EyG

Update 5:

This is what I did in MySql query:

DATE_FORMAT(price_date,'%d-%c-%Y %r') as price_date

And then in PHP

$price_date = $price_date.' UTC';
$array_item[] = array(strtotime($price_date)*1000, (float)$last_traded_price);

Which is giving me this:

http://jsfiddle.net/rof96xuo/1/

[[1416301200000,28177.51],[1416301320000,28180.46],[1416301440000,28181.03],[1416301560000,28198.98],[1416301680000,28209.03],[1416301800000,28209.03]]

new Date(1416301200000) Tue Nov 18 2014 14:30:00 GMT+0530 (India Standard Time)

I tried putting "2014-11-15 9:00:00" as well but no use, updated the question. — , Nov 15 '14 at 11:58
The `Datetime` should be in `UTC`. Use `Date.UTC(Year, month, day, ...)' — Raein Hashemi, Nov 15 '14 at 12:05
@RaeenHashemi we follow GMT time zone here in India. Cant it work on that? — , Nov 15 '14 at 12:31
Actually it is in `javascript` and you should change your data when assigning to the chart. And it doesn't matter if you're in India or anywhere else, `UTC` calculates the milliseconds from a starting point and it isn't a `timezone` — Raein Hashemi, Nov 15 '14 at 12:35
Oh sorry. I am actually passing data directly from a variable "data" can you please guide me on how to update the timezone? I mean this is what I am writing in code `data : data,` data has time as well as value. How can I convert time here? — , Nov 15 '14 at 12:37
@SebastianBochan my data is sorted wrt time. It is in increasing order of time from 9:00am to 5pm — , Nov 17 '14 at 14:06
No is not sorted, See your array items: [1416209280000, 27963.21], [1416166200000, 27961.47] — Sebastian Bochan, Nov 17 '14 at 14:41
@SebastianBochan it is sorted [1416209280000, 27963.21] is `new Date(1416209280000) Mon Nov 17 2014 12:58:00 GMT+0530 (India Standard Time)` and [1416166200000, 27961.47] is `new Date(1416166200000) Mon Nov 17 2014 01:00:00 GMT+0530 (India Standard Time)` 1pm is after 12:58pm. 27963.21 and 27961.47 are stock prices and are expected to fluctuate. My sorting is according to time. — , Nov 18 '14 at 04:52
Dude, at one point in your data you have `[1416199920000, 27983.64], [1416200040000, 27976.16],` and at another point you have `[1416209280000, 27963.21],[1416166200000, 27961.47],`. THIS IS NOT SORTED!! Check it again. And also you have lots of this: `[1416177000000, 28177.88]` — Raein Hashemi, Nov 18 '14 at 05:36
@RaeenHashemi there must be around 5-6 may be more `[1416177000000, 28177.88]` as its the closing time of market `new Date(1416177000000) Mon Nov 17 2014 04:00:00 GMT+0530 (India Standard Time)`. I dont think that should matter as the graph would go straight in this case. With all respects, I am not able to get you 'it is not sorted' this is with respect to what? Can you please highlight. — , Nov 18 '14 at 05:53
`1416199920000` is smaller than `1416200040000` and it came before. `1416209280000` is bigger than `1416166200000` and also came before. So as you can see you are nothing putting your `datetime`s in order. Some descending and some ascending. — Raein Hashemi, Nov 18 '14 at 06:57
@RaeenHashemi well I dont think so the data is not allined properly but still let me check once again for complete day's data for today when market closes by 4pm. Still my other concern is the graph for today, though rendering properly till now, timings are incorrect, has to be from 9:00am onwards...http://jsfiddle.net/a1jLks4p/1/ — , Nov 18 '14 at 07:32
Your first `datetime` is `1416281400000` which is `Nov 18, 3:30`!! Your last `datetime` is `1416295440000` which is `Nov 18, 7:24`!! Exactly as shown in the chart. Correct your data, and don't say I don't think so, check!! — Raein Hashemi, Nov 18 '14 at 07:48
@RaeenHashemi Which time zone are you in? Believe me I am getting `new Date(1416281400000); Tue Nov 18 2014 09:00:00 GMT+0530 (India Standard Time)` in my console. — , Nov 18 '14 at 08:03
`Iran`. OK this explains it. But, again the sorting is not OK in this http://jsfiddle.net/Ywr3L/38/. — Raein Hashemi, Nov 18 '14 at 08:16
@RaeenHashemi sorting has to be proper, I am sure about it what I can do is I shall upload entire day json output in plain date time format and the same after strtotime conversion lets see the result after that. That's a different issue now, other issue is how can I render the time in IST format? — , Nov 18 '14 at 08:56
Before converting, append a `UTC` to your string like: `6/29/2011 4:52:48 PM UTC`, and it will be `Wed Jun 29 2011 09:52:48 GMT-0700 (PDT)`. So when shown in highcharts it will automatically change it to your timezone `IST`. — Raein Hashemi, Nov 18 '14 at 09:25
@RaeenHashemi so want me to get the MySql date time output in format `mm/dd/yyyy H:i:s PM` and then append `UTC` before converting to `strtotime` ? — , Nov 18 '14 at 09:34
In `javascript` you can do this: `var date = new Date('6/29/2011 4:52:48 PM UTC')` and date would be `"Wed Jun 29 2011 09:52:48 GMT-0700 (PDT)"`. Then if you use `date` it will be converted to your `local datetime` by `highcharts` — Raein Hashemi, Nov 18 '14 at 09:53
@RaeenHashemi can't I do it using php itself? As I am directly passing data from ajax call to highcharts not so sure how will I do above mentioned steps via `js`. Have tried the steps in mentioned in Update 5: above in main question. It gives me `Tue Nov 18 2014 14:30:00 GMT+0530 (India Standard Time)`, but the graph is still wrong. — , Nov 18 '14 at 09:59
@RaeenHashemi can you guide me with the js code looking at my above code? If at all possible for you. — , Nov 18 '14 at 10:20
I looked at it. Forget about what I said about adding `UTC`. Your first data in your last link (http://jsfiddle.net/Ywr3L/38/) had the datetime `Mon Nov 17 2014 09:00:00 GMT+0530 (India Standard Time)` which is OK by your sayings. But I checked your data and found a datetime `Sun Nov 17 2014 01:00:00 GMT+0530 (India Standard Time)` which is before `9:00` which you mentioned!! Therefore you have to sort your data dude. I used `data.sort()` on your chart and here's the output: http://jsfiddle.net/Ywr3L/40/ As you can see, your first data is not `9:00` — Raein Hashemi, Nov 18 '14 at 10:47
@RaeenHashemi data is sorted properly actually MySql not converting time properly it converts to `PM` till `12:59` and then for `1:00` it says `AM` which actually should be `1:00 PM` have a look `["18\/11\/2014 12:58:00 PM UTC",28201.81],["18\/11\/2014 01:00:00 AM UTC",28193.47]` this is actually root cause of the issue. — , Nov 18 '14 at 12:00
I don't know about your SQL part, why can't you manage to get the right data? — Raein Hashemi, Nov 18 '14 at 12:24
@RaeenHashemi the issue is I have date time in column with data type datetime and date is stored in 12 hr format and highcharts expects it in 24hrs format. As the reason why what should be 1pm is rendered as 1am and it seems data is not sorted. — , Nov 18 '14 at 12:30
So convert your time. Check your AM and PMs and change the time as needed — Raein Hashemi, Nov 18 '14 at 12:34
@RaeenHashemi finally did it although not via straight way I created my own function to change am to pm. Anyways thanks for your support and help. Appreciate it. :) — , Nov 18 '14 at 12:56

score 3 · Answer 1 · edited May 23 '17 at 11:49

3

As @RaeenHashemi is saying in the comments, highcharts expects datetime data to be in JavaScript epoch times (number of milliseconds since 1970/01/01). You are giving it a string representation of your datetime.

It looks like you are generating JSON from PHP. If so, modify the PHP to convert the time to epoch. If you have a DateTime object in your PHP use getTimeStamp:

$date->getTimestamp() * 1000; // unix timestamp to javascript millisecond timestamp

If you have date time strings in your PHP, convert it to a DateTime first.

edited May 23 '17 at 11:49

Community

1
1

answered Nov 15 '14 at 16:52

Mark

106,305
20
172
230

This is my php code `$array_item[] = array(date('H:i:s',strtotime($price_date)), (float)$last_traded_price);` updated my question as well – Nov 15 '14 at 21:21
@FakhruddinUjjainwala, use `array(strtotime($price_date) * 1000, (float)$last_traded_price);` – Mark Nov 16 '14 at 18:26
Updated my question with the output as per your suggestions. Although its not giving `00:00` its now giving all as `09:23` – Nov 17 '14 at 06:24
Your data still isn't multiplied by 1000. After multiplication is fine: http://jsfiddle.net/Ywr3L/32/ – Paweł Fus Nov 17 '14 at 11:04
my php code I have already multiplied by 1000 `while ($stocks_bse_price->fetch()) { $array_item[] = array(strtotime($price_date)*1000, (float)$last_traded_price); }` this is the code I am using also I have updated same JSON output in fiddle http://jsfiddle.net/Ywr3L/35/. Please have a look at it. – Nov 17 '14 at 12:11
Its actually going wrong with the if values of entire day is given as input. – Nov 17 '14 at 12:31
Also in your fiddle the time is going beyond 5pm now that's not possible as market closes at 5pm max data is received till 5:30. – Nov 17 '14 at 12:43
First of all, sort your data, you have errors **(!)** in console: http://www.highcharts.com/errors/15. And remove all duplicated points. Then type in your console: `new Date(1416177000000)` - what date do you have? – Paweł Fus Nov 17 '14 at 13:11
@PawełFus Today's 1st value is `[1416281400000, 28177.51]` which gives me in console `new Date(1416281400000) Tue Nov 18 2014 09:00:00 GMT+0530 (India Standard Time)` but in chart it gives me `3:30` http://jsfiddle.net/dxg7a11u/ this is my code at php end `strtotime($price_date)*1000` also except CSS error what other errors are there I could not find any. – Nov 18 '14 at 04:46
Read my question again please. – Paweł Fus Nov 18 '14 at 10:42
2

Its because of the +5:30 hours your time zone differs from GMT. – Raein Hashemi Nov 18 '14 at 12:31
@PawełFus as I said there were no duplicates it was a problem in am and pm – Nov 18 '14 at 12:57
1

Still, your data isn't sorted ascending by x-values. See fixed demo: http://jsfiddle.net/rof96xuo/2/ Also, to disable UTC, use `Highcharts.setOptions()`. – Paweł Fus Nov 18 '14 at 13:00
@PawełFus data is sorted its the issue of AM and PM data after 12pm is rendered as am it should be in pm format hence graph renders incorrectly. – Nov 18 '14 at 14:50
In the example you posted earlier it wasn't.. sorry, I really know what I saw in console :) – Paweł Fus Nov 18 '14 at 18:20

highstocks x-axis time incorrect

1 Answers1