UTC Woes, Flot X Axis Time Wrong

Question

So I've read through most search results, and the archives at the discussion group for flot... not sure what I can do here as I don't think I fully appreciate the problem...

I currently have unix timestamped data that I'm displaying on both daily and weekly snapshot graphs. Daily graph options shown...

            $.ajax({
                url: "/whats/encode_daily_graph.php?itemid=<?php echo $_GET['item']?>",
                method: 'GET',
                dataType: 'json',
                success: onOutboundReceived
            });
            function onOutboundReceived(series) {
                var length = series.length;
                var finalData = series;
                var options = {
                    lines: { show: true },
                    legend: { show : false },
                    points: { show: true, hoverable:true },
                    grid: { hoverable: true, clickable: true },
                    xaxis: { mode : "time", timeformat : "%H:%M" },
                    yaxis: { minTickSize: "1", tickDecimals : "0" }
                };
                $.plot($(".graph_daily"), finalData, options);
            }

So a lot threads (as well as the docs) mention that I should "pretend the data is UTC". Well in my case, since my data is all logged PST (UTC-8), I should just add 8*3600*1000 to my data that I'm passing into the graph, right? For some reason neither subtracting nor adding this offset does anything I expect - the scales change to something completely unreasonable. So I'm probably misunderstanding the entire question at hand.

Could anyone provide any insight into this matter? Thanks for your time!

EDIT : Here's what the AJAX url fetches back for one graph.

[{"label":"24 Hour Overview","data":[[1343283113000,"111"],[1343286597000,"111"], [1343290220000,"111"],[1343293802000,"111"],[1343297377000,"111"],[1343300843000,"111"], [1343304504000,"111"],[1343308105000,"111"],[1343311724000,"111"],[1343315331000,"111"],[1343322489000,"111"],[1343326080000,"111"],[1343329669000,"111"],[1343333296000,"111"],[1343336882000,"111"],[1343340493000,"111"],[1343344094000,"111"],[1343347683000,"111"],[1343351299000,"111"],[1343355015000,"111"],[1343358535000,"112"],[1343362132000,"112"],[1343365704000,"112"]],"color":"#FFAA42"}]

Here's what it looks like on graph. Note I have a tooltip that uses Javascript's Date to construct a Date object so I can easily grab the hour and minutes of the json data, and this doesn't match the axis. https://i.stack.imgur.com/k32IM.png

How the tooltip is rendered :

            var previousPoint = null;
            $(".graph_daily").bind("plothover", function (event,pos,item){
                if (item) {
                    if (previousPoint != item.dataIndex) {
                        previousPoint = item.dataIndex;

                        $("#graph_info").remove();
                        var x = item.datapoint[0].toFixed(2), y = item.datapoint[1].toFixed(2);
                        var date = new Date(item.datapoint[0]);
                        var hour = date.getHours();
                        var min = date.getMinutes();
                        var msg = hour + ":" + min + ", " + y;
                        if (min < 10) msg = hour + ":" + "0" +  min + ", " + y;
                        showToolTip(item.pageX, item.pageY, msg);
                    }
                }
                else{
                    $("#graph_info").remove();
                    previousPoint = null;
                }
            });

let me clear myself before answering...for the last one if am right it should be 5:08 but displaying 22:08???? — thecodejack, Jul 27 '12 at 05:53
Now that you mention it... yes. Then this must be a problem with how the tooltip time shown is being converted...However, I would like to show everything in PST if possible. — geogaddi, Jul 27 '12 at 06:07

score 4 · Accepted Answer · answered Jul 27 '12 at 16:01

All you need to do is change your tooltip code to correctly add the timezone offset:

       var x = item.datapoint[0],
           y = item.datapoint[1].toFixed(2);
       var date = new Date(x + (7 * 60 * 60 * 1000));

After that your graph axes and tooltips line up correctly for me. You may find that making your graph work for people in other timezones is slightly more complicated - you would want to move your raw JSON data to UTC (i.e. if it's recorded in PDT, add that before sending to the browser). Then when you go to create the tooltip, instead of offsetting by 7*60*60*1000, you would offset by this:

        var userTZ = new Date();//user = the viewers browser
        userTZ = userTZ.getTimezoneOffset()*60*1000;
        var dt = new Date(x+userTZ);

Here it is working as in the simpler example: http://jsfiddle.net/ryleyb/4uuPZ/

For the tooltip ,I actually ended up just doing getUTCHours() which ends up with the same thing? I think. I'll attempt your method at offsetting the data and rendering it at the proper local timezones. Thanks! — geogaddi, Jul 27 '12 at 17:43
Flot really should have a flag for UTC-or-localized rendering of datetimes IMHO. Storing dates on a server as UTC is the only sensible representation. But I don't think you'll convince the flot maintainers of this, based on list traffic I've read. :-( — Mark Maxham, Nov 27 '12 at 01:13

score 1 · Answer 2 · answered Oct 08 '15 at 14:06

1

Flot has a timezone: "browser" option for the x-axis. Setting this would cause the dates to be formatted in local browser time. To print out the date on plot hover use Date.toLocalTimeString

answered Oct 08 '15 at 14:06

Jaco Briers

1,703
1
21
34

score 0 · Answer 3 · answered Jul 27 '12 at 06:35

0

i suggest you use following in your php. the output will give same in JS as well

 $hour=mktime($h+1,$i,$s,$m,$d,$y)*1000;

answered Jul 27 '12 at 06:35

thecodejack

12,689
10
44
59

UTC Woes, Flot X Axis Time Wrong

3 Answers3