• TOP
  • Grafana
  • GrafanaでCSVデータを可視化する方法
GrafanaでCSVデータを可視化する方法
2025.02.05 Grafana翻訳記事

本記事はGrafana Labs blog の記事を翻訳し転載しています

David Allen

2025年2月5日 読了時間 6分

CSVデータといえば、GoogleスプレッドシートやMicrosoft Excelなどの人気スプレッドシートアプリを連想する人が多いのですが、Grafanaにも、CSV形式で保存されたデータをすばやく可視化して分析するための多くの機能が用意されています。

この記事では、Grafanaを使用してWeb上の任意の場所から任意のCSVファイルを可視化する方法の例について説明します。具体的には、次のことを行います。

  1. データに接続するためのデータソースを作成する
  2. クエリを可視化するダッシュボードを作成する
  3. 必要に応じて、可視化する前にTransformを使用してCSVデータを変換する

今後は、これらの手順を適用して、Grafana内であらゆる種類のダッシュボードを構築することもできます。

ステップ 1: データソースを作成する

Grafana の左側のナビゲーションで、 [Connections(接続)] > [Data sources(データソース)] を選択します。右上の [Add a new data source(新しいデータソースを追加)] をクリックします。次に、データソースタイプとして「Infinity」と入力します。

注: CSV プラグインは選択しないでください。プラグインにはそれもありますが、Infinity データソースはJSON、CSV、XML、GraphQL、HTMLエンドポイントからのデータを視覚化できて、はるかに柔軟性があり、活発にメンテナンスされています。さらに、この記事の後半で説明する特定のスーパーパワーを付与します。

Infinityタイルをクリックすると、以下の画面が表示され、データソースの名前を指定するように求められます。

デフォルトの名前はyesoreyeram-infinity-datasourceです。この例ではこの名前を使用しますが、任意の名前もつけることができます。この画面には、任意のエンドポイントのアクセスパラメータをオンラインで構成するオプションがあります。たとえば、あるエンドポイントでCSVにアクセスするためにBearer Token(署名なしトークン)を提供する必要がある場合は、[Authentication(認証)]セクションで構成できます。ここではパブリック データセットを使用するので、これ以上何もカスタマイズせずに続行できます。
[Save & test(保存してテスト)]をクリックします。

Grafana では、すべてのデータソースにクエリエディタが備わっていて、必要なデータを指定できます。データソースは、データのフェッチ方法を制御するプラグインです。

Infinityデータソースを使用すると、HTTP/HTTPSを使用するオンライン上の任意のエンドポイントから任意のリソースを柔軟に取得できるということから、[データクエリ]はHTTP GETリクエストになります。

Grafana で複数のデータソースを扱う方法の詳細については、こちらのブログ記事をご覧ください。

ステップ 2: ダッシュボードを作成する

左側のナビゲーションで、[Dashboards(ダッシュボード)] をクリックします。リストが表示されるので、右上にある [New(新規)] ボタンから[New dashboard(新しいダッシュボード)] をクリックします。

空のダッシュボードが表示され、新しいビジュアライゼーションを追加するよう求められます。CSV データを表示するシンプルな表から始めましょう。[Add visualization(ビジュアライゼーションを追加)] ボタンをクリックします。

ビジュアライゼーションを追加

Grafana でビジュアライゼーションを行うためには、データがどこから来て、どのようなデータであるかを知る必要があります。そこで、作成したyesoreyeram-infinity-datasourceデータソースを選択します。

次のスクリーンショットは、今回のすべての選択項目を示しています。次の手順で進めることができます。

  1. 下部のクエリセクションで、[Type: CSV] を選択します。
  2. [Source:URL]、[Method:GET]であることを確認します。
  3. [URL] に「https://raw.githubusercontent.com/grafana/developer-advocacy/refs/heads/main/projects/Visualize%20CSV/data/worldcities.csv」と入力すると、世界の都市とその場所に関するデータが満載の CSV ファイルにリンクします。
  4. 画面の右上隅で、視覚化タイプとして [Table] を選択します。

以上です!表がポップアップ表示され、データが表示されるはずです。

完了したら、[Back to dashboard(ダッシュボードに戻る)] ボタンをクリックします。新しいダッシュボードには、CSV データの表が表示されます。この段階で、[Save dashboard(ダッシュボードを保存)]をクリックすると、進行状況を追跡することができます。

別のビジュアライゼーションの追加: 世界の都市の地図

通常、世界の都市は地図上に表示され、表は視覚的にそれほど面白くないので、もっと良いものを追加しましょう。ダッシュボードの右上隅で [Add(追加) > Visualization(ビジュアライゼーション)] をクリックして、新しいパネルを作成します。

表示される画面で、次の選択を行ってマップを追加します。

  1. Data source: yesoreyeram-infinity-datasource
  2. Type : CSV
  3. Method : GET
  4. URL: (上述と同じ)
  5. (画面右上)Visualization type: Geomap(ジオマップ)

Grafana では、ジオマップのビジュアライゼーションには緯度と経度の情報が必要です。幸い、Grafana はこのデータセット内のこれらのフィールドを自動的に検出できます。つまり、下の図のように、自動的に入力された(ただし非常ににぎやかな)マップを得られるということです。世界には確かにたくさんの都市がありますね!

このビジュアライゼーションをそのまま保存して、使える地図を作成できます。マウスホイールのスクロールで拡大・縮小するので、世界の好きな地域を調べることができます。では、大都市に焦点を当てて、Grafanaのもう一つの重要な特徴を探ってみましょう。

ステップ 3: データの変換とフィルター処理

Grafana の変換Transformationを使用すると、可視化する前にデータを変更することができます。データソースの URL があるクエリ エディターに、 [Transformations(変換)] という名前のタブが表示されているのが分かります。それをクリックし、[Add transformation(Transformationの追加)] をクリックします。

次の 2 つの変換Transformationを追加します。

  1. [Convert field type(フィールド型式の変換)]を使用して、人口フィールドを数値に変更します (CSV はすべてテキストであることにご注意ください)。
  2. [Filter data by values(値によるデータのフィルタリング)] 変換により、データ セットを特定の人口を超える都市のみに制限します。

これらの変換型式は、次のように表示されます。

両方のTransformation変換を適用すると、画面は次のようになります。

これらの変換の順序は重要です。最初にフィールドの種類を数値に変換しないと、CSVのテキストに数値演算が適用されないため、[Filter data by values(値でデータをフィルター)] で [Greater than(より大きい)] オプションを使用できなくなります。

ここでは、人口が 100 万人を超える都市に絞り込みました。これで地図がどれほど簡素化されたかに注目してください!

最後に、右側のパネルにタイトルをつけましょう。そして、[Back to dashboard(ダッシュボードに戻る)] をクリックして作業内容を保存します。

まとめ

おめでとうございます!公開されている CSV データの Grafana ダッシュボードを作成しました。
上述のアプローチは、その形式を扱うことができれば、あらゆる種類のHTTP/S URLの背後にあるあらゆる種類のデータに対しても機能します。手順をまとめると次のとおりです。

  1. 特定の種類のデータにアクセスできるデータソースを定義します。数百のGrafanaデータソースがあり、あらゆるシステムから選択できます。
  2. アクセスするクエリを定義します。CSVについては、URLの情報を得る HTTPS GET クエリを作成するだけです。得られたデータを可視化します。この例では、表とジオマップのビジュアライゼーションを使用しましたが、Grafana は数十種類のビジュアライゼーションをサポートしており、コミュニティのプラグインを通じてさらに多くの種類のビジュアライゼーションをサポートしています。
  3. 必要に応じて、データを操作して、一連の変換Transformationを定義します。

このトピックについてもっと詳しく知りたいことがあれば、Grafanaコミュニティサイトでお気軽に質問してください!また、Grafana ビジュアライゼーションから CSV ファイルへのデータのエクスポートに興味がある方は、このブログ記事を参照してください。

Grafana Cloudは、ダッシュボード、メトリクス、ログ、トレースなどを使い始める最も簡単な方法です。Grafana Cloudでは、永久無料の利用枠のほか、あらゆるユースケースに対応するプランを用意しています。今すぐ無料でサインアップしてください!

原文:How to visualize CSV data with Grafana

関連記事