2012-03-05 37 views
0

首先,我想說我已經看過了stackoverflow和highcharts論壇,但一直沒能找到我的問題的答案,所以我希望某種靈魂可以爲我提供一個我的工作示例問題。mysql highcharts php rtg

我試圖創建一個數據表樣條(不自動更新)由RTG創建一個MySQL數據庫(rtg.sourceforge.net)

我不是一個程序員,所以請多多包涵,對不創建乾淨/正確的代碼(這包括從其他來源複製/粘貼)。

有3和表ID(INT),DTIME(DATETIME)和計數器(BIGINT)用以下示例:

1 2012-03-05 17:49:06 16991 
2 2012-03-05 17:50:06 3774 
3 2012-03-05 17:50:06 1272 

(1,2,3是接口名稱)

我我正在試圖創建一個能夠顯示最近一小時流量的圖表。

這是我data.php的內容

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

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

mysql_select_db("rtg", $con); 

$result = mysql_query("SELECT * FROM ifInOctets_1 ORDER BY dtime DESC LIMIT 0,60"); 
    while($row = mysql_fetch_array($result)) { 
    echo $row['dtime'] . "\t" . $row['counter']. "\n"; 
} 

mysql_close($con); 
?> 

從data.php的輸出是按以下格式:

2012-03-05 20:53:31 245891 2012-03-05 20:53:31 8530 2012-03-05 20:53:31 6424577 

RTG是輪詢3倍PR分鐘,所以這個結果在180上面的sql查詢中輸出「fields」。

這是我的index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 


<title>Chart 1 Hour</title> 

<script type="text/javascript" src="js/jquery-1.7.1.min.js" ></script> 
<script type="text/javascript" src="js/highcharts.js" ></script> 
<script type="text/javascript" src="js/themes/gray.js"></script> 

<script type="text/javascript"> 
     var chart; 
         $(document).ready(function() { 
           var options = { 
             chart: { 
               renderTo: 'container', 
               defaultSeriesType: 'spline', 
               marginRight: 130, 
               marginBottom: 25 
             }, 
             credits: { 
              enabled: false 
             }, 
             title: { 
               text: 'Bits', 
               x: -20 //center 
             }, 
             subtitle: { 
               text: '', 
               x: -20 
             }, 
             xAxis: { 
               type: 'datetime', 
               tickInterval: 3600 * 1000, // one hour 
               tickWidth: 0, 
               gridLineWidth: 1, 
               labels: { 
                 align: 'center', 
                 x: -3, 
                 y: 20, 
                 formatter: function() { 
                   return Highcharts.dateFormat('%Y%m%d%H%M%S', this.value); 
                 } 
               } 
             }, 
             yAxis: { 
               title: { 
                 text: 'Bits' 
               }, 
               plotLines: [{ 
                 value: 0, 
                 width: 1, 
                 color: '#808080' 
               }] 
             }, 
             tooltip: { 
               formatter: function() { 
               return Highcharts.dateFormat('%Y%m%d%H%M%S', this.x-(1000*3600)) +'-'+ Highcharts.dateFormat('%l%p', this.x) +': <b>'+ this.y + '</b>'; 
               } 
             }, 
             legend: { 
               layout: 'vertical', 
               align: 'right', 
               verticalAlign: 'top', 
               x: -10, 
               y: 100, 
               borderWidth: 0 
             }, 
             series: [{ 
               name: 'BlaBla' 
             }] 
           } 
           // Load data asynchronously using jQuery. On success, add the data 
           // to the options and initiate the chart. 
           // This data is obtained by exporting a GA custom report to TSV. 
           // http://api.jquery.com/jQuery.get/ 
           jQuery.get('data.php', null, function(tsv) { 
             var lines = []; 
             traffic = []; 
             try { 
               // split the data return into lines and parse them 
               tsv = tsv.split(/\n/g); 
               jQuery.each(tsv, function(i, line) { 
                 line = line.split(/\t/); 
                 date = Date.parse(line[0] +' UTC'); 
                 traffic.push([ 
                   date, 
                   parseInt(line[1].replace(',', ''), 10) 
                 ]); 
               }); 
             } catch (e) { } 
             options.series[0].data = traffic; 
             chart = new Highcharts.Chart(options); 
           }); 
         }); 
</script> 
</head> 
<body> 

<div id="container" style="width: 960px; height: 250px; margin: 0 auto"></div> 

</body> 
</html> 

的內容。當我運行的代碼,它看起來像所有的數據是侷促圖表的左側。 (抱歉無法張貼的截圖,第一次用戶。)

由於highcharts需要以毫秒爲單位的日期+時間,我已經試過(其他幾個SQL SELECT語句中),以改變Highcharts.dateFormat但沒有任何運氣。

在此先感謝。

回答

0

您需要將返回日期轉換爲自紀元以來的毫秒數。

所以SELECT * FROM ifInOctets_1 ORDER BY dtime DESC LIMIT 0,60將成爲:

`SELECT UNIX_TIMESTAMP(DTIME)* 1000,對抗來自ifInOctets_1 ORDER BY DTIME DESC限制必須以毫秒值highcharts正確的時間戳0.60"

這樣預計。