📏 ダッシュボードスタジオ【絶対数での線引き】ガイド
固定値の水平線を引く方法
🎯 基本：1本の絶対値基準線
STEP 1: SPLクエリで固定値を作成
| inputlookup server_data.csv
| eval _time=strptime(timestamp, "%Y-%m-%d %H:%M:%S")
| timechart span=30m avg(cpu) as CPU使用率
| eval 基準線=70
各行の説明:
| inputlookup server_data.csv
↑ CSVデータを読み込む
| eval _time=strptime(timestamp, "%Y-%m-%d %H:%M:%S")
↑ タイムスタンプを_timeフィールドに変換
| timechart span=30m avg(cpu) as CPU使用率
↑ 30分間隔で平均値を計算
| eval 基準線=70
↑ ★重要★ 固定値70の基準線を作成
この数値が絶対値の水平線になる
実行結果イメージ:
┌────────────────────────────────────────┐
│ データテーブル │
├────────────────────────────────────────┤
│ _time CPU使用率 基準線 │
│ 2026-01-22 08:00 35 70 │
│ 2026-01-22 08:30 42 70 │
│ 2026-01-22 09:00 58 70 │
│ 2026-01-22 09:30 67 70 │
│ 2026-01-22 10:00 75 70 ← 全部70│
└────────────────────────────────────────┘
STEP 2: Line Chartビジュアライゼーションを選択
Panel Editor画面
┌────────────────────────────────────────┐
│ Visualization Type │
│ ┌──────────────────────────────────┐ │
│ │ 📊 Line Chart ← 選択 │ │
│ │ 📈 Column Chart │ │
│ │ 📉 Area Chart │ │
│ └──────────────────────────────────┘ │
└────────────────────────────────────────┘
STEP 3: グラフが表示される
初期表示（2本の線が同じ色）
┌────────────────────────────────────────┐
│ 80│ │
│ │ ╱╲ │
│ 70│─────────────────────── (基準線) │
│ │ ╱ ╲ ╱╲ │
│ 60│ ╱ ╱ ╲ │
│ │╱ ╲╱ │
│ 50│ │
│ └─────────────────────────→ │
│ │
│ 凡例: ━ CPU使用率 ━ 基準線 │
└────────────────────────────────────────┘
STEP 4: 基準線の色とスタイルを変更
4-1: Configuration タブを開く
Panel Editor 右側
┌────────────────────────────────────────┐
│ 📊 Configuration ← クリック │
│ 🎨 Visualization │
│ 📏 Layout │
└────────────────────────────────────────┘
4-2: Visualization > Series を展開
Configuration画面
┌────────────────────────────────────────┐
│ ▼ Visualization ← クリックして展開 │
│ ┌────────────────────────────────┐ │
│ │ ▼ Series ← クリックして展開 │ │
│ │ • CPU使用率 │ │
│ │ • 基準線 ← これを選択 │ │
│ └────────────────────────────────┘ │
└────────────────────────────────────────┘
4-3: 基準線の設定を変更
基準線の設定パネル
┌────────────────────────────────────────┐
│ Series: 基準線 │
├────────────────────────────────────────┤
│ │
│ 🎨 Color │
│ ┌──────────────────────────────────┐ │
│ │ [ ] #0066CC ← クリック │ │
│ └──────────────────────────────────┘ │
│ │
│ 📏 Line Width │
│ ┌──────────────────────────────────┐ │
│ │ [ 3 ] │ │
│ └──────────────────────────────────┘ │
│ │
│ ━━ Line Style │
│ ┌──────────────────────────────────┐ │
│ │ ( ) Solid 実線 │ │
│ │ (●) Dashed 点線 ← 選択 │ │
│ │ ( ) Dotted ドット │ │
│ └──────────────────────────────────┘ │
│ │
└────────────────────────────────────────┘
カラーピッカーが開く:
┌────────────────────────────────────────┐
│ Color Picker │
├────────────────────────────────────────┤
│ 🎨 │
│ ┌──────────────────────────────────┐ │
│ │ │ │
│ │ 🔴 ← 赤を選択 │ │
│ │ │ │
│ └──────────────────────────────────┘ │
│ │
│ Hex: [#FF0000_______] │
│ │
│ [ Cancel ] [ Apply ] ← クリック │
└────────────────────────────────────────┘
推奨設定:
-
Color:
#FF0000(赤) -
Line Width:
3 -
Line Style:
Dashed(点線)
STEP 5: 完成！
完成形
┌────────────────────────────────────────┐
│ 80│ │
│ │ ╱╲ │
│ 70│━ ━ ━ ━ ━ ━ ━ ━ ━ (赤い点線) │
│ │ ╱ ╲ ╱╲ │
│ 60│ ╱ ╱ ╲ │
│ │╱ ╲╱ │
│ 50│ │
│ └─────────────────────────→ │
│ │
│ 凡例: ━━ CPU使用率(青) │
│ ━ ━ 基準線(赤・点線) │
└────────────────────────────────────────┘
🎯 応用：複数の絶対値基準線
3本の基準線を引く
| inputlookup server_data.csv
| eval _time=strptime(timestamp, "%Y-%m-%d %H:%M:%S")
| timechart span=30m avg(cpu) as CPU使用率
| eval 正常レベル=50
| eval 警告レベル=70
| eval 危険レベル=85
各基準線の説明:
| eval 正常レベル=50
↑ Y軸の50の位置に水平線
| eval 警告レベル=70
↑ Y軸の70の位置に水平線
| eval 危険レベル=85
↑ Y軸の85の位置に水平線
UI設定：各線の色を設定
Configuration > Series
┌────────────────────────────────────────┐
│ ✓ CPU使用率 │
│ Color: #000000 (黒) │
│ Line Style: Solid │
│ Line Width: 2 │
│ │
│ ✓ 正常レベル │
│ Color: #00FF00 (緑) │
│ Line Style: Dashed │
│ Line Width: 3 │
│ │
│ ✓ 警告レベル │
│ Color: #FFFF00 (黄) │
│ Line Style: Dashed │
│ Line Width: 3 │
│ │
│ ✓ 危険レベル │
│ Color: #FF0000 (赤) │
│ Line Style: Dashed │
│ Line Width: 4 │
└────────────────────────────────────────┘
完成イメージ
3段階の基準線
┌────────────────────────────────────────┐
│ 85│━ ━ ━ ━ ━ ━ ━ ━ ━ 🔴 危険レベル │
│ │ │
│ 70│━ ━ ━ ━ ━ ━ ━ ━ ━ 🟡 警告レベル │
│ │ ╱╲ │
│ 60│ ╱ ╲ ╱╲ │
│ │ ╱ ╱ ╲ │
│ 50│━ ━ ━ ━ ━ ━ ━ ━ ━ 🟢 正常レベル │
│ │╱ ╲╱ │
│ 40│ │
│ └─────────────────────────→ │
└────────────────────────────────────────┘
🎯 実践：5本の基準線
SPLクエリ
| inputlookup server_data.csv
| eval _time=strptime(timestamp, "%Y-%m-%d %H:%M:%S")
| timechart span=30m avg(cpu) as CPU使用率
| eval レベル1=20
| eval レベル2=40
| eval レベル3=60
| eval レベル4=80
| eval レベル5=95
絶対数の説明:
-
レベル1=20→ 常にY軸の20の位置 -
レベル2=40→ 常にY軸の40の位置 -
レベル3=60→ 常にY軸の60の位置 -
レベル4=80→ 常にY軸の80の位置 -
レベル5=95→ 常にY軸の95の位置
色設定表
| 線の名前 | 固定値 | 色コード | 色 | Line Width |
|---|---|---|---|---|
| CPU使用率 | - | #000000 | 黒 | 2 |
| レベル1 | 20 | #00FFFF | 水色 | 2 |
| レベル2 | 40 | #00FF00 | 緑 | 2 |
| レベル3 | 60 | #FFFF00 | 黄 | 3 |
| レベル4 | 80 | #FFA500 | 橙 | 3 |
| レベル5 | 95 | #FF0000 | 赤 | 4 |
完成イメージ
5段階の基準線
┌────────────────────────────────────────┐
│ 95│━ ━ ━ ━ ━ ━ ━ ━ ━ 🔴 レベル5 │
│ │ ╱╲ │
│ 80│━ ━ ━ ━╱━━╲━ ━ ━ ━ 🟠 レベル4 │
│ │ ╱ ╲ │
│ 60│━ ━ ╱━ ━ ━ ━╲━ ━ ━ 🟡 レベル3 │
│ │ ╱ ╲ ╱╲ │
│ 40│━╱━ ━ ━ ━ ━ ━ ╲╱━━╲ 🟢 レベル2 │
│ │ ╲ │
│ 20│━ ━ ━ ━ ━ ━ ━ ━ ━ ━╲ 💧 レベル1 │
│ └─────────────────────────────→ │
└────────────────────────────────────────┘
📋 絶対値基準線の重要ポイント
✅ DO（やるべきこと）
✅ 正しい書き方:
| eval 基準線=70
↑ 固定値を直接指定
✅ フィールド名は日本語OK:
| eval 警告レベル=85
| eval 危険レベル=95
✅ 小数点もOK:
| eval 基準線=70.5
❌ DON'T（やってはいけないこと）
❌ 変数や計算式を使わない:
| eval 基準線=avg(cpu)
↑ これは動的な線になる（絶対値ではない）
❌ null()を使わない:
| eval 基準線=if(条件, 70, null())
↑ これは条件付きで表示/非表示される
❌ 引用符で囲まない:
| eval 基準線="70"
↑ 文字列になる（数値として認識されない）
🎨 色とスタイルの組み合わせ例
パターン1: 信号機カラー
| eval 安全=50 → 緑 (#00FF00) Dashed Width:3
| eval 注意=70 → 黄 (#FFFF00) Dashed Width:3
| eval 危険=85 → 赤 (#FF0000) Dashed Width:4
パターン2: グラデーション
| eval レベル1=20 → 薄青 (#ADD8E6) Dashed Width:2
| eval レベル2=40 → 青 (#0066CC) Dashed Width:2
| eval レベル3=60 → 濃青 (#000080) Dashed Width:3
パターン3: カラフル
| eval A=1000 → 赤 (#FF0000) Solid Width:4
| eval B=800 → 橙 (#FFA500) Solid Width:4
| eval C=600 → 黄 (#FFFF00) Solid Width:4
| eval D=400 → 緑 (#00FF00) Solid Width:4
| eval E=200 → 青 (#0066CC) Solid Width:4
💡 よくある質問
Q1: 基準線が表示されない
原因と解決策:
✅ チェック1: クエリを実行したか
→ Run Query ボタンを押す
✅ チェック2: evalの構文が正しいか
→ | eval 基準線=70
スペースや全角文字に注意
✅ チェック3: Line Chartを選択したか
→ Visualization Type: Line Chart
✅ チェック4: Y軸の範囲内か
→ データが0-50で基準線が100なら見えない
Q2: 基準線が点線にならない
解決策:
Configuration > Series > 基準線
┌────────────────────────────────────────┐
│ Line Style: │
│ ( ) Solid │
│ (●) Dashed ← ●を確認 │
│ ( ) Dotted │
└────────────────────────────────────────┘
必ず Apply ボタンを押す
その後 Save ダッシュボードを押す
Q3: 色が変わらない
解決手順:
STEP 1: Seriesから該当の線を選択
STEP 2: Color をクリック
STEP 3: カラーピッカーで色を選択
STEP 4: Apply をクリック ← 重要！
STEP 5: Save をクリック ← 重要！
STEP 6: ページをリロード
📊 完全版テンプレート
すぐ使えるSPLクエリ
| inputlookup あなたのデータ.csv
| eval _time=strptime(timestamp, "%Y-%m-%d %H:%M:%S")
| timechart span=30m avg(値フィールド) as データ値
# 基準線（絶対値）
| eval 基準1=数値1
| eval 基準2=数値2
| eval 基準3=数値3
| eval 基準4=数値4
| eval 基準5=数値5
例（サーバー監視）:
| inputlookup server_data.csv
| eval _time=strptime(timestamp, "%Y-%m-%d %H:%M:%S")
| timechart span=30m avg(cpu) as CPU使用率
# 基準線
| eval 最適=30
| eval 通常=50
| eval 注意=70
| eval 警告=85
| eval 危険=95
🎯 実際の設定手順まとめ
□ STEP 1: CSVデータをアップロード
□ STEP 2: SPLクエリで | eval 基準線=固定値
□ STEP 3: Run Query 実行
□ STEP 4: Line Chart 選択
□ STEP 5: Configuration > Series
□ STEP 6: 各基準線の色・スタイル設定
□ STEP 7: Apply → Save
□ STEP 8: 完成確認