Dashboards & Visualizations
×

Join the Conversation

Without signing in, you're just watching from the sidelines. Sign in or Register to connect, share, and be part of the Splunk Community.
Ask a Question

How to get two custom visualizations in the same dashboard?

luna23
Explorer
‎05-22-2017 02:16 PM

Hi i'm trying to get two custom visualizations in one single dashboard, but there seems to be a problem to load the two html elements using the same splunk_view class.

<form script="custom_vizs:autodiscover.js, custom_vizs:viz_bubblechart.js">
  <label>2 classes</label>
  <fieldset submitButton="false" autoRun="true">
    <input type="time" searchWhenChanged="true">
      <default>
        <earliest>-24h@h</earliest>
        <latest>now</latest>
      </default>
    </input>
    <input type="text" token="term" id="input_term"/>
    <input type="text" token="category" id="input_category"/>
  </fieldset>
  <row>
    <panel>
      <html>
        <h2>Top 30 Most Common Terms in an Ad-hoc Search Query (drilldown)</h2>
        <div id="bubblechart_search" class="splunk-manager" data-require="splunkjs/mvc/searchmanager" data-options='{
          "preview": true,
          "search": "index=_audit NOT REST: search=* | regex search_id=\"&apos;\\d+\\.\\d+&apos;\" | rex field=search max_match=0 \"(?<terms>\\w+)\" | eval terms=mvdedup(terms) | top limit=30 terms | lookup search_commands.csv search_command AS terms OUTPUT search_command | eval type=case(isnum(terms), \"number\", isnotnull(search_command), \"command\", 1=1, \"word\") | eval terms=if(isnum(terms), \"\\\"\"+terms+\"\\\"\", terms)",
          "earliest_time": {
            "type": "token_safe",
            "value": "$$earliest$$"
            },
          "latest_time": {
            "type": "token_safe",
            "value": "$$latest$$"
          }
        }'>
        </div>
        <div id="bubblechart" class="splunk-view" data-require="app/custom_vizs/components/bubblechart/bubblechart" data-options='{
          "managerid": "bubblechart_search",
          "nameField": "terms",
          "valueField": "count",
          "categoryField": "type",
          "height": 600
        }'>
        </div>
      </html>
    </panel>
  </row>
  <row>
    <panel>
      <chart id="timechart" depends="$term$">
        <title>Term: $term$ - Type: $category$</title>
        <search>
          <query>index=_audit NOT REST: "$term$" search=* | regex search_id="'\\d+\\.\\d+'" | rex field=search max_match=0 "(?&lt;terms&gt;\w+)" | search terms="$term$" | timechart count</query>
          <earliest>$earliest$</earliest>
          <latest>$latest$</latest>
        </search>
      </chart>
    </panel>
  </row>
  <row>
    <panel>
      <table>
        <title>Bubble Chart Search Results</title>
        <search base="bubblechart_search"/>
      </table>
    </panel>
  </row>

   <row>
    <panel>
      <html>
        <h2>All Splunk Internal Events by Index Sourcetype and Source</h2>
        <div id="dendrogram_search" class="splunk-manager" data-require="splunkjs/mvc/searchmanager" data-options='{
          "search": {
            "type": "token_safe",
            "value": "| tstats count where index=_* by index sourcetype source"
          },
          "preview": true,
          "earliest_time": {
            "type": "token_safe",
            "value": "$$earliest$$"
          },
          "latest_time": {
            "type": "token_safe",
            "value": "$$latest$$"
          }
        }'>
        </div>
        <div id="dendrogram" class="splunk-view" data-require="app/custom_vizs/components/dendrogram/dendrogram" data-options='{
          "managerid": "dendrogram_search",
          "root_label": "Index",
          "margin_left": 200,
          "margin_right": 0
        }'>
        </div>
      </html>
    </panel>
  </row>
  <row>
    <panel>
      <table>
        <title>Dendrogram Search Results</title>
        <search base="dendrogram_search"/>
      </table>
    </panel>
  </row>
</form>
0 Karma
Reply

luna23
Explorer
‎05-23-2017 08:35 AM

I find a solution , but i still not understanding why it works.
I changed the paths for the data-required in both charts

<div id="bubblechart" class="splunk-view" data-require="app/search/components/bubblechart/bubblechart"......
<div id="dendrogram" class="splunk-view" data-require="app/custom_vizs/components/dendrogram/dendrogram"

<form script="autodiscover.js">
  <label>2 classes</label>
  <fieldset submitButton="false" autoRun="true">
    <input type="time" searchWhenChanged="true">
      <default>
        <earliest>-24h@h</earliest>
        <latest>now</latest>
      </default>
    </input>
    <input type="text" token="term" id="input_term"/>
    <input type="text" token="category" id="input_category"/>
  </fieldset>
  <row>
    <panel>
      <html>
        <h2>Top 30 Most Common Terms in an Ad-hoc Search Query (drilldown)</h2>
        <div id="bubblechart_search" class="splunk-manager" data-require="splunkjs/mvc/searchmanager" data-options='{
          "preview": true,
          "search": "index=_audit NOT REST: search=* | regex search_id=\"&apos;\\d+\\.\\d+&apos;\" | rex field=search max_match=0 \"(?&lt;terms&gt;\\w+)\" | eval terms=mvdedup(terms) | top limit=30 terms | lookup search_commands.csv search_command AS terms OUTPUT search_command | eval type=case(isnum(terms), \"number\", isnotnull(search_command), \"command\", 1=1, \"word\") | eval terms=if(isnum(terms), \"\\\"\"+terms+\"\\\"\", terms)",
          "earliest_time": {
            "type": "token_safe",
            "value": "$$earliest$$"
            },
          "latest_time": {
            "type": "token_safe",
            "value": "$$latest$$"
          }
        }'>
        </div>
        <div id="bubblechart" class="splunk-view" data-require="app/search/components/bubblechart/bubblechart" data-options='{
          "managerid": "bubblechart_search",
          "nameField": "terms",
          "valueField": "count",
          "categoryField": "type",
          "height": 600
        }'>
        </div>
      </html>
    </panel>
  </row>
  <row>
    <panel>
      <chart id="timechart" depends="$term$">
        <title>Term: $term$ - Type: $category$</title>
        <search>
          <query>index=_audit NOT REST: "$term$" search=* | regex search_id="'\\d+\\.\\d+'" | rex field=search max_match=0 "(?&lt;terms&gt;\w+)" | search terms="$term$" | timechart count</query>
          <earliest>$earliest$</earliest>
          <latest>$latest$</latest>
        </search>
      </chart>
    </panel>
  </row>
  <row>
    <panel>
      <table>
        <title>Bubble Chart Search Results</title>
        <search base="bubblechart_search"/>
      </table>
    </panel>
  </row>

   <row>
    <panel>
      <html>
        <h2>All Splunk Internal Events by Index Sourcetype and Source</h2>
        <div id="dendrogram_search" class="splunk-manager" data-require="splunkjs/mvc/searchmanager" data-options='{
          "search": {
            "type": "token_safe",
            "value": "| tstats count where index=_* by index sourcetype source"
          },
          "preview": true,
          "earliest_time": {
            "type": "token_safe",
            "value": "$$earliest$$"
          },
          "latest_time": {
            "type": "token_safe",
            "value": "$$latest$$"
          }
        }'>
        </div>
        <div id="dendrogram" class="splunk-view" data-require="app/custom_vizs/components/dendrogram/dendrogram" data-options='{
          "managerid": "dendrogram_search",
          "root_label": "Index",
          "margin_left": 200,
          "margin_right": 0
        }'>
        </div>
      </html>
    </panel>
  </row>
  <row>
    <panel>
      <table>
        <title>Dendrogram Search Results</title>
        <search base="dendrogram_search"/>
      </table>
    </panel>
  </row>
</form>
0 Karma
Reply
Got questions? Get answers!

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Meet up IRL or virtually!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

Get Updates on the Splunk Community!

[Puzzles] Solve, Learn, Repeat: Matching cron expressions

This puzzle (first published here) is based on matching timestamps to cron expressions.All the timestamps ...

Design, Compete, Win: Submit Your Best Splunk Dashboards for a .conf26 Pass

Hello Splunkers,  We’re excited to kick off a Splunk Dashboard contest! We know that dashboards are a primary ...

May 2026 Splunk Expert Sessions: Security & Observability

Level Up Your Operations: May 2026 Splunk Expert Sessions Whether you are refining your security posture or ...