title: UTC Woes, Flot X Axis Time Wrong
body: <p>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...</p>
  
  <p>I currently have unix timestamped data that I'm displaying on both daily and weekly snapshot graphs. Daily graph options shown...</p>
  
  <pre><code>            $.ajax({
                  url: "/whats/encode_daily_graph.php?itemid=&lt;?php echo $_GET['item']?&gt;",
                  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);
              }
  </code></pre>
  
  <p>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.</p>
  
  <p>Could anyone provide any insight into this matter? Thanks for your time!</p>
  
  <p>EDIT : Here's what the AJAX url fetches back for one graph.</p>
  
  <p>[{"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"}]</p>
  
  <p>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. <a href="http://i.imgur.com/Jwsyd.png" rel="nofollow">http://i.imgur.com/Jwsyd.png</a></p>
  
  <p>How the tooltip is rendered :</p>
  
  <pre><code>            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 &lt; 10) msg = hour + ":" + "0" +  min + ", " + y;
                          showToolTip(item.pageX, item.pageY, msg);
                      }
                  }
                  else{
                      $("#graph_info").remove();
                      previousPoint = null;
                  }
              });
  </code></pre>