PHP、MySQL、JSON を使用して Google チャート (円、棒、縦棒、表) を生成する方法

PHP MySQL Google Chart JSON - 完全な例

MySQL テーブル データをデータ ソースとして使用して Google Chart を生成する例をたくさん見つけました。数日間検索したところ、PHP と MySQL を使用して Google チャート (円グラフ、棒グラフ、棒グラフ、表) を生成する例がインターネット上にほとんどないことがわかりました。ついに動作する例を見つけました。

これまでStackOverflowには大変お世話になったので、今回は恩返ししたいと思います。

例は 2 つあります。1 つは Ajax を使用したもの、もう 1 つは使用しないものです。今日は、Ajax 以外の例のみを示します。

使用法:

• 要件: PHP、Apache、MySQL

• インストール:

  • phpMyAdmin を使用してデータベースを作成し、「chart」という名前を付けます
  • phpMyAdmin を使用してテーブルを作成し、「googlechart」という名前を付けます。列を 2 つ使用したため、列が 2 つだけであることを確認します。ただし、さらに多くの列を使用する場合は、指示に従ってコードに若干の変更を加えることができます。
  • 次のように列名を指定します: "weekly_task" と "percentage"
  • テーブル 一部のデータでは、フィールド "_percentage_" に数値のみを使用できます

PHP-MySQL-JSON-Google チャートの例:

<?php $con=mysql_connect("localhost","Username","Password") or die("Failed to connect with database!!!!");
mysql_select_db("資料庫名稱", $con); 
// Google Chart 表格包含兩個欄位，分別是 weekly_task 和 percentage
// 這個範例將顯示一個圓餅圖，如果你需要其他的圖表例如長條圖，你必須對程式碼做一些微幅的調整，才能與長條圖或其他圖表搭配
$sth = mysql_query("SELECT * FROM chart");

/*
---------------------------
範例資料：表格 (Chart)
--------------------------
weekly_task     percentage
Sleep           30
Watching Movie  40
work            44
*/

// flag 不需要
$flag = true;
$table = array();
$table['cols'] = array(

    // 圖表的標籤，代表欄位標題
    // 注意，一個欄位使用 "string" 格式，另一個使用 "number" 格式，因為圓餅圖只使用 "數字" 來計算百分比，字串則用於欄位標題
    array('label' => 'Weekly Task', 'type' => 'string'),
    array('label' => 'Percentage', 'type' => 'number')

);

$rows = array();
while($r = mysql_fetch_assoc($sth)) {
    $temp = array();
    // 下列程式碼用於分割圓餅圖
    $temp[] = array('v' => (string) $r['Weekly_task']); 

    // 每一個分塊的值
    $temp[] = array('v' => (int) $r['percentage']); 
    $rows[] = array('c' => $temp);
}

$table['rows'] = $rows;
$jsonTable = json_encode($table);
//echo $jsonTable;
?>


  
    <!--載入 Ajax API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript">

    // 載入視覺化 API 及圓餅圖套件。
    google.load('visualization', '1', {'packages':['corechart']});

    // 設定一個 callback 在 Google Visualization API 載入時執行。
    google.setOnLoadCallback(drawChart);

    function drawChart() {

      // 從伺服器載入的 JSON 資料中，建立我們的資料表格。
      var data = new google.visualization.DataTable(<?=$jsonTable?>);
      var options = {
           title: '我的每週計畫',
          is3D: 'true',
          width: 800,
          height: 600
        };
      // 使用部分選項，實例化並繪製我們的圖表。
      // 別忘了檢查你的 div ID
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
    </script>
  

  
    <!--這是會放置圓餅圖的 div-->
    <div>
<p><strong>PHP-PDO-JSON-MySQL-Google チャートの例: </strong></p>
<pre class="brush:php;toolbar:false"><?php /*
    指令碼  : PHP-PDO-JSON-mysql-googlechart
    作者  : Enam Hossain
    版本 : 1.0

    */

    /*
    --------------------------------------------------------------------
    使用方式：
    --------------------------------------------------------------------

    需求：PHP、Apache 及 MySQL

    安裝：
      --- 使用 phpMyAdmin 建立一個資料庫，並將其命名為 "chart"
      --- 使用 phpMyAdmin 建立一個表格，並將其命名為 "googlechart"，並確保它只有兩欄，因為我使用了兩欄。不過，如果你想用更多欄，也可以按照指示對程式碼做些微的修改
      --- 指定欄位名稱如下："weekly_task" 和 "percentage"
      --- 在表格中插入一些資料
      --- _percentage_ 欄位只能使用數字

          ---------------------------------
          範例資料：表格 (googlechart)
          ---------------------------------

          weekly_task     percentage
          -----------     ----------

          Sleep           30
          Watching Movie  10
          job             40
          Exercise        20     


    */

    /* 資料庫名稱 */
    $dbname = 'chart';

    /* 資料庫使用者名稱與密碼 */
    $username = 'root';
    $password = '123456';

    try {
      /* 建立資料庫連線 */
      $conn = new PDO("mysql:host=localhost;dbname=$dbname", $username, $password);
      $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

      /* 從 googlechart 表格中選出所有 weekly tasks */
      $result = $conn->query('SELECT * FROM googlechart');

      /*
          ---------------------------
          範例資料：表格 (googlechart)
          --------------------------
          weekly_task     percentage
          Sleep           30
          Watching Movie  10
          job             40
          Exercise        20       
      */



      $rows = array();
      $table = array();
      $table['cols'] = array(

        // 圖表的標籤，代表欄位標題。
        /* 
            注意，一個欄位使用 "string" 格式，另一個使用 "number" 格式，因為圓餅圖只使用 "數字" 來計算百分比，字串則用於分塊標題
        */

        array('label' => 'Weekly Task', 'type' => 'string'),
        array('label' => 'Percentage', 'type' => 'number')

    );
        /* 抽取 $result 中的資訊 */
        foreach($result as $r) {

          $temp = array();

          // 下列程式碼用於分割圓餅圖

          $temp[] = array('v' => (string) $r['weekly_task']); 

          // 每一個分塊的值

          $temp[] = array('v' => (int) $r['percentage']); 
          $rows[] = array('c' => $temp);
        }

    $table['rows'] = $rows;

    // 將資料轉換成 JSON 格式
    $jsonTable = json_encode($table);
    //echo $jsonTable;
    } catch(PDOException $e) {
        echo '錯誤：' . $e->getMessage();
    }

    ?>


    
      
        <!--載入 Ajax API-->
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript">

        // 載入視覺化 API 及圓餅圖套件。
        google.load('visualization', '1', {'packages':['corechart']});

        // 設定一個 callback 在 Google Visualization API 載入時執行。
        google.setOnLoadCallback(drawChart);

        function drawChart() {

          // 從伺服器載入的 JSON 資料中，建立我們的資料表格。
          var data = new google.visualization.DataTable(<?=$jsonTable?>);
          var options = {
               title: '我的每週計畫',
              is3D: 'true',
              width: 800,</script>