2014-03-07 2 views
0

높은 차트를 사용하여 차트를 만들려고하지만 올바른 시간 간격으로 표시 값을 표시 할 수 없습니다. enter image description here높은 차트에 적절한 데이터 타임 스탬프가 표시되지 않습니다.

당신은 차트 그러나 당신이 enter image description here

내 데이터베이스 구조 아래 그림에서 내 결과 값 25에 해당하는 내 데이터베이스에는 오전 1시이없는 것을 볼 수 있습니다 오전 1시의 결과를 나타내는 것을 볼 수 enter image description here

높은 차트의 PHP 코드

<!DOCTYPE html> 
<html lang="en" dir="ltr"> 

<head> 
    <title>FlatWEB - Free Responsive Website HTML5 Template</title> 
    <!--[if IE]><meta http-equiv="X-UA-Compatible" content="chrome=1"><![endif]--> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <meta name="format-detection" content="telephone=no"/> 
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" /> 
    <link rel="dns-prefetch" href="http://fonts.googleapis.com/"> 
    <link rel="dns-prefetch" href="http://ajax.googleapis.com/"> 
    <link rel="dns-prefetch" href="http://html5shim.googlecode.com/"> 
    <link rel="dns-prefetch" href="http://google-analytics.com/"> 
    <link rel="shortcut icon" href="img/favicon.ico"> 
    <link rel="apple-touch-icon" href="img/apple-touch-icon-57x57-precomposed.png"> 
    <link rel="apple-touch-icon" sizes="72x72" href="img/apple-touch-icon-72x72-ipad.png"> 
    <link rel="apple-touch-icon" sizes="114x114" href="img/apple-touch-icon-114x114-retina.png"> 
    <link rel="apple-touch-icon" sizes="144x144" href="img/apple-touch-icon-144x144-retina.png"> 
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400,700,400italic"> 
    <link rel="stylesheet" type="text/css" href="styles/resetadmin.css"> 
    <link rel="stylesheet" type="text/css" href="styles/stylesgraph.css"> 
    <link rel="stylesheet" type="text/css" href="styles/font-awesomeadmin.css"> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" /> 
    <style> 
    body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,input,textarea { font-family: 'Lucida Grande', Tahoma, Verdana, sans-serif; } 
    </style> 

    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script> 
    <script src="date.js"></script> 
    <script type="text/javascript"> 
    var options; 
    var chart; 
    $(document).ready(function() { 
     init(); 

    }); 

    function init() { 
     $('#back_btn').hide(); 
     options = { 
      chart: { 
       renderTo: 'container', 
       type: 'line' 
      }, 
      title: { 
       text: '' 
      }, 
      subtitle: { 
       text: '' 
      }, 
      xAxis: { 
       categories: [], 

       labels: { 
        align: 'center', 
        x: -3, 
        y: 20, 
        formatter: function() { 
         return Highcharts.dateFormat('%b-%d', Date.parse(this.value)); 
        } 
       } 

      }, 
      yAxis: { 
       title: { 
        text: '' 
       } 
      }, 
      tooltip: { 
       enabled: true, 
       formatter: function() { 
        return '<b>'+ this.series.name +'</b><br/>'+ 
         this.x +': '+ this.y; 
       } 
      }, 
      plotOptions: { 
       line: { 
        cursor: 'pointer', 
        point: { 
         events: { 
          click: function() { 

           $('#dateDisplay').text(this.category); 

           $.getJSON("datasoil.php?dateParam="+this.category, function(json){ 

            options.xAxis.categories = json['category']; 
            options.series[0].name = json['name']; 
            options.series[0].data = json['data']; 

            options.xAxis.labels = { 
             formatter: function() { 
             //return Highcharts.dateFormat('%l%p', Date.parse(this.value +' UTC')); 
             return Highcharts.dateFormat('%l%p', Date.parse(this.value)); 
             //return this.value; 
             } 
            } 

            options = new Highcharts.Chart(options); 

            $('#back_btn').show(); 

           }); 


          } 
         } 
        }, 
        dataLabels: { 
         enabled: true 
        } 
       } 
      }, 

      series: [{ 
        type: 'line', 
        name: '', 
        data: [] 
      }] 
     } 

     $.getJSON("datasoil.php", function(json){ 
      options.xAxis.categories = json['category']; 
      options.series[0].name = json['name']; 
      options.series[0].data = json['data']; 
      chart = new Highcharts.Chart(options); 
     }); 
    } 


    function goback() { 
     init(); 
     $('#dateDisplay').text("2013-02"); 
    } 


    </script> 
    <!--[if IE]><link href="http://www.3818.com.ar/styles/fix-old-ie.css" media="all" type="text/css" rel="stylesheet"> 
<![endif]--> 
    <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--> 
    <style type="text/css"> 
     #ads-sidebar{ 
      margin-right:15px!important; 
     } 
    </style> 
</head> 

<body> 
<!--[if IE]> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script> 
    <style>.chromeFrameInstallDefaultStyle { width: 100%; border: 5px solid #ffa700; }</style><div id="prompt"></div> 
    <script>window.attachEvent("onload", function() {CFInstall.check({mode: "overlay", node: "prompt"});});</script> 
<![endif]--> 


<a class="scroll-point" id="home"></a> 

<div id="top"> 
    <nav> 
     <div class="logo clearfix"><a href="/ags/final/index.html#home"></a></div> 
     <ul id="menu"> 
      <li class="first"><a href="/ags/final/index.html#home">Home</a></li> 
      <li><a href="/ags/final/index.html#about">About</a></li> 
      <li><a href="/ags/final/index.html#contact">Contact Us</a></li> 
      <li><a href="/ags/final/index.html#freebies">Login</a></li> 
     </ul> 
     <form class="menu-dropdown hidden"> 
      <select onchange="location = this.options[this.selectedIndex].value;"> 
       <option value="/ags/final/index.html#home">Home</option> 
       <option value="/ags/final/index.html#about">About</option> 
       <option value="/ags/final/index.html#contact">Contact US</option> 
       <option value="/ags/final/index.html#freebies">Login</option> 
      </select> 
     </form> 
     <a href="#menu-footer" class="menu-btn"></a> 
    </nav> 
</div> 
<div id="top"> 
</div> 
<header> 
    <div class="wrapper"> 
     <div class="content"> 
      <hgroup> 
       <h1>Soil Sensor Readings</h1> 

      </hgroup>  

</header> 
<a class="scroll-point" id="about"></a> 

<div class="sectiongrey"> 

</div> 

<a class="scroll-point" id="freebies"></a> 
<div class="clear"></div> 

<div class="sectionteal"> 

</div> 


<a class="scroll-point" id="contact"></a> 
<div class="clear"></div> 

<div class="sectionorange"> 
<script src="http://code.highcharts.com/highcharts.js"></script> 
<script src="http://code.highcharts.com/modules/exporting.js"></script 

<section> 

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div> 

</br> 
&nbsp&nbsp&nbsp<a href=""class="button">Refresh</a> 
<a href=""class="button">Back</a> 
</br> 
</br> 
</section> 

</div> 
<div class="sectionblue"> 
<footer id="footer"> 
    <div class="wrapper"> 
     <div class="left-content"> 
      <a id="menu-footer"></a> 
      <div class="logo"><img src="img/logo.png" width="136" height="36"></div> 
      <nav class="menu-footer"> 
       <ul> 
        <li><a href="#about">About</a></li> 
        <li><a href="#freebies">Freebies</a></li> 
        <li><a href="#clients">Clients</a></li> 
        <li><a href="#contact">Contact</a></li> 
       </ul> 
      </nav> 

     </div> 
     <div class="right-content"> 
      <div class="social"> 

       <ul> 
        <li><a href="http://twitter.com/egrappler" target="_blank" rel="nofollow" class="icon-twitter"></a></li> 
        <li><a href="http://www.facebook.com/EGrappler" target="_blank" rel="nofollow" class="icon-facebook"></a></li> 
        <li><a href="https://plus.google.com/102572598506883739879" target="_blank" rel="nofollow" class="icon-google-plus"></a></li> 
        <li><a href="http://github.com/mshahbazsaleem" target="_blank" rel="nofollow" class="icon-github"></a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</footer> 
</div> 


    <script src="js/jquery.min.js" type="text/javascript"></script> 
    <script type="text/javascript" src="../wp-content/themes/piha/js/top-bar.js" ></script> 
    <script type="text/javascript" src="../wp-content/themes/piha/js/bsa-ads.js" ></script> 
    <script src="js/modernizr.custom.js" type="text/javascript"></script> 
    <script src="js/jquery.nicescroll.js" type="text/javascript"></script> 
    <script src="js/jquery.flip.js" type="text/javascript"></script> 
    <script src="js/jquery.localscroll-1.2.7.js" type="text/javascript"></script> 
    <script src="js/jquery.scrollTo-1.4.3.1.js" type="text/javascript"></script> 
    <script src="js/jquery.carouFredSel-6.2.0.js" type="text/javascript"></script> 
    <script src="js/custom.js" type="text/javascript"></script> 
    <!--Dynamically creates analytics markup--> 


</body> 

</html> 

높은 차트 데이터베이스 연결 의 ivity 코드 :

<?php 
$con = mysql_connect("localhost","root",""); 

if (!$con) { 
    die('Could not connect: ' . mysql_error()); 
} 


mysql_select_db("demo", $con); 


if (isset($_GET["dateParam"])) { 
    $sql = mysql_query("SELECT time, value FROM soil WHERE time LIKE '".$_GET["dateParam"]."%'"); 
} else { 
    $sql = mysql_query("SELECT DATE_FORMAT(time, '%Y-%m-%d') as time, AVG(value) as value FROM soil GROUP BY DATE_FORMAT(time, '%Y-%m-%d')"); 
} 
$result['name'] = 'Foot Traffic Count'; 
while($r = mysql_fetch_array($sql)) { 
    $datetime = $r['time']; 
    $result['category'][] = $datetime; 
    $result['data'][] = $r['value']; 
} 

print json_encode($result, JSON_NUMERIC_CHECK); 

mysql_close($con); 
?> 

은 어떤 하나 PLS 차트가 정확한 시간에 데이터를 표시하지 않는 이유와 무엇 무엇을 말해 줄 수는

답변

0

브라우저가 시간에 차트 시간을 보여줍니다 가능한 솔루션입니다 영역은 사용자에게 로컬 인 반면 데이터는 GMT/UTC로 간주됩니다. GMT - 6 시간이므로 차트의 시간이 6 시간 단축됩니다.

너무 많은 * .js 파일이 페이지에로드되는 방식 중 하나 때문일 수 있습니다. 모든 것을 없애고 jQuery와 Highcharts만으로 차트를 간단한 페이지에 넣고 다시 시도하십시오. 그것은 잘 작동합니다.

0

하이 차트는 타임 스탬프 (밀리 초 단위의 시간)를 사용하므로 날짜 (예 : 2014-07-03)를 타임 스탬프로 변환해야합니다. 그것을 달성하기 위해 당신은 PHP 함수를 사용하거나 자바 스크립트를 사용할 수 있습니다.

관련 문제