DjangoでPCのパフォーマンス状態をグラフ化する

投稿日: 2024年1月29日

前回の記事「DjangoでPCのパフォーマンス状態を表示する」を少し改良してグラフ表示させる方法になります。

1.Chart.js(チャートジェイエス)とは

Chart.jsは、オープンソースのJavaScriptライブラリで、ウェブ上で美しいチャートやグラフを簡単に作成するためのものです。HTML5の<canvas>要素を使用して、さまざまなタイプのチャートを描画することができます。これにより、データを視覚的に表現することが可能になり、ユーザーが情報をより簡単に理解できるようになります。

2.グラフ化の流れ

  1. Chart.js のセットアップ:HTML テンプレートに Chart.js のライブラリを組み込みます。
  2. JavaScript での定期的なデータ更新:JavaScript を使用して、10秒ごとにサーバーからメモリ使用率のデータを取得します。
  3. Ajax を使用したデータの取得:Django ビューを作成して、Ajax リクエストに応じてメモリ使用率のデータを JSON 形式で返します。
  4. Chart.js でのデータの表示:取得したデータを Chart.js を使ってグラフとして表示します。

3.psutil のインストール

psutil ライブラリをインストールします。これは通常 pip install psutil コマンドを使用して行います。

pip install psutil

インストールが完了したらpip listで確認できます。

4.Djangoコードの追加修正

前回の記事のコードに追加修正していきます。

views.py

import psutil
from django.views.generic import TemplateView
from django.http import JsonResponse
class IndexView(TemplateView):
    template_name = 'index.html'

    def get_context_data(self, **kwargs):
        # 親クラスの get_context_data を呼び出す
        context = super().get_context_data(**kwargs)

        # CPU 使用率の取得
        context['cpu_usage'] = psutil.cpu_percent(interval=1)

        # ディスク使用率と容量の取得
        disk = psutil.disk_usage('/')
        context['disk_usage'] = disk.percent
        context['disk_total'] = disk.total
        context['disk_used'] = disk.used

        # メモリ使用率と容量の取得
        mem = psutil.virtual_memory()
        context['memory_usage'] = mem.percent
        context['memory_total'] = mem.total
        context['memory_used'] = mem.used

        return context

def get_cpu_usage(request):
    cpu_usage = psutil.cpu_percent(interval=1)
    return JsonResponse({'cpu_usage': cpu_usage})

from django.http import JsonResponse: ここではDjangoのJsonResponseクラスをインポートしています。JsonResponseは、Pythonの辞書やリストなどのデータをJSON形式でHTTPレスポンスとして返す際に使用されます。

return JsonResponse({‘cpu_usage’: cpu_usage}): 最後に、CPU使用率を含む辞書をJsonResponseオブジェクトに渡して返します。

urls.py

from django.urls import path
from . import views

app_name = 'myapp'

urlpatterns = [
    path('', views.IndexView.as_view(), name='pc_status'),
    path('get-cpu-usage/', views.get_cpu_usage, name='get-cpu-usage'),
]

次にhtmlで表示するグラフになります。

index.html

<!DOCTYPE html>
<html>
<head>
    <title>管理設定</title>
    <!-- Chart.js の読み込み -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <h1>CPU 使用率チャート</h1>
    <canvas id="cpuUsageChart"></canvas>

    <script>
        var ctx = document.getElementById('cpuUsageChart').getContext('2d');
        var cpuUsageChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: [],
                datasets: [{
                    label: 'CPU 使用率 (%)',
                    data: [],
                    borderColor: 'rgb(75, 192, 192)',
                    tension: 0.1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        setInterval(function() {
            fetch('{% url "myapp:get-cpu-usage" %}')
                .then(response => response.json())
                .then(data => {
                    var currentTime = new Date().toLocaleTimeString();
                    cpuUsageChart.data.labels.push(currentTime);
                    cpuUsageChart.data.datasets[0].data.push(data.cpu_usage);
                    cpuUsageChart.update();
                });
        }, 10000); // 10秒ごとに更新
    </script>
</body>
</html>

Chart.jsという外部JavaScriptライブラリを読み込みます。このライブラリは、データを視覚的なチャートに表示するために使用されます。

<canvas id=”cpuUsageChart”></canvas>: Chart.jsによってチャートが描画されるキャンバス要素になります。

ページがロードされると、JavaScriptが定期的（10秒ごと）にサーバーからCPU使用率を取得します。
取得したCPU使用率は、チャートにリアルタイムで表示されます。
チャートは時間とともにCPU使用率の変動をグラフィカルに示します。

5.グラフの横軸を常に同じ数にする

先ほどのchart.jsコードにデータがたまっていったら12個目のデータを削除して常に12個までを表示するように変更します。

<!DOCTYPE html>
<html>
<head>
    <title>管理設定</title>
    <!-- Chart.js の読み込み -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <h1>CPU 使用率チャート</h1>
    <p>CPU使用率: <span id="cpuUsageText">読み込み中...</span></p>
    <canvas id="cpuUsageChart"></canvas>

    <script>
        var ctx = document.getElementById('cpuUsageChart').getContext('2d');
        var cpuUsageChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: [],
                datasets: [{
                    label: 'CPU 使用率 (%)',
                    data: [],
                    borderColor: 'rgb(75, 192, 192)',
                    tension: 0.1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        setInterval(function() {
            fetch('{% url "myapp:get-cpu-usage" %}')
                .then(response => response.json())
                .then(data => {
                    var currentTime = new Date().toLocaleTimeString();
                    var cpuUsage = data.cpu_usage;

                    // チャートに新しいデータを追加
                    cpuUsageChart.data.labels.push(currentTime);
                    cpuUsageChart.data.datasets[0].data.push(cpuUsage);

                    // データポイントが12個を超えたら、最初のポイントを削除
                    if (cpuUsageChart.data.labels.length > 12) {
                        cpuUsageChart.data.labels.shift();
                        cpuUsageChart.data.datasets[0].data.shift();
                    }

                    // チャートを更新
                    cpuUsageChart.update();

                    // CPU 使用率のテキストを更新
                    document.getElementById('cpuUsageText').textContent = cpuUsage + '%';
                });
        }, 10000); // 10秒ごとに更新
    </script>
</body>
</html>

結果

以上になります。メモリやストレージの容量なども同じような方法でグラフ化できます。

■.ダウンロードサービスのご案内

本記事で使用しているサンプルコードです。

django_sample-02-03ダウンロード

注意：本記事の内容に関して運用した結果の影響については責任を負いかねます。あらかじめご了承ください。

記事