【JavaScript入門(トラフィックグラフ作成)】ネットワークエンジニアのプログラミング

【JavaScript入門(トラフィックグラフ作成)】ネットワークエンジニアのプログラミング

SNMPで取得したネットワーク機器のトラフィック情報をもとに、JavaScriptを利用してトラフィックグラフを表示するツールを作成します。

トラフィック情報の取得方法については、下記を参照してください。

プラグラミング学習サイト・スクール情報

簡単なツール作成であれば、独学でも十分にプログラミングが可能になると思います。短期間で体系的に学習するのであれば、「有料学習サイト」や「オンラインスクール」の利用をおすすめします。

どちらのサイトも無料で学習可能な範囲があります。有料コンテンツに関しては、月額1000円程度です。

目次

目標作成物

ブラウザ上でCSVファイルを読み込み、トラフィックグラフを表示します。

初期画面

ツールの初期画面

CSVファイルの読み込み後

トラフィックグラフ の表示画面

以下の機能を持たせています。

  • CSVファイルの読み込み
    • ファイル選択ダイアログを開き、CSVファイルを指定します。
  • 表示する期間の指定
    • 表示対象の期間を指定します。
  • グラフの上限値の変更(100Mbps〜1Kbps)
    • デフォルトで上限100Mbpsとして、1Kbpsまで調整可能とします。

作成準備

利用する技術

今回利用する技術は下記の通りです。

  • HTML
    • Webページを作成するための言語
  • CSS
    • Webページの見た目を整える
  • JavaScript
    • Webブラウザ上で動作するプログラミング言語
  • Bootstrap
    • Webアプリケーション用のフレームワーク
  • Chart.js
    • JavaScriptでグラフを描くライブラリ

トラフィック情報(CSVデータ)

「日付」「時刻」「Input(総送信Byte数)」「Output(総受信Byte数)」をカラム区切りで記載したCSVファイルを読み込みます。データは、1分毎に取得しています。

date,time,In,Out
2022/8/18,17:59:00,1113152536,1113073622
2022/8/18,18:00:00,1235056092,1164996546
2022/8/18,18:01:00,1535296858,1225215608
・・・
・・・

今回利用するデータの全量は下記です。

トラフィック情報の取得方法は、下記を参照してください。

プログラムの全体像

プログラムの完成形は下記です。「index.html(HTMLファイル)」と「main.js(JavaScriptコード)」の2ファイルを用意して、「index.html」をブラウザで開けば動作します。

JavaScriptのコードに関しては、少し冗長な書き方になっていますが、「CSVファイルを読み込んだ時の処理」「表示期間を指定した時の処理」「グラフ上限値を変更した時の処理」に分けて記載しています。

HTMLファイルの詳細説明

HTMLファイルの詳細を説明します。

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

Bootstrapを利用するための記述です。

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>

Chart.jsを利用するための記述です。

                <div class="mb-3">
                    <label for="formFile" class="form-label text-primary">表示するI/Fのファイルを選択してください</label>
                    <input class="form-control font-monospace" type="file" id="file">
                </div>

CSVファイルを取得するためのフィールドを設置します。

                <div class="text-primary mt-2">表示する期間を選択してください</div>
                <div class="datetime-check font-monospace">
                    <input type="datetime-local" id="start-time" name="start-time" step="300">
                    〜
                    <input type="datetime-local" id="end-time" name="end-time" step="300">
                    <button type="button" id="display" class="btn btn-primary my-1">表示</button>
                </div>

表示する期間を指定するためのフィールドを設置します。

                <div class="text-primary my-2">グラフの上限値を変更できます。(デフォルト=100Mbps)</div>
                <button type="button" id="100M" value="M,100,10" onclick="bpscalc(this)"
                    class="btn btn-secondary">100Mbps</button>
                <button type="button" id="10M" value="M,10,1" onclick="bpscalc(this)"
                    class="btn btn-secondary">10Mbps</button>
                <button type="button" id="1M" value="M,1,1" onclick="bpscalc(this)"
                    class="btn btn-secondary">1Mbps</button>
                <button type="button" id="100K" value="K,100,10" onclick="bpscalc(this)"
                    class="btn btn-secondary">100Kbps</button>
                <button type="button" id="10K" value="k,10,1" onclick="bpscalc(this)"
                    class="btn btn-secondary">10Kbps</button>
                <button type="button" id="1K" value="K,1,1" onclick="bpscalc(this)"
                    class="btn btn-secondary">1Kbps</button>

グラフ上限値を変更するためのボタンを設置します。押したボタンによって処理を変えるために、”value” を設定します。

            <canvas id="trafficGraph"></canvas>

グラフを描画するためのフィールドを定義します。

    <script src="main.js"></script>

JavaScriptを呼び出します。

JavaScriptコードの詳細説明

JavaScriptコードの詳細を説明します。

CSVファイルを読み込んだ時の処理

const ctx = document.getElementById("trafficGraph");
let trafficGraph = new Chart(ctx);

グラフ描画用の変数をセットします。

const result = [];
let fileInput = document.getElementById('file');
let fileReader = new FileReader();

fileInput.onchange = () => {
  let file = fileInput.files[0];
  fileReader.readAsText(file);
};

CSVファイルを読み込み、変数にセットします。

fileReader.onload = () => {
  const txt = fileReader.result;

  const arr = txt.split("\n");
  for (let i = 0; i < arr.length; ++i) {
    result[i] = arr[i].split(',');
  }

CSVファイルを、カンマ区切りで配列(result)に格納します。

  const datetime = [];
  const input5minave = [];
  const output5minave = [];

グラフの要素を配列として宣言します。

  for (let i = 0; i < result.length - 1; i++) {

CSVファイルの行数分、繰り返し処理を開始します。

    datetime[i] = result[i][0] + ' ' + result[i][1].slice(0, -3);

「日付」と「時刻」を結合して、配列(datetime)に格納します。

    input5minave[i] = (Number(result[i + 1][2]) - Number(result[i][2])) / 1024 / 1024 * 8 / 60;
    output5minave[i] = (Number(result[i + 1][3]) - Number(result[i][3])) / 1024 / 1024 * 8 / 60;
  }

送受信データ量については以下の計算をして、配列(input5minave/output5minave)に格納します。

  • (Number(result[i + 1][2]) – Number(result[i][2]))
    • 2回分のデータの差分を計算し、1分間の送受信データ量を取得
  • / 1024 / 1024
    • 1024で2回割り、メガへ変換
  • * 8
    • 8を掛けて、Byte→bitへ変換
  • / 60
    • 60で割って、1秒あたりの平均速度を計算(per/secの計算)
  datetime.shift();
  input5minave.shift();
  output5minave.shift();

それぞれの配列の見出し行を削除します。

  let sdateelement = document.getElementById("start-time");
  let edateelement = document.getElementById("end-time");

  const starttime = new Date(datetime[0]);
  starttime.setHours(starttime.getHours() + 9)
  sdateelement.value = starttime.toISOString().slice(0, -8);

  const endtime = new Date(datetime[datetime.length - 1]);
  endtime.setHours(endtime.getHours() + 9)
  edateelement.value = endtime.toISOString().slice(0, -8);

CSVファイルの開始日時と終了日時を取得し、ツール上の「表示期間選択フィールド」にセットします。

  if (trafficGraph) {
    trafficGraph.destroy();
  }

変数:trafficGraphのデータをリセットします。※この処理を入れないと、グラフを再描画した際に表示が乱れることがあります。

  trafficGraph = new Chart(ctx, {

グラフ描画用の変数に表示する値をセットします。

    type: 'line',

「折れ線グラフ」を指定します。

    data: {
      labels: datetime,

横軸に日時(配列:datetime)をセットします。

      datasets: [
        {
          label: 'Input',
          data: input5minave,
          borderColor: "rgba(175,215,246,1)",
          backgroundColor: "rgba(0,0,0,0)"
        },

縦軸の1つ目に受信平均速度(配列:input5minave)をセットし、線の色を指定します。

        {
          label: 'Output',
          data: output5minave,
          borderColor: "rgba(237,192,58,1)",
          backgroundColor: "rgba(0,0,0,0)"
        }

縦軸の2つ目に送信平均速度(配列:output5minave)をセットし、線の色を指定します。

    options: {
      title: {
        display: false,
        text: 'トラフィックグラフ'
      },

グラフのタイトルを指定します。※今回は、”false” を指定して、非表示にしています。

      scales: {
        yAxes: [{
          ticks: {
            max: 100,
            min: 0,
            stepSize: 10,

「グラフ上限値」「下限値」「補助メモリの間隔」を指定します。

          scaleLabel: {
            display: true,
            labelString: 'Mbps'

縦軸のラベルを指定します。

動作確認(CSVファイルの読み込み)

CSVファイル読み込みの確認

表示期間を指定した時の処理

「CSVファイルを読み込んだ時」と違いがある箇所について説明します。

let displayclick = document.getElementById('display');

「表示」ボタンのIDを取得します。

displayclick.onclick = () => {

「表示」ボタンをクリックした時の関数を定義します。

  const starttime = new Date(document.getElementById('start-time').value);
  const endtime = new Date(document.getElementById('end-time').value);

表示する期間の「開始日時」と「終了日時」を取得します。

  let specstarttime = 0;
  let specendtime = datetime.length;

指定された表示期間を特定するための変数を定義します。

  for (var i = 0; i < datetime.length - 1; i++) {
    datetimediff = new Date(datetime[i]);
    if (starttime.getTime() <= datetimediff.getTime()) {
      specstarttime = i;
      break;
    }
  }

横軸(配列:datetime)の何番目から表示するかを特定します。

  for (var i = 0; i < datetime.length - 1; i++) {
    datetimediff = new Date(datetime[i]);
    if (endtime.getTime() <= datetimediff.getTime()) {
      specendtime = i;
      break;
    }
  }

横軸(配列:datetime)の何番目まで表示するかを特定します。

  const specdatetime = datetime.slice(specstarttime, specendtime + 1);
  const specinput5minave = input5minave.slice(specstarttime, specendtime + 1);
  const specoutput5minave = output5minave.slice(specstarttime, specendtime + 1);

特定した表示期間で、グラフの要素を切り取ります。

  if (trafficGraph) {
    trafficGraph.destroy();
  }

変数:trafficGraphのデータをリセットします。※この処理を入れないと、グラフを再描画した際に表示が乱れることがあります。

  trafficGraph = new Chart(ctx, {
      labels: specdatetime,
          data: specinput5minave,
          data: specoutput5minave,

特定した表示期間で、グラフを描画します。

動作確認(表示期間の変更)

表示期間変更の確認

グラフ上限値を変更した時の処理

「CSVファイルを読み込んだ時」「表示期間を指定した時」と違いがある箇所について説明します。

  objvalue = obj.value.split(",");

上限値を指定するボタンのvalueの値をカンマ区切りで取得します。

  if (objvalue[0] == "M") {
    for (let i = 0; i < result.length - 1; i++) {
      datetime[i] = result[i][0] + ' ' + result[i][1].slice(0, -3);
      input5minave[i] = (Number(result[i + 1][2]) - Number(result[i][2])) / 1024 / 1024 * 8 / 60;
      output5minave[i] = (Number(result[i + 1][3]) - Number(result[i][3])) / 1024 / 1024 * 8 / 60;
    }

Mbpsのボタンが押された場合の処理です。

  } else {
    for (var i = 0; i < result.length - 1; i++) {
      datetime[i] = result[i][0] + ' ' + result[i][1].slice(0, -3);
      input5minave[i] = (Number(result[i + 1][2]) - Number(result[i][2])) / 1024 * 8 / 60;
      output5minave[i] = (Number(result[i + 1][3]) - Number(result[i][3])) / 1024 * 8 / 60;
    }
  }

Kbpsのボタンが押された場合の処理です。※1024で割る回数を1回にして、Kbpsを計算しています。

  trafficGraph = new Chart(ctx, {
            labelString: objvalue[0] + 'bps'

MbpsかKbpsによって、表示を変えています。

動作確認(グラフ上限値の変更)

グラグ上限値変更の確認

以上で、ネットワークエンジニアのプログラミング【JavaScript入門(トラフィックグラフ作成)】の説明は完了です!プログラミングができると、仕事の効率化ができますし、何より仕事を楽しむことができます!!

プラグラミング学習サイト・スクール情報

簡単なツール作成であれば、独学でも十分にプログラミングが可能になると思います。短期間で体系的に学習するのであれば、「有料学習サイト」や「オンラインスクール」の利用をおすすめします。

どちらのサイトも無料で学習可能な範囲があります。有料コンテンツに関しては、月額1000円程度です。

  • URLをコピーしました!
  • URLをコピーしました!
目次