初心者が瞬時に理解できる！PHPでMySQLデータをグラフ化する5つの手順

はじめに
●PHPとMySQLとは
●PHPとMySQLを使ってグラフを描くための準備
●PHPとMySQLを使ってグラフを作成する手順
●PHPとMySQLを使ってグラフを作成する際の注意点と対処法
●グラフ作成のカスタマイズ方法
まとめ

はじめに

この記事を読めば、PHPとMySQLを使ってデータをグラフ化することができるようになります。

初心者でも理解できるように、具体的な手順とサンプルコードを用いて説明します。

そして、グラフ化の際には注意点と対処法、またカスタマイズ方法についても触れていきます。

●PHPとMySQLとは

PHPは、Web開発に広く使用されるサーバーサイドのプログラミング言語です。

MySQLは、世界中で使われているリレーショナルデータベース管理システム(RDBMS)の一つです。

PHPとMySQLを組み合わせることで、Webサイトで動的なコンテンツの生成やデータの管理などを行うことが可能になります。

●PHPとMySQLを使ってグラフを描くための準備

まずはPHPとMySQLを使ってグラフを描くための環境を整える必要があります。

PHPの環境構築、MySQLのインストールと設定、そしてPHPからMySQLに接続できるようにするところから始めましょう。

この記事では、既にPHPとMySQLがインストールされ、適切に設定されていることを前提としています。

●PHPとMySQLを使ってグラフを作成する手順

では、具体的な手順に移りましょう。

PHPとMySQLを使ってグラフを作成するための主な手順は以下の5つです。

○手順1：MySQLからデータを取得する

最初のステップは、MySQLから必要なデータを取得することです。

ここではPHPのPDO（PHP Data Objects）を使ってデータベースからデータを取得する方法を紹介します。

○サンプルコード1：MySQLからデータを取得するコード

このサンプルコードでは、まずPDOを用いてMySQLに接続しています。

次にSQL文を作成し、それを実行しています。最後にfetchAllメソッドを使用して、結果を全て取得しています。

<?php
// MySQLに接続
$pdo = new PDO('mysql:host=localhost;dbname=データベース名', 'ユーザー名', 'パスワード');

// SQL文を作成
$sql = 'SELECT * FROM テーブル名';

// SQL文を実行
$stmt = $pdo->query($sql);

// データを取得
$data = $stmt->fetchAll();
?>

○手順2：取得したデータをPHPで処理する

次に、取得したデータをPHPで処理します。

ここではデータを加工して、グラフに適用可能な形式に変換します。

○サンプルコード2：PHPでデータを処理するコード

このサンプルコードでは、取得したデータをforeachループで一つずつ処理しています。

各行のデータを新しい配列の要素として追加し、その配列をグラフに適用可能な形式に変換しています。

<?php
// データを処理
$results = [];
foreach ($data as $row) {
    $results[] = [
        'label' => $row['列名1'],
        'value' => $row['列名2'],
    ];
}
?>

○手順3：データをグラフに適用する

データの取得と処理が完了したら、そのデータをグラフに適用します。

ここではGoogle Chartsを使った例を示します。

○サンプルコード3：データをグラフに適用するコード

このサンプルコードでは、まずGoogle Chartsのスクリプトをロードしています。

次に、データをGoogle Chartsに適用するためのJavaScriptを出力しています。

その中で、先程PHPで処理したデータをJSON形式に変換し、Google Chartsが理解できる形式にしています。

<?php
// Google Chartsをロード
echo '<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>';

// グラフ用のデータを設定
echo '<script type="text/javascript">
google.charts.load("current", {"packages":["corechart"]});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
    var data = google.visualization.arrayToDataTable(' . json_encode($results, JSON_NUMERIC_CHECK) . ');

    var options = {
        title: "グラフのタイトル",
        legend: { position: "bottom" },
    };

    var chart = new google.visualization.PieChart(document.getElementById("piechart"));
    chart.draw(data, options);
}
</script>';
?>

○手順4：グラフをカスタマイズする

作成したグラフをカスタマイズする手順を紹介します。

Google Chartsにはさまざまなオプションがあり、それらを利用してグラフの見た目を調整することが可能です。

○サンプルコード4：グラフのカスタマイズコード

このサンプルコードでは、グラフのタイトル、3D表示の有無、そしてグラフの幅と高さを指定するなど、グラフのオプションをカスタマイズしています。

オプションは数多くありますので、詳しくはGoogle Chartsの公式ドキュメンテーションをご覧ください。

<?php
echo '<script type="text/javascript">
// グラフのオプションをカスタマイズ
var options = {
    title: "カスタマイズしたグラフのタイトル",
    is3D: true,
    width: 800,
    height: 600,
};

var chart = new google.visualization.PieChart(document.getElementById("piechart"));
chart.draw(data, options);
</script>';
?>