はじめに
今回はプリザンターのダッシュボード機能とJavaScriptライブラリのChart.jsで指定した年月の気温の線グラフを作成してみました。
ダッシュボード機能とは
プリザンター上で作成したサイトの新着情報、各サイトへのリンク情報等の必要な情報を一覧で表示することができる機能です。
Chart.jsとは
JavaScriptのライブラリで、ラインチャート、バーチャート、レーダーチャート、ドーナツチャートなど様々なタイプのチャートを作成することが可能です。
グラフのもととなるテーブル作成
以下のような項目を設定したサイト(「気象データ」テーブル)を作成します。※ここでは記録テーブルで作成しています。
| 表示名 (項目) | 説明 |
|---|---|
| 日付 (日付A) | 気温を観測した日付 |
| 平均気温(℃) (数値F) | 平均気温 |
| 最高気温(℃) (数値G) | 最高気温 |
| 最低気温(℃) (数値H) | 最低気温 |
データを入れた後のテーブルのイメージ
ダッシュボード作成
グラフを表示するためのダッシュボードを作成します。プリザンターの画面右上の「新規作成」をクリック → 「ダッシュボード」を選択 → 「作成」をクリック。
作成できたら画面右上の「管理」から「ダッシュボードの管理」をクリックし、ダッシュボードの設定を行います。ここでは「ダッシュボードパーツ」「HTML」「スクリプト」の設定を行います。
ダッシュボードパーツ
ダッシュボードが作成できたら、以下のようなパーツを登録します。
- パーツタイプ：カスタムHTML
- 内容：
<div> <label>Year</label> <select id="year"> <option value="2020">2020</option> <option value="2021">2021</option> <option value="2022">2022</option> <option value="2023">2023</option> </select> <label>Month</label> <select id="month"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> </select> <button id="draw-graph-button" type=”button” onclick="DrawLineGraph()">グラフ表示</button> <canvas id="myChart"></canvas> </div>
HTML
Chart.jsのライブラリを読み込むために以下のようなscriptタグを設定します。
- 挿入位置：Body script top
- HTML：
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.js" integrity="sha512-6HrPqAvK+lZElIZ4mZ64fyxIBTsaX5zAFZg2V/2WT+iKPrFzTzvx6QAsLW2OaLwobhMYBog/+bvmIEEGXi0p1w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
参考
スクリプト
パーツが登録できたらグラフを描画するためのスクリプトを登録します。以下のようなスクリプトを登録します。
// 気象データ サイトID
const siteId = 1445;
function GetWeatherInfoArr(year, month) {
const beggingOfMonthStr = `${$p.shortDateString(new Date(year, month - 1, 1))} 00:00:00`;
const endOfMonthStr = `${$p.shortDateString(new Date(year, month, 0))} 23:59:59`;
const json = {
View: {
ColumnFilterHash: {
DateA: `["${beggingOfMonthStr}, ${endOfMonthStr}"]` // 日付
},
ColumnSorterHash: {
DateA: "asc"
},
ApiDataType: "KeyValues",
ApiColumnKeyDisplayType: "ColumnName",
ApiColumnValueDisplayType: "Value",
GridColumns: [
"ResultId", // ID
"DateA", // 日付
"NumF", // 気温(℃) 平均
"NumG", // 気温(℃) 最高
"NumH", // 気温(℃) 最低
]
}
};
// APIで気象データを取得する
let weatherInfoArr;
$p.apiGet({
id: siteId,
data: json,
async: false,
done: function (data) {
weatherInfoArr = data.Response.Data;
},
fail: function (data) {
console.log(JSON.stringify(data));
}
});
return weatherInfoArr;
}
function DrawLineGraph() {
const year = document.getElementById('year').value;
const month = document.getElementById('month').value;
const ctx = document.getElementById('myChart');
// 既存のチャートがあれば破棄する
const existingChart = Chart.getChart(ctx);
if (existingChart) {
existingChart.destroy();
}
// 画面上で設定した年・月の気象データを取得する
let weatherInfoArr = GetWeatherInfoArr(year, month);
const labels = weatherInfoArr.map(record => $p.shortDateString(new Date(record.DateA)));
const maxTemps = weatherInfoArr.map(record => record.NumG);
const minTemps = weatherInfoArr.map(record => record.NumH);
const aveTemps = weatherInfoArr.map(record => record.NumF);
// 線グラフを描く
new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [
{
label: '最高気温(℃)',
data: maxTemps,
borderColor: "rgba(255,0,0,1)",
backgroundColor: "rgba(0,0,0,0)"
},
{
label: '最低気温(℃)',
data: minTemps,
borderColor: "rgba(0,0,255,1)",
backgroundColor: "rgba(0,0,0,0)"
},
{
label: '平均気温(℃)',
data: aveTemps,
borderColor: "rgba(0,255,0,1)",
backgroundColor: "rgba(0,0,0,0)"
}
],
},
options: {
title: {
display: true,
text: '気温(℃)'
},
scales: {
yAxes: [{
ticks: {
suggestedMax: 50,
suggestedMin: -10,
stepSize: 10,
callback: function (value, index, values) {
return value + '℃'
}
}
}]
},
}
});
}
グラフ表示
設定が完了したら一覧画面に戻り、「Year」「Month」を選択して「グラフ表示」をクリックすると線グラフが表示されます。
さいごに
プリザンターで独自のグラフを作成してみたい方の参考になれば嬉しいです。他にもChart.jsには色々なグラフを描画できるようなのでまた時間があるときに試してみたいと思います。