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

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

#### 実際に作成するグラフ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119455/e9a4dfce-f296-4098-de07-b0418bdaf3c0.png)


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

https://pleasanter.net/

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

https://chartscss.org/

https://github.com/ChartsCSS/charts.css

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119455/d59631aa-3e31-23fb-c254-1191271076b2.png)

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119455/4f9c1994-a573-9ede-444d-dcb2b49f11d4.png)

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

### javascriptの追加

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119455/69e1762f-10e7-dd78-61c2-cdfa66586bd8.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119455/075035f0-393e-69ed-8e15-c63a8cb5b0e4.png)

### スクリプトの内容

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

``` javascript
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を追加します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119455/f5fd0bd7-1140-4b0f-3308-43c31f48c212.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119455/06c60c6f-eab8-6322-9ef8-bdccd1c40aaa.png)

### カスタム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>

```

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119455/e9a4dfce-f296-4098-de07-b0418bdaf3c0.png)


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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119455/a17f977c-a621-d89e-a784-2919d1718148.png)