プリザンターのダッシュボード上でテーブルデータからグラフを作成する

はじめに

プリザンターのテーブルからデータを取得し、ダッシュボード上にグラフ表示を行うまでのサンプルとなります。

実際に作成するグラフ

今回はプリザンターのクラウドサービスpleasanter.netを利用します。

グラフはCharts.cssを利用します。

取得データの作成

プリザンター上にデータを取得する記録テーブルを作成します。
記録テーブルを追加後、管理メニューからエディタを選択し、数値A～Eを追加します。

※ 赤枠が追加した項目です。

今回は1行のみのデータを追加し表示したいので、テーブルに1行だけデータを追加します。

ダッシュボード

プリザンター上にダッシュボードを作成し、グラフを表示するカスタムHTMLとデータを取得するjavaスクリプトを追加します。

javascriptの追加

ダッシュボードの管理メニューから、スクリプト→新規作成を選択。

スクリプトのタイトルを任意で入力し、スクリプトの項目に

スクリプトの内容

サイトIDは「取得データの作成」で作成したURLのIDです。

let site_id = 'ここにサイトIDを入力する';
let numA, numB, numC, numD, numE; // サイトのデータ取得用

// APIからデータを取得する処理
function fetchDataFromAPI() {
    $p.apiGet({
        id: site_id,
        done: function (data) {
            console.log('通信が成功しました。');
            console.log('取得データ:', data);

            if (data.Response && data.Response.Data && data.Response.Data.length > 0) {
                let result = data.Response.Data[0];

                numA = result.NumA;
                numB = result.NumB;
                numC = result.NumC;
                numD = result.NumD;
                numE = result.NumE;

                console.log('取得したデータ:', { numA, numB, numC, numD, numE });

                // HTMLの値を更新
                updateTableValues();
            } else {
                console.warn('データが見つかりませんでした。');
            }
        },
        fail: function (error) {
            console.error('通信に失敗しました。', error);
        }
    });
}

// HTMLの値を更新する関数
function updateTableValues() {
    console.log('テーブルの値を更新');

    if (typeof numA !== 'undefined') {
        document.querySelector("#row-2016 td").textContent = numA;
        document.querySelector("#row-2016 td").style.setProperty("--size", `calc(${numA} / 100)`);
    }

    if (typeof numB !== 'undefined') {
        document.querySelector("#row-2017 td").textContent = numB;
        document.querySelector("#row-2017 td").style.setProperty("--size", `calc(${numB} / 100)`);
    }

    if (typeof numC !== 'undefined') {
        document.querySelector("#row-2018 td").textContent = numC;
        document.querySelector("#row-2018 td").style.setProperty("--size", `calc(${numC} / 100)`);
    }

    if (typeof numD !== 'undefined') {
        document.querySelector("#row-2019 td").textContent = numD;
        document.querySelector("#row-2019 td").style.setProperty("--size", `calc(${numD} / 100)`);
    }

    if (typeof numE !== 'undefined') {
        document.querySelector("#row-2020 td").textContent = numE;
        document.querySelector("#row-2020 td").style.setProperty("--size", `calc(${numE} / 100)`);
    }
}

ダッシュボード パーツの追加

実際にダッシュボード上に表示するHTMLを追加します。

ここで、パーツタイプを「カスタムHTML」に設定しないと正しく表示することができません。

カスタムHTMLの内容

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/charts.css/dist/charts.min.css">
<table class="charts-css column show-heading show-labels show-primary-axis show-4-secondary-axes show-data-axes data-spacing-15 hide-data">

  <caption> テーブルの値を取得してグラフ表示 </caption>

  <thead>
    <tr>
      <th scope="col"> Year </th>
      <th scope="col"> Value </th>
    </tr>
  </thead>

  <tbody>
    <tr id="row-2016">
      <th> 2016 </th>
      <td style="--size: calc( 20 / 100 );"> 20 </td>
    </tr>
    <tr id="row-2017">
      <th> 2017 </th>
      <td style="--size: calc( 40 / 100 );"> 40 </td>
    </tr>
    <tr id="row-2018">
      <th> 2018 </th>
      <td style="--size: calc( 60 / 100 );"> 60 </td>
    </tr>
    <tr id="row-2019">
      <th> 2019 </th>
      <td style="--size: calc( 80 / 100 );"> 80 </td>
    </tr>
    <tr id="row-2020">
      <th> 2020 </th>
      <td style="--size: calc( 100 / 100 );"> 100 </td>
    </tr>
  </tbody>

</table>

設定保存後、ダッシュボードを表示すると以下のグラフが表示されていれば成功です。

今回作って分かった事

プリザンターには各ダッシュボードパーツ事に更新ボタンがあるのですが、更新後はテーブルの初期表示に戻ってしまいます。
ボタンを追加するか、テーブルにフォーカスが触れたタイミングでscriptの変数を取得する事ができるのですが、もっと良い方法が無いか模索中。