# データを視覚化し、簡単に洞察を得る
Dashcombのダッシュボードツールを使えば、たった数回のクリックで美しいバーグラフ、折れ線グラフ、円グラフを簡単に作成できます。ダッシュボードでデータ可視化を行うことは、データを活用した意思決定やトレンドやパターンの把握には必須です。以下に、その理由をいくつか紹介します:
1. 人間は視覚的な生き物であり、視覚情報をテキストや数字よりもはるかに速く処理し、グラフで表現されるとパターンをより簡単に検出できます。サイズ、形、色、アイコンなどの要素によって、視覚化はデータの複数の次元を直感的に理解できる方法で伝えることができます。つまり、グラフは、生データを見るだけではすぐにはわからないインサイトや関連性を識別し、つながりを見つけるのに役立ちます。
2. グラフは相関関係やトレンドを明らかにすることができます。データポイントを時間軸に沿って、または他の変数と比較してプロットすることにより、グラフは、単独でデータを見た時には明らかにならないパターンやトレンドを示すことができます。たとえば、ウェブサイトのトラフィックを時間に沿って表示する折れ線グラフは、特定の月や曜日にトラフィックが急増するかどうかを示し、ビジネスがプロモーションや広告を実行するタイミングを決定するのに役立ちます。
3. グラフは複雑なデータを単純化できます。大量のデータセットを扱う場合、一度にすべての情報を理解することは難しい場合があります。グラフは、視覚的に要約することによってデータを単純化し、理解しやすくすることができます。たとえば、製品カテゴリ別の売上の割合を示す円グラフは、生の売上データを一行ずつ見る必要がなく、ビジネスにとってどの製品が最も人気があるかを素早く概観することができます。
## ステップ1：データを収集する
Dashcombでデータを視覚化するには、グラフに適した形式にデータを整形することから始めます。例として、2つの異なるWebページのトラフィックが時間の経過とともにどのように変化しているかを理解する必要がある経営者だとします。
Dashcombでグラフを作成するには、各データポイントを配列内のオブジェクトとして表現する必要があります。オブジェクトの最初のキーは、時間やカテゴリなどの主軸に沿った値であるべきです。オブジェクトの残りのキーは、比較される値またはグラフ化される値を表す必要があります。
この例では、月単位で2つのWebページのトラフィックトレンドをグラフ化するため、各月は配列内の1つのオブジェクトで表現され、オブジェクトにはそれぞれのキーを持つ両方のWebページのビュー数が含まれている必要があります。
以下は、その例です：
```json
[
{month: "2022-01", "landing-page-a": 2000, "landing-page-b": 2400},
{month: "2022-02", "landing-page-a": 2100, "landing-page-b": 2600},
...
]
```
ウェブサイトのトラフィックを時間軸で取得するためのSQLクエリは、次のようになるかもしれません：
```sql
SELECT
DATE_TRUNC('month', timestamp) AS month,
SUM(CASE WHEN page = 'landing-page-a' THEN 1 ELSE 0 END) AS 'landing-page-a',
SUM(CASE WHEN page = 'landing-page-b' THEN 1 ELSE 0 END) AS 'landing-page-b'
FROM
page_views
WHERE
timestamp BETWEEN '2022-01-01' AND '2022-12-31'
GROUP BY
month
ORDER BY
month ASC
```
もし、あなたのデータが 「DB クエリ」 や 「API」 から来ている場合、クエリエディタの 「後処理」セクションを使用して、JS を使ってデータを再形成し、グラフ描画に適した形式にすることもできます。
## ステップ2: データを表示する
データを正しくフォーマットしたので、グラフを設定する手順を見ていきましょう。
1. ダッシュボードにグラフコンポーネントをドラッグします。 コンポーネントライブラリ で 「BI コンポーネント」を見つけ、必要な種類のグラフをダッシュボードにドラッグします。この例では、 「折り線グラフ」を使用します。
2. グラフをデータに接続します。新しいグラフコンポーネントが選択された状態で、サイドバーで ソースデータ を探し、データを参照するように変更します。例えば、 {{query1.data}} のようにします。単にオブジェクトの配列としてデータを提供するだけで、Dashcombが残りの作業を行います。\\
3. 表示をカスタマイズします。Dashcombのグラフでは、データをより明確にするために多くのカスタマイズオプションがあります。別の記事でオプションについて詳しく説明しますが、今のところ、色やシンボルをカスタマイズし、各軸に名前を追加することを検討してください。\\
Dashcombのグラフコンポーネントは、データを素早く簡単に理解する必要がある人にとって、強力なツールです。ソフトウェア開発者、データアナリスト、経営者など、誰でも、複雑なデータから洞察を得て伝えるための情報豊富で美しい視覚化を作成するために必要なすべてを提供します。
\\
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.dashcomb.com/dashcomb-help-center/tips-and-tricks/dtawoshiniworu.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.