2013-02-20 61 views
0

我有一個AJAX函數調用數據庫中的記錄列表。然後,我試圖使用jqPlot以x軸爲記錄的時間戳並且y軸爲心率(小時)來顯示錶上的某些行。AJAX調用jqPlot沒有正確顯示軸

到jqPlot函數調用在AJAX調用的successs做出如下:

success: function(data) { 
       if(data.moves) { 
        $('#records').html(''); 
        var html = ""; 
        var dataarray = []; 
        html += "<table>"; 
        $.each(data.moves, function(k, v) { 
         dataarray.push([v.timestamp, v.hr]); 
         html += "<tr>"; 
         html += "<td>" + v.hr + "</td>"; 
         html += "<td>" + v.time + "</td>"; 
         html += "<td>" + v.title + "</td>"; 
         html += "<td>" + v.zone + "</td>"; 
         html += "</tr>"; 
        }); 
        html += "</table>"; 
        $('.records').html(html); 
        var plot1 = $.jqplot('records', [dataarray], { 
         title: 'Heart Rate for this move', 
         axesDefaults: { 
          min: 0, 
          max: 200 
         }, 
         axes: { 
          xaxis: { 
           label: "Time", 
           pad: 0, 
           renderer: $.jqplot.DateAxisRenderer, 
           tickRenderer: $.jqplot.CanvasAxisTickRenderer, 
           tickOptions: { 
            formatString: '%H:%M', 
            angle: -45 
           } 
          }, 
          yaxis: { 
           label: "Heart Rate" 
          } 
         } 
        }); 
       } 
      } 

正如你看到的我是循環通過在數據變量返回的每個記錄和填充數組用'hr(心率)'和'time(datestamp)'字段來調用jqPlot使用的'dataarray'。

這裏是JSON數組從AJAX調用返回:

$moves = $this->myzone_model->getUsersMoves($options); 
      $moves_arr = array(); 
      foreach($moves as $move) { 
       $timestamp = strtotime($move['time']); 
       $moves_arr[] = array(
        'myzone_user_hr_records_id' => $move['myzone_user_hr_records_id'], 
        'GUID'      => $move['GUID'], 
        'hr'      => $move['hr'], 
        'time'      => $move['time'], 
        'timestamp'     => $timestamp, 
        'title'      => $move['title'], 
        'maxHR'      => $move['maxHR'], 
        'zone'      => $move['zone'] 
       ); 
      } 
      $json = array('moves' => $moves_arr); 

可惜,這似乎並沒有被工作,我是個不知道爲什麼。這就是我得到:

enter image description here

正如你所看到的情節沒有出現,而x軸顯示不正確的時間範圍內。 我以前沒有真正使用jqPlot,所以似乎無法調試這個。有誰知道我要去哪裏? 謝謝

+0

有幾個問題:1-您是否使用示例數據測試了這個問題,2-是否從查詢中獲得了一些真正的JSON數據,即[[dataarray]中是什麼? – Raad 2013-02-20 15:48:35

+0

嗨,我試着用示例數據,我得到一個問題,每次打勾時間都會重複。以下是dataarray = [[1353438096,「64」],[1353438106,「66」],[1353438116,「71」],[1353438492,「60」],[1353438502,「66」]中的數據示例] – devoncrazylegs 2013-02-20 15:59:43

+0

在jfiddle上進行實驗後,我發現這是一個在我的時間戳結尾缺少三個尾隨零的問題。爲什麼會發生這種情況? – devoncrazylegs 2013-02-20 16:03:03

回答

0

好吧我設法得到這個排序感謝一些建議,檢查dataarray數組的輸出。 基本上,UNIX時間戳以秒爲單位工作,JavaScript時間戳以毫秒爲單位,所以我需要將我的時間戳從UNIX時間戳轉換爲Javascript,以便正確讀取日期。 希望這可以幫助別人!