Help us understand the problem. What is going on with this article?

SplunkでD3.jsを動かす

More than 1 year has passed since last update.

SplunkでD3.jsを動作させる例として、Appの「Splunk Web Framework Toolkit」を使ってバブルチャートを表示させる手順を紹介します。

ちなみに、D3をご存じない方には以下のチュートリアルが参考になると思います。

D3 入門|スコット・マレイ
http://ja.d3js.info/alignedleft/tutorials/d3/

ダッシュボードにバブルチャートを表示させる

「Splunk Web Framework Toolkit」のインストール

以下からダウンロードして、Splunkにインストールしてください。
https://splunkbase.splunk.com/app/1613/#/overview

Appの作成

App作成画面から「Try_D3」を作成します(フォルダ名は「try_d3」とします)。

Dashboardの作成

作成したApp「Try_D3」のDashboardで「Bubblechart」の名前で作成します。

サーチ文の作成

「Bubglechart」のDashboardで「Add Panel」から「Statistics Table」を選択し、以下のサーチ文を入力します。

index=_internal | stats count by sourcetype

すると以下のような画面になります。

スクリーンショット 2017-10-05 17.42.29.png

HTMLへ変換

Dashboardsの画面に戻り、「Edit」から「Conver to HTML」を選択します。

D3.jsライブラリの配置

try_d3配下に"appserver/static"ディレクトリを作成し、その配下に"splunk_wftoolkit/appserver/static/components"をコピーします。

$ mkdir -p /Applications/Splunk/etc/apps/try_d3/appserver/static
$ cp -r /Applications/Splunk/etc/apps/splunk_wftoolkit/appserver/static/components /Applications/Splunk/etc/apps/try_d3/appserver/static/

ライブラリへのパスを通す

以下の記述を見つけ、

// <![CDATA[

その下に以下を追記します。

require.config({
    baseUrl: "{{SPLUNKWEB_URL_PREFIX}}/static/js",
    waitSeconds: 0,
    paths:
    {
        "app": "../app"
    }
});

requireの最下に以下を追加します。

"app/try_d3/components/bubblechart/bubblechart"

functionの最下に以下を追加します。

BubbleChartView

バブルチャートのviewを定義

以下の記述を見つけ

// VIEWS: VISUALIZATION ELEMENTS

その下に以下を追記します。

var bubblechart = new BubbleChartView({
    id: "bubblechart",
    managerid: "search1",
    labelField:"sourcetype",
    valueField: "count",
    categoryField: "sourcetype",
    el: $("#bubblechart")
}).render();

ここで、各属性は以下の通りです。

  • id,el : DOMエレメントとして、ダッシュボードに表示させる際に使用
  • managerid : サーチ文との紐付け."SEARCH MANAGERS"のidを使用
  • labelField : 各々のバブルに表示させるラベル
  • valueField : 各々のバブルの大きさの指標
  • categoryField : 色をつけるためのグルーピング

ダッシュボードへの表示

以下の記述を見つけ

<div id="element1" class="dashboard-element table" style="width: 100%">

以下に書き換えます(ここで上記elを使用します)。

<div id="bubblechart" class="dashboard-element table" style="width: 100%">

描画してみます。

スクリーンショット 2017-10-06 17.43.11.png

これでは小さすぎるので、サイズを調整します。

<div id="bubblechart" class="dashboard-element table" style="width:400px;height:300px">

いい感じになりました。

スクリーンショット 2017-10-06 17.41.41.png

インタラクティブ(ドリルダウン)動作を定義する

バブルチャートを表示させただけではちょっとつまらないので、バブルをクリックした際の動作(ドリルダウン)を定義します。バブルをクリックすると該当のデータの詳細を統計テーブルに表示させるという動きにします。

表示領域の作成

まず以下をバブルチャートの下に追記して、表示領域を作成します。

<div id="row2" class="dashboard-row dashboard-row2">
    <div id="panel2" class="dashboard-cell" style="width: 100%;">
        <div class="dashboard-panel clearfix">

            <div class="panel-element-row">
                <div id="statisticstable" class="dashboard-element table" style="width: 100%">
                    <div class="panel-body"></div>
                </div>
            </div>
        </div>
    </div>
</div>

// VIEWS: VISUALIZATION ELEMENTSに以下を追記します。

        var statisticstable = new TableElement({
            "id": "statisticstable",
            "drilldown": "none",
            "managerid": "search2",
            "el": $('#statisticstable')
        }, {tokens: true, tokenNamespace: "submitted"}).render();

サーチ文の定義

以下の記述を見つけ、

// SEARCH MANAGERS

以下を追記します。

var search2 = new SearchManager({
            "id": "search2",
            "cancelOnUnload": true,
            "search": "index=_internal sourcetype=$select_sourcetype$ | table _time source",
            "latest_time": "now",
            "status_buckets": 0,
            "earliest_time": "-24h@h",
            "sample_ratio": null,
            "app": utils.getCurrentApp(),
            "auto_cancel": 90,
            "preview": true,
            "tokenDependencies": {
            },
            "runWhenTimeIsUndefined": false
        }, {tokens: true, tokenNamespace: "submitted"});

イベントハンドラの定義

バブルクリック時の動作を記述します。
上記で作成した、

var bubblechart = new BubbleChartView({
    id: "bubblechart",
    managerid: "search1",
    labelField:"sourcetype",
    valueField: "count",
    categoryField: "sourcetype",
    el: $("#bubblechart")
}).render();

の下に以下を追記します。

bubblechart.on("click", function(e) {
   if (e !== undefined) {
        setToken("select_sourcetype", e.name);
   }
});

ここで、バブルチャートの場合、eは以下のような構成になっています(上記ではname属性を利用しました)。

{
  name: labelFieldの値,
  category: categoryFieldの値,
  value: valueFieldの値
}

以上で完成です。下図のようにバブルをクリックすると、下の統計テーブルに詳細が表示されます。

スクリーンショット 2017-10-07 16.43.33.png

なお、完成形の構成をgithubに置いておきましたので、ご興味がある方はご覧ください。
https://github.com/myogada/Splunk_Try_D3

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした