読み込み中...

PHPで始める！5ステップで作るリアルタイム棒グラフ自動生成ガイド

PHPを使ったリアルタイム棒グラフ自動生成のプロセスを図解したイメージ PHP
2023.06.01
この記事は約12分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

データ可視化は、情報を一目で理解しやすくするための重要なツールです。

特に、リアルタイムで変化するデータを追跡する場合、その重要性は一層増します。

この記事を読むことで、PHPを使用したリアルタイムで自動更新する棒グラフの生成方法を学ぶことができます。

具体的な5つのステップとそれに対応する詳細なサンプルコードを通じて、プログラミングの基礎から応用までを身につけることが可能です。

●PHPとは

PHPは、Web開発で広く利用されているサーバーサイドのスクリプト言語です。

PHPはHTML内に直接埋め込むことができ、データベースと連携する能力を持っているため、動的なWebページの生成に最適です。

○PHPの基本

PHPの基本的な構文は、他のC言語系のプログラミング言語と似ています。

変数はドル記号($)で始まり、命令文はセミコロン(;)で終わります。

また、PHPはスクリプト言語のため、コンパイルせずに直接実行することができます。

PHPのコードは、<?php と ?> の間に書きます。

これにより、PHPコードとHTMLコードを1つのファイル内で混在させることが可能になります。

●リアルタイム棒グラフとは

リアルタイム棒グラフは、時系列データを棒の形で表示し、その長さで数値を表現するグラフです。

そして、リアルタイムでデータが更新されると、グラフもその変化を反映します。

○棒グラフの利点

棒グラフは、異なるカテゴリー間での比較がしやすいという利点があります。

それぞれの棒は特定のカテゴリーを表し、その高さ（または長さ）はそのカテゴリーの数値を表します。

これにより、各カテゴリー間での比較が一目瞭然となります。

○リアルタイム表示の重要性

リアルタイム表示は、情報がすぐに更新される状況において重要となります。

例えば、株価や気温など、リアルタイムで変化するデータを扱う場合には、リアルタイム表示が有効です。

これにより、ユーザーは最新の情報を常に得ることができます。

●PHPでリアルタイム棒グラフを作る5つのステップ

PHPを用いてリアルタイム棒グラフを作成するための5つのステップについて詳しく解説します。

このステップを理解すれば、PHPを使用して自分自身のデータを視覚化する強力なツールを手に入れることができます。

○ステップ1：PHPの環境設定

まず、PHPを実行するための環境をセットアップする必要があります。

ローカルマシンにXAMPPやMAMPなどのソフトウェアをインストールすることで、PHPの環境を構築することができます。

XAMPPの場合、公式ウェブサイトからダウンロードし、インストーラに従ってインストールします。

インストールが完了したら、「Apache」と「MySQL」を起動し、PHPの環境が利用可能になります。

○ステップ2：データベースの準備

次に、データベースを準備します。

今回はMySQLを使用し、PHPからアクセスできるようにします。

□サンプルコード1：データベースの作成

このコードでは、PHPのmysqli拡張機能を使用してMySQLデータベースに接続し、データベースを作成しています。

この例では、まず$servername, $username, $password変数を設定してデータベースに接続します。

次に、SQL文を使ってデータベースを作成します。作成が成功したかどうかを確認し、最後に接続を閉じます。

<?php
$servername = "localhost";
$username = "username";
$password = "password";

$conn = new mysqli($servername, $username, $password);

if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$sql = "CREATE DATABASE myDatabase";
if ($conn->query($sql) === TRUE) {
    echo "Database created successfully";
} else {
    echo "Error creating database: " . $conn->error;
}

$conn->close();
?>

○ステップ3：データの取得と更新

データベースが準備できたら、次はデータの取得と更新を行います。

PHPのmysqli拡張機能を使ってデータベースからデータを取得し、必要に応じて更新します。

□サンプルコード2：データの取得と更新

このコードでは、先程作成したデータベースに接続し、特定のテーブルからデータを取得しています。

この例では、SELECT文を使ってデータを取得し、その結果を表示しています。

<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDatabase";

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$sql = "SELECT id, value FROM myTable";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        echo "id: " . $row["id"]. " - Value: " . $row["value"]. "<br>";
    }
} else {
    echo "0 results";
}
$conn->close();
?>

○ステップ4：データの可視化

データの取得と更新ができたら、次はそのデータを棒グラフとして可視化します。

ここでは、JavaScriptのライブラリであるChart.jsを使用します。

□サンプルコード3：グラフ化のコード

このコードでは、Chart.jsを使用して棒グラフを生成しています。

この例では、色々な色の棒で表現された6つの項目を棒グラフで表示しています。

<!DOCTYPE html>
<html>
<head>
    <title>Bar Chart</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});
</script>
</body>
</html>

○ステップ5：自動更新の設定

最後に、自動更新の設定を行います。

これにより、データがリアルタイムに変わると棒グラフも自動的に更新されるようになります。

□サンプルコード4：自動更新の設定

このコードでは、JavaScriptのsetInterval関数を使用して5秒ごとに棒グラフのデータを更新しています。

この例では、各バーの値をランダムに変更し、その後でチャートを更新しています。

setInterval(function(){
    myChart.data.datasets[0].data = [Math.random() * 50, Math.random() * 50, Math.random() * 50, Math.random() * 50, Math.random() * 50, Math.random() * 50];
    myChart.update();
}, 5000);

●PHPでリアルタイム棒グラフを作る際の注意点

以上のステップを踏むことで、PHPでリアルタイム棒グラフを作成することが可能となりますが、次の点に注意するようにしてください。

  1. データベースへの接続情報（ホスト名、ユーザ名、パスワードなど）は安全に保管し、漏洩しないように注意してください。
  2. 自動更新の頻度はサーバの負荷とデータの変更頻度に応じて適切に設定してください。
  3. Chart.jsのバージョンによっては、オプションの設定方法が異なる場合があるため、公式ドキュメントを参照して最新の情報を確認してください。

●応用例とサンプルコード

以上で、基本的なリアルタイム棒グラフの作成は完成です。しかし、より高度な利用シーンを想定すると、さらなる応用が考えられます。

○応用例1：異なるデータセットでのグラフ生成

データベースに複数のデータセットが存在する場合、それぞれを別々の棒グラフとして表示することが可能です。

□サンプルコード5：異なるデータセットでのグラフ生成

var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [
            {
                label: '# of Votes',
                data: [12, 19, 3, 5, 2, 3],
                //backgroundColor, borderColor, borderWidth settings
            },
            {
                label: '# of Another Votes',
                data: [5, 2, 10, 8, 6, 4],
                //backgroundColor, borderColor, borderWidth settings
            }
        ]
    },
});

○応用例2：データに応じた動的なラベル生成

データベースから取得したデータに基づいて、ラベルを動的に生成することも可能です。

□サンプルコード6：動的なラベル生成

var myLabels = [];
var myData = [];

fetchedData.forEach(function(item) {
    myLabels.push(item.label);
    myData.push(item.data);
});

var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: myLabels,
        datasets: [{
            label: '# of Votes',
            data: myData,
        }]
    },
    //options setting
});

これらの応用例を参考に、PHPとChart.jsを使用して、独自のリアルタイム棒グラフを作成してみてください。

まとめ

本記事では、PHPとChart.jsを使ってリアルタイムの棒グラフを作成する方法について解説しました。

それぞれのステップには具体的なサンプルコードを添えて説明し、各コードの動作や役割についても詳細に解説しました。

また、注意点としてデータベース接続情報の安全性、自動更新の頻度、Chart.jsのバージョンによる設定方法の違いを指摘しました。

そして、基本的なリアルタイム棒グラフ作成に止まらず、さらなる応用例として、異なるデータセットでのグラフ生成や、データに応じた動的なラベル生成といったテクニックを紹介しました。

これらの情報をもとに、PHPを使ったリアルタイム棒グラフの作成に挑戦してみてください。

プログラミング初心者の方から経験者の方まで、本ガイドがより深い理解と実践の一助となることを期待しています。

最後になりますが、本記事が”PHPで始める！5ステップで作るリアルタイム棒グラフ自動生成ガイド”というテーマにおいて、PHPを用いたグラフ生成のエキサイティングな世界への扉を開く一助となれば幸いです。

今後とも、初心者から上級者まで役立つコーディングの情報を提供して参りますので、どうぞご期待ください。