How to get two custom visualizations in the same d...

luna23 · ‎05-22-2017

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>

luna23 · ‎05-23-2017

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>

How to get two custom visualizations in the same dashboard?

Fueling your curiosity with new Splunk ILT and eLearning courses

Splunk AI Assistant for SPL 1.1.0 | Now Personalized to Your Environment for Greater ...

Unleash Unified Security and Observability with Splunk Cloud Platform