2013-12-08 160 views
2

我想將學生的考試成績表示爲學生主管的圖表。 所以我會獲取數據庫信息(這是學生的結果,並用圖形方式向主管表示,以注意到學生的進步)如何以圖形方式表示我的數據庫(mysql phpmyadmin)

我一直在尋找一種方法來表示,通過php編碼或js​​,但我不能。 我發現一個非常好的方式繪製的圖表,但它只接受JSON表谷歌API ...

謝謝

回答

1

只需使用在phpMyAdmin導出功能(here你可以找到哪些格式都支持)。選擇頁面頂部(您要導出的表格)的EXPORT按鈕,然後將格式從SQL更改爲JSON。

如果你想自動導出數據(不要標記phpmyadmin),你應該從數據庫中提取它們,然後以json格式(json_encode())對它們進行編碼。然後,將它們帶到Google API並檢索圖表。

+0

你的意思是每次我謹代表數據時,我應該將其導出!我想動態地表示圖表,我會試試這個,謝謝 – Aisha

1

如果您正在使用PHP後端,您可以查詢數據庫以獲取結果集並將結果集放入Google Visualization API可以理解的格式,然後基於該格式繪製圖表。有沒有必要在每次需要繪製圖表時導出數據:

<?php 
$username = 'mysqlusername'; 
$password = 'password'; 
$databasename = 'school'; 
try { 
    $db = new PDO("mysql:dbname=$databasename", $username, $password); 
} 
catch (PDOException $e) { 
    die ($e->getMessage()); 
} 
$query = $db-> prepare('SELECT student, grade FROM myClass WHERE year = :year AND semester = :semester'); 
// 'year' and 'semester' here get substituted into the query for ':year' and ':semester' respectively 
// this is a secure way of passing in parameters to the query so that a malicious user cannot use SQL injection to penetrate your security 
$query->execute(array('year' => 2013, 'semester' => 1)); 
$results = $query->fetchAll(PDO::FETCH_ASSOC); 

$data = array(
    // create whatever columns are necessary for your charts here 
    'cols' => array(
     array('type' => 'string', 'label' => 'Student Name'), 
     array('type' => 'number', 'label' => 'Grade') 
    ) 
    'rows' => array() 
); 

foreach ($results as $row) { 
    // 'student' and 'grade' here refer to the column names in the SQL query 
    $data['rows'][] = array('c' => array(
     array('v' => $row['student']), 
     array('v' => $row['grade']) 
    }); 
} 
?> 
<!DOCTYPE html> 
<html> 
    <head> 
     <script type="text/javascript" src="http://www.google.com/jsapi"></script> 
     <script type="text/javascript"> 
      function drawChart() { 
       var data = new google.visualization.DataTable(<?php echo json_encode($data, JSON_NUMERIC_CHECK); ?>); 
       var chart = new google.visualization.ColumnChart(document.querySelector('#chart_div')); 
       chart.draw(data, { 
        height: 400, 
        width: 600 
       }); 
      } 
      google.load('visualization', '1', {packages:['corechart'], callback: drawChart}); 
     </script> 
    </head> 
    <body> 
     <div id="chart_div"></div> 
    </body> 
</html> 
相關問題