topic Re: Customizable Visualizations in Dashboard in Dashboards & Visualizations

Customizable Visualizations in Dashboard

AshimaE — Tue, 04 Jul 2017 10:01:14 GMT

I wish to design a Search Generator Dashboard which after taking two fields as drop down inputs will give a text box to type a query related to the given inputs and present the results as a panel. How can I do so?(Create a visualization panel as an output for given inputs. Also is it possible to create customizable output i.e.user has a choice to change the type of visuaization for the result).

Thanks in advance.

Re: Customizable Visualizations in Dashboard

adonio — Tue, 04 Jul 2017 12:33:01 GMT

hello @AshimaE,
hope I understand your question.
look at the screenshot of the dashboard i created:

here you have a dropdown to choose from 2 fields, source and sourcetype, and in the text input, you can insert any string you would like. the challenge i found was that you will have to edit visualization based on the search (not sure how and if it can be automated). here table is good but if for example, you will choose the timechart command, table will probably will not be the best viz for you
just in case you are interested, here is the code for this sample:

<form>
  <label>Field and Search Inputs</label>
  <fieldset submitButton="false">
    <input type="time" token="field1">
      <label></label>
      <default>
        <earliest>-24h@h</earliest>
        <latest>now</latest>
      </default>
    </input>
    <input type="dropdown" token="FIELD">
      <label>Choose Field</label>
      <choice value="sourcetype">Sourcetype</choice>
      <choice value="source">Source</choice>
    </input>
    <input type="text" token="COMMAND">
      <label>Enter Your Command</label>
    </input>
  </fieldset>
  <row>
    <panel>
      <table>
        <search>
          <query>index = _internal $FIELD$=* $COMMAND$</query>
          <earliest>$field1.earliest$</earliest>
          <latest>$field1.latest$</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="drilldown">none</option>
      </table>
    </panel>
  </row>
</form>

hope it helps

Re: Customizable Visualizations in Dashboard

niketn — Tue, 04 Jul 2017 13:24:52 GMT

@AshimaE, you would need to add little bit of more details with your use case. What are the values for two dropdown? What kind of query is being formed? Does one dropdown provide query and other visualization? Or is it a combination of both?

In either case you need to code dropdown's change Event Handler to pass on query string and token to show/hide a panel. You might have to unset other tokens to hide unwanted panels. Also you can use these tokens within queries to ensure that hidden panels do not run query in background. However, details will depend on your use case and you need to provide more details as requested for the same.

Following run anywhere example gives a demo of coding change event handler for Drop downs and set/unset tokens. $value$ and $label$ are default Drop down tokens. It further exemplifies the use of depends to hide a panel when the token/s is not set (PS: reverse behavior can be achieved via rejects)

  <fieldset submitButton="false">
    <input type="dropdown" token="field1" searchWhenChanged="true">
      <label>field1</label>
      <choice value="value1">Value 1</choice>
      <choice value="value2">Value 2</choice>
      <choice value="value3">Value 3</choice>
      <change>
        <condition value="value1">
          <set token="query1">| makeresults | eval $label$="$value$"</set>
          <set token="showHTML1">true</set>
          <unset token="showHTML2"></unset>
        </condition>
        <condition value="value2">
          <set token="query1">| makeresults | eval $label$="$value$"</set>          
          <set token="showHTML1">true</set>
          <unset token="showHTML2"></unset>
        </condition>
        <condition value="value3">
          <set token="query1">| makeresults | eval $label$="$value$"</set>          
          <set token="showHTML1">true</set>
          <unset token="showHTML2"></unset>
        </condition>
      </change>
    </input>
    <input type="dropdown" token="field2" searchWhenChanged="true">
      <label>field2</label>
      <choice value="value1">Value 1</choice>
      <choice value="value2">Value 2</choice>
      <choice value="value3">Value 3</choice>
      <change>
        <condition value="value1">
          <set token="query2">| makeresults | eval $label$="$value$"</set>
          <set token="showHTML2">true</set>
          <unset token="showHTML1"></unset>
        </condition>
        <condition value="value2">
          <set token="query2">| makeresults | eval $label$="$value$"</set>
          <set token="showHTML2">true</set>
          <unset token="showHTML1"></unset>
        </condition>    
        <condition value="value3">
          <set token="query2">| makeresults | eval $label$="$value$"</set>
          <set token="showHTML2">true</set>
          <unset token="showHTML1"></unset>
        </condition>  
      </change>
    </input>
  </fieldset>
<row>
  <panel>
    <html depends="$showHTML1$">
      <style>
        .mytitle{
          font-size:150%;
          color:red;
        }
        .myinfo{
          font-size:120%;
          color:blue;
        }
      </style>
      <div class="mytitle">
        HTML Panel 1
      </div>
      <div>
        <p class="myinfo">$query1$</p>
      </div>
    </html>
    <html depends="$showHTML2$">
      <div class="mytitle">
        HTML Panel 2
      </div>
      <div>
        <p class="myinfo">$query2$</p>
      </div>
    </html>
  </panel>
</row>

You can get the Splunk 6.x Dashboard Examples App from Splunkbase to get examples of these and many more. For us to assist please provide more details of your use case.

Re: Customizable Visualizations in Dashboard

niketn — Fri, 07 Jul 2017 17:52:46 GMT

@AshimaE, please confirm whether this helps with your issue or not. Provide us with more details if this is not useful.