All Apps and Add-ons

How to create a Sankey chart from the Splunk 6.x Dashboard Examples app?

Julieda
Explorer

Hi!

I am trying to create a Sankey chart showing a list of Splunk users, what roles they have, and what indexes they are able to search in. To test Sankey, I wanted to use the example provided in the app "Splunk 6.x Dashboard example", and use that exact example when creating a new Dashboard under the "Search"-app.

The example in the app lists that the Sankey chart consists of 4 files: custom_viz_sankey.xml, autodiscover.js, sankey.js, and sankey.css. I have copied these files into my user area, and beneath the "Search" folder. The dashboard is present in the list of dashboards on my account, but is totally empty when clicking on it.

What am I missing here? Why is the dashboard empty? Are the javascript files not being generated? How can I use the example Sankey chart from the app to modify for my own data?

0 Karma
1 Solution

lnetto
Engager

Copy the following into your app folder from the examples app:


appserver/static/autodiscover.js
appserver/static/components/d3
appserver/static/components/sankey

Create your dashboard and make sure the "data-require" path references your app. Restart Splunk and clear your cache if needed.

<form script="autodiscover.js">
  <label>Sankey Diagram</label>
  <search id="sankey_search">
    <title>My Title</title>
    <query><![CDATA[
      index=* rename src as from dst as to | stats count by from to | head 20
    ]]>
    </query>
    <earliest>1</earliest>
    <latest>now</latest>
  </search>
  <row>
    <panel>
      <html>
                <div id="sankey" class="splunk-view" data-require="app/<app_name>/components/sankey/sankey"
        data-options='{
                            "managerid": "sankey_search",
                            "height": 400
                         }'>
                </div>
            </html>
    </panel>
  </row>
</form>

View solution in original post

0 Karma

lnetto
Engager

Copy the following into your app folder from the examples app:


appserver/static/autodiscover.js
appserver/static/components/d3
appserver/static/components/sankey

Create your dashboard and make sure the "data-require" path references your app. Restart Splunk and clear your cache if needed.

<form script="autodiscover.js">
  <label>Sankey Diagram</label>
  <search id="sankey_search">
    <title>My Title</title>
    <query><![CDATA[
      index=* rename src as from dst as to | stats count by from to | head 20
    ]]>
    </query>
    <earliest>1</earliest>
    <latest>now</latest>
  </search>
  <row>
    <panel>
      <html>
                <div id="sankey" class="splunk-view" data-require="app/<app_name>/components/sankey/sankey"
        data-options='{
                            "managerid": "sankey_search",
                            "height": 400
                         }'>
                </div>
            </html>
    </panel>
  </row>
</form>
0 Karma

DMohn
Motivator

Have you restarted your Splunk instance after moving the files? Changes that invode css and js files generally need a restart to be usable in dashboards.

0 Karma

hylam
Contributor

Don't forget to disable client-side and server-side caches. In chrome go to F12 > Network > Disable cache. On the splunk server edit the appdir/local/web.conf.

==> web.conf <==
[settings]
cacheBytesLimit = 0
cacheEntriesLimit = 0

0 Karma

Julieda
Explorer

Yes, I have restarted Splunk.. Is it necessary to modify the files from the example?

0 Karma

Julieda
Explorer

Update: When clicking on the dashboard I get the following error message:

"XML Syntax Error: error parsing attribute name, line 17, column 9",
which is the following line of code in custom_viz_sankey.xml:

0 Karma
Get Updates on the Splunk Community!

Routing logs with Splunk OTel Collector for Kubernetes

The Splunk Distribution of the OpenTelemetry (OTel) Collector is a product that provides a way to ingest ...

Welcome to the Splunk Community!

(view in My Videos) We're so glad you're here! The Splunk Community is place to connect, learn, give back, and ...

Tech Talk | Elevating Digital Service Excellence: The Synergy of Splunk RUM & APM

Elevating Digital Service Excellence: The Synergy of Real User Monitoring and Application Performance ...