はじめに (対象読者・この記事でわかること)

この記事は、PHPを使ったWeb開発に携わっており、データベースに蓄積されたデータをより視覚的でインタラクティブな形で表現したいと考えている方を対象としています。特に、データの傾向分析やダッシュボード作成において、手軽に動的なグラフを実装したいと考える開発者の方に役立つ内容です。

この記事を読むことで、PHPでMySQLなどのデータベースからデータを取得し、そのデータをJSON形式に整形して出力する方法がわかります。さらに、そのJSONデータをJavaScriptで非同期に取得し、人気のあるグラフライブラリであるChart.jsを使ってWebページ上に魅力的で動的なグラフとして表示する一連の流れを習得できます。PHPの既存システムにグラフ機能を加えたい、あるいは新しいWebアプリケーションでデータ可視化を検討している方にとって、実装の第一歩となるでしょう。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。

  • PHPの基本的な文法とデータベース接続（PDO）
  • HTML/CSSの基本的な知識
  • JavaScriptの基本的な文法（特にDOM操作、fetch API、JSONの扱い）
  • MySQLなどのリレーショナルデータベースの基本的な操作とSQL文

PHPとChart.js連携の必要性とメリット

現代のWebアプリケーションにおいて、データは単に保存されているだけでなく、その価値を最大限に引き出すために「可視化」が不可欠です。例えば、ECサイトの売上推移、Webサイトのアクセスログ、IoTデバイスから収集されたセンサーデータなど、膨大なデータをただ羅列するだけでは、傾向や異常を素早く把握することは困難です。

ここで、グラフやチャートの出番です。データを視覚的に表現することで、以下のメリットが得られます。

  • 直感的な理解: 数字の羅列ではわかりにくい傾向やパターンを一目で把握できます。
  • 迅速な意思決定: 重要なデータポイントや変化を素早く察知し、的確な判断を下す手助けとなります。
  • エンゲージメントの向上: ユーザーは複雑なデータを視覚的に理解できるため、アプリケーションの利便性が向上します。

数あるグラフライブラリの中でも、Chart.jsは以下のような理由で非常に人気があります。

  • 軽量で高性能: 必要なファイルサイズが小さく、高速な描画が可能です。
  • 多様なグラフタイプ: 棒グラフ、折れ線グラフ、円グラフ、散布図など、幅広い種類のグラフに対応しています。
  • 高いカスタマイズ性: 色、フォント、アニメーションなど、細かな設定を自由に変更できます。
  • レスポンシブ対応: さまざまなデバイスサイズに合わせてグラフが自動調整されます。
  • コミュニティが活発: ドキュメントが充実しており、困ったときに情報を見つけやすいです。

そして、多くのWebシステムでバックエンド言語として利用されているPHPとChart.jsを連携させることで、既存のデータベース資産を活かしつつ、インタラクティブなデータ可視化機能を容易に実装できます。PHPでDBからデータを取得し、JSON形式でクライアントに渡し、JavaScriptでChart.jsを介して描画するという流れは、Webアプリケーションにおけるデータ可視化の標準的なアプローチの一つと言えるでしょう。

具体的な実装手順：DBデータとChart.jsの連携

ここからは、PHPでデータベースからデータを取得し、Chart.jsでグラフを描画する具体的な手順をステップバイステップで解説します。今回は、シンプルな売上データの推移を折れ線グラフで表示する例を考えます。

ステップ1: データベースの準備とサンプルデータの作成

まず、データを格納するデータベースとテーブルを準備します。ここではMySQLを使用しますが、他のRDBMSでも基本は同じです。

  1. データベースの作成 chart_dbという名前のデータベースを作成します。

    sql CREATE DATABASE chart_db DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; USE chart_db;

  2. テーブルの作成 daily_salesという名前のテーブルを作成し、日付（sale_date）と売上額（amount）を格納します。

    sql CREATE TABLE daily_sales ( id INT AUTO_INCREMENT PRIMARY KEY, sale_date DATE NOT NULL UNIQUE, amount INT NOT NULL );

  3. サンプルデータの挿入 いくつかのサンプルデータを挿入して、グラフの元となるデータを用意します。

    sql INSERT INTO daily_sales (sale_date, amount) VALUES ('2024-07-22', 15000), ('2024-07-23', 22000), ('2024-07-24', 18000), ('2024-07-25', 30000), ('2024-07-26', 25000), ('2024-07-27', 28000), ('2024-07-28', 35000);

これで、グラフ描画に必要なデータがデータベースに準備できました。

ステップ2: PHPでDBからデータを取得しJSON形式で出力

次に、PHPスクリプトを作成し、データベースからデータを取得してChart.jsが解釈できるJSON形式で出力します。get_sales_data.phpというファイル名で作成します。

Php

<?php
// CORS対策 (開発環境向け: 任意)
// 本番環境では特定のオリジンに限定するか、適切なセキュリティ対策を講じてください
header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json');

// データベース接続情報
$host = 'localhost';
$db    = 'chart_db';
$user = 'root'; // 適切なユーザー名に変更
$pass = '';     // 適切なパスワードに変更
$charset = 'utf8mb4';

$dsn = "mysql:host=$host;dbname=$db;charset=$charset";
$options = [
    PDO::ATTR_ERRMODE            => PDO::ERRMODE_EXCEPTION,
    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
    PDO::ATTR_EMULATE_PREPARES   => false,
];

$pdo = null;
try {
    $pdo = new PDO($dsn, $user, $pass, $options);
} catch (\PDOException $e) {
    // エラー発生時はログに記録し、クライアントには汎用的なメッセージを返す
    error_log("DB connection error: " . $e->getMessage());
    echo json_encode(['error' => 'Database connection failed.']);
    exit();
}

// データの取得
try {
    // sale_dateで昇順にソートして取得
    $stmt = $pdo->query("SELECT sale_date, amount FROM daily_sales ORDER BY sale_date ASC");
    $data = $stmt->fetchAll();

    // Chart.jsで扱いやすい形式にデータを整形
    $labels = []; // 日付（X軸のラベル）
    $amounts = []; // 売上額（Y軸のデータ）

    foreach ($data as $row) {
        $labels[] = date('m/d', strtotime($row['sale_date'])); // 月/日形式に変換
        $amounts[] = $row['amount'];
    }

    // Chart.jsのデータ構造に合わせた連想配列を作成
    $chartData = [
        'labels' => $labels,
        'datasets' => [
            [
                'label' => '日別売上',
                'data' => $amounts,
                'backgroundColor' => 'rgba(75, 192, 192, 0.2)',
                'borderColor' => 'rgba(75, 192, 192, 1)',
                'borderWidth' => 1,
                'tension' => 0.1 // 折れ線の滑らかさ
            ]
        ]
    ];

    // JSON形式で出力
    echo json_encode($chartData, JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT);

} catch (\PDOException $e) {
    error_log("SQL query error: " . $e->getMessage());
    echo json_encode(['error' => 'Failed to retrieve data.']);
}
?>

解説:

  • header('Access-Control-Allow-Origin: *'); は、異なるオリジンからのAjaxリクエストを許可するためのCORS設定です。開発中は便利ですが、本番環境ではセキュリティのため、具体的な許可ドメインを指定するか、同じオリジン内でアプリケーションを構築してください。
  • header('Content-Type: application/json'); は、このスクリプトが出力する内容がJSON形式であることをブラウザに伝えます。
  • PDOを使ってデータベースに接続し、daily_salesテーブルからsale_dateとamountを昇順で取得しています。
  • 取得したデータをlabels（日付）とamounts（売上額）の2つの配列に整形しています。date('m/d', strtotime($row['sale_date']))で、日付を「月/日」形式に変換しています。
  • $chartData は、Chart.jsのデータ構造に合わせた連想配列です。labelsにはX軸の項目、datasetsにはグラフのデータセット（今回は売上データ）を格納します。
  • json_encode() で、PHPの連想配列をJSON文字列に変換して出力します。JSON_UNESCAPED_UNICODEは日本語をエスケープしないオプション、JSON_PRETTY_PRINTはJSONを整形して出力するオプションで、デバッグ時に役立ちます。

ステップ3: HTMLとJavaScriptでChart.jsを組み込みグラフ描画

次に、Webページ（index.html）を作成し、Chart.jsを読み込んで先ほどPHPから出力したJSONデータを取得し、グラフとして描画します。

Html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日別売上グラフ</title>
    <!-- Chart.jsのCDNを読み込む -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f4f7f6;
            margin: 0;
        }
        .chart-container {
            width: 80%; /* グラフの幅を調整 */
            max-width: 800px; /* 最大幅を設定 */
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>
    <div class="chart-container">
        <h2>日別売上推移</h2>
        <!-- グラフを描画するcanvas要素 -->
        <canvas id="salesChart"></canvas>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', async () => {
            const ctx = document.getElementById('salesChart').getContext('2d');

            try {
                // PHPスクリプトからJSONデータを非同期で取得
                // サーバーに配置したget_sales_data.phpのURLを指定してください
                const response = await fetch('get_sales_data.php'); 

                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                const chartData = await response.json();

                // エラーチェック
                if (chartData.error) {
                    console.error("Server error:", chartData.error);
                    document.querySelector('.chart-container').innerHTML = '<p>データ取得中にエラーが発生しました。</p>';
                    return;
                }

                // Chart.jsを使ってグラフを描画
                new Chart(ctx, {
                    type: 'line', // 折れ線グラフ
                    data: chartData, // PHPから取得したデータ
                    options: {
                        responsive: true,
                        plugins: {
                            title: {
                                display: true,
                                text: '過去7日間の日別売上'
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true,
                                title: {
                                    display: true,
                                    text: '売上額 (円)'
                                }
                            },
                            x: {
                                title: {
                                    display: true,
                                    text: '日付'
                                }
                            }
                        }
                    }
                });

            } catch (error) {
                console.error("グラフデータの取得または描画に失敗しました:", error);
                document.querySelector('.chart-container').innerHTML = '<p>グラフデータの読み込みに失敗しました。</p>';
            }
        });
    </script>
</body>
</html>

解説:

  • <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> でChart.jsライブラリをCDNから読み込んでいます。
  • <canvas id="salesChart"></canvas> は、Chart.jsがグラフを描画するためのキャンバス要素です。
  • JavaScriptコードは、ページのDOMが完全に読み込まれてから実行されるようにDOMContentLoadedイベントリスナー内に記述しています。
  • fetch('get_sales_data.php') を使って、PHPスクリプトから非同期にJSONデータを取得しています。awaitキーワードを使用するため、async関数内で実行しています。
  • 取得したJSONデータ（chartData）をnew Chart()コンストラクタのdataプロパティに直接渡します。PHPスクリプトでChart.jsが期待する形式に整形済みなので、追加の加工は不要です。
  • optionsオブジェクトでは、グラフのタイトル、軸のラベル、レスポンシブ対応などの詳細な設定を行っています。

実装コード全体（get_sales_data.phpとindex.html）

これらのファイルをWebサーバー（Apache, Nginxなど）のドキュメントルートに配置し、ブラウザでindex.htmlにアクセスすると、データベースから取得したデータに基づいた日別売上グラフが表示されるはずです。

ファイル構成の例:

htdocs/ (または public_html/)
├── index.html
└── get_sales_data.php

ハマった点やエラー解決

実装中に遭遇しやすい問題と、その解決策について説明します。

JSONパースエラー

  • 症状: ブラウザのコンソールに「SyntaxError: Unexpected token '<', "...<br" is not valid JSON"」のようなエラーが表示される。
  • 原因: PHPスクリプトがJSONではない、HTMLなどの内容を出力している可能性があります。例えば、PHPの構文エラーや警告が原因で、HTML形式のエラーメッセージがJSONの前に出力されてしまうことがよくあります。
  • 解決策:
    1. get_sales_data.phpに直接アクセスし、出力が純粋なJSON形式になっているか確認します。
    2. PHPのログ（php_error.logなど）を確認し、構文エラーや実行時エラーがないか確認します。
    3. PHPスクリプトの冒頭にerror_reporting(E_ALL); ini_set('display_errors', 1); を追加し、エラーメッセージをブラウザに表示させて原因を特定します（本番環境では必ず削除）。
    4. json_encode() の第2引数にJSON_PRETTY_PRINTを追加して、整形されたJSONが出力されるようにすると、視覚的に確認しやすくなります。

CORS (Cross-Origin Resource Sharing) の問題

  • 症状: ブラウザのコンソールに「Access to fetch at 'http://example.com/get_sales_data.php' from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.」のようなエラーが表示される。
  • 原因: index.htmlとget_sales_data.phpが異なるドメイン、ポート、またはプロトコルで提供されている場合に発生します。ブラウザのセキュリティ機能により、許可されていないクロスオリジンリクエストはブロックされます。
  • 解決策:
    1. 開発環境の場合: get_sales_data.phpの冒頭にheader('Access-Control-Allow-Origin: *');を追加して、すべてのオリジンからのアクセスを許可します。
    2. 本番環境の場合: セキュリティを考慮し、header('Access-Control-Allow-Origin: https://your-domain.com');のように、許可する具体的なオリジンを指定します。
    3. 最も確実なのは、index.htmlとget_sales_data.phpを同じオリジン（同じドメイン、同じポート）で提供することです。

Chart.jsのデータ形式不一致

  • 症状: グラフが全く表示されない、またはデータが正しくプロットされない。
  • 原因: PHPから出力されたJSONデータが、Chart.jsが期待するlabelsとdatasetsの構造になっていない可能性があります。
  • 解決策:
    1. ブラウザの開発者ツールで、get_sales_data.phpへのネットワークリクエストのレスポンスを確認し、JSONの構造が期待通りになっているかチェックします。
    2. Chart.jsの公式ドキュメントで、使用するグラフタイプ（例: 折れ線グラフ）のdataプロパティの構造を再確認します。特にdatasets内のlabel、dataプロパティが正しく設定されているか確認しましょう。
    3. JavaScript側でconsole.log(chartData);として、PHPから取得したデータがJavaScript内でどのように解釈されているか確認します。

まとめ

本記事では、PHPとChart.jsを連携させて、データベースのデータをWebページ上で動的なグラフとして可視化する一連のプロセスを解説しました。

  • PHPでDBからデータを取得し、JSON形式で出力することで、サーバーサイドのデータをクライアントサイドで利用可能にしました。
  • JavaScriptのfetch APIを使って、そのJSONデータを非同期に取得することで、ページの再読み込みなしにデータを取得し、グラフを更新できる基盤を構築しました。
  • Chart.jsライブラリを利用して、取得したデータに基づきインタラクティブなグラフを描画することで、複雑なデータを視覚的に分かりやすく表現できました。

この記事を通して、PHPアプリケーションに強力なデータ可視化機能を実装する基礎が身についたことでしょう。データ駆動型の意思決定を支援するWebアプリケーション開発において、このスキルは非常に有用です。

今後は、グラフのリアルタイム更新（WebSocketなど）、複数のグラフを連携させたダッシュボードの構築、より複雑なデータ分析に基づくグラフの描画、そしてグラフのセキュリティ対策（SQLインジェクション対策など）についても記事にする予定です。

参考資料