2015-11-18 104 views
2

我有一張圖表,顯示每天員工的時間和時間。我從數據庫中提取數據,並且一切正常。但現在這些列在圖表中顯示的數據不正確。我無法弄清楚爲什麼會這樣。有人可以幫助我嗎?Highcharts數據顯示不正確

This is my chart. The column is always full no matter what value is set.

This is the data that is coming from the json file.

function InitHighChart() 
{ 
    $("#chart").html("Wait, Loading graph..."); 

    var options = { 
      chart: { 
      type: 'column', 
      renderTo: 'chart', 
      zoomType: 'xy', 
      backgroundColor:'transparent' 
     }, 
     credits: { 
      enabled: false 
     }, 
     title: { 
      text: '<?php echo $name; ?>\'s Attendence', 
      x: -20 
     }, 
     xAxis: { 
      type: 'datetime', 
      categories: [{}], 
      labels: { 
       rotation: -20, 
      }   
     }, 
     yAxis: { 

      type: 'datetime', 
      plotBands: [{ 
       from: 1447747200000, 
       to: 1447779600000, 
       color: 'rgba(68, 170, 213, 0.1)', 
       zIndex: 5, 
       label: { 
        text: 'Office Timing', 
        style: { 
         color: '#606060' 
        } 
       } 
      }], 
      plotLines: [{ 
        //value: $inavg, 
        color: 'green', 
        dashStyle: 'shortdash', 
        width: 2, 
        label: { 
         text: 'Average Time In' 
        }, 
        zIndex: 5 
       }, { 
        //value: $outavg, 
        color: 'red', 
        dashStyle: 'shortdash', 
        width: 2, 
        label: { 
         text: 'Average Time Out' 
        }, 
        zIndex: 5 
       }], 

     dateTimeLabelFormats: { 

      minute: '%l:%M %p', 
      hour: '%l:%M %p' 

     }, 
     min: 1447729200000, 
      max: 1447797600000, 
     tickInterval: 1000, 
       title: { 
        text: 'Time' 
       } 
      }, 
     tooltip: { 
      formatter: function() { 
       var s = '<b>'+ this.x +'</b>'; 

       $.each(this.points, function(i, point) { 
        s += '<br/>'+ point.series.name + ': ' + Highcharts.dateFormat('%l:%M %p', point.y) 
       }); 

       return s; 
      }, 
      shared: true 
     }, 
     series: [{},{}] 
    }; 

    $.ajax({ 
     url: "json.php?id=<?php echo $_GET['id']; ?>", 
     type:'post', 
     dataType: "json", 
     success: function(data){ 
      options.xAxis.categories = data.categories; 
      options.yAxis.plotLines[0].value = data.inavg; 
      options.yAxis.plotLines[1].value = data.outavg; 
      options.series[0].name = 'Time In'; 
      options.series[0].data = data.timein; 
      options.series[1].name = 'Time Out'; 
      options.series[1].data = data.timeout; 
      console.log(options); 
      var chart = new Highcharts.Chart(options);   
     } 
    }); 
} 





<?php 
require_once("session.php"); 
require_once("connection.php"); 
$id= $_GET['id']; 
$query= "SELECT * "; 
$query.= "FROM attendence "; 
$query.= "WHERE emp_id = {$id}"; 
$result=mysqli_query($conn,$query); 
if(!$result){ 
echo ("Database query failed. ".mysqli_connect_error()); 
} 
$categories=array(); 
$timein=array(); 
$timeout=array(); 
$avrgi=""; 
$avrgo=""; 
$count=0; 
while($row = mysqli_fetch_assoc($result)){ 
$categories[]= $row['date']; 
$itime=$row['time_in']; 
$split=str_split($itime, 11); 
$timei=end($split); 
$timein[]= strtotime($timei)*1000; 
$otime=$row['time_out']; 
$osplit=str_split($otime, 11); 
$timeo=end($osplit); 
$timeout[]= strtotime($timeo)*1000; 
$avrgi+=strtotime($timei)*1000; 
$avrgo+=strtotime($timeo)*1000; 
$count++; 
} 
$inavg= $avrgi/$count; 
$outavg= $avrgo/$count;  

$graph_data=array('categories'=>$categories,'timein'=>$timein, 
'timeout'=>$timeou t,'inavg'=>$inavg,'outavg'=>$outavg); 
echo json_encode($graph_data); 
exit; 
?> 
+0

在開始時,我建議您按x升序對數據進行排序,這是Highcharts的要求。然後讓我知道問題是否仍然存在。 –

回答

0

,而能夠看到圖表生活,我猜您要發送的數據是超出你的軸最大值。

如果上面的代碼中的數據和鏈接圖像中的數據都是準確的,那的確是這樣。所以酒吧延伸到劇情區域的盡頭。

您正在根據第一個日期設置軸上的最小值和最大值,然後將數據數據發送到各個日期的系列。無法正常工作...

如果要針對時間軸繪製多個日期,則需要處理和抽取數據,例如秒數,而不是使用時間戳。

+0

但是當我註釋出最大值和最小值時,也無法工作。我不知道爲什麼,但即使有最小值和最大值,所有工作都很順利,購物車在劇情區域顯示了準確的時間,但出錯了。這是我用來從數據庫中提取數據的php腳本 –

+0

哦,它的工作。當我縮放到值時,它顯示正確的值。 bt如何合成yAxis,以便始終顯示繪圖區域中的值? –