Dashboards & Visualizations
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
Ask a Question
Solved! Jump to solution

Dynamically change height of panel in dashboard based on search result

quahfamili
Path Finder
‎11-22-2017 06:51 PM

Hi all,

I'm doing a bar chart in a dashboard. I'm using the multi-series mode and set the limit of the chart to 50.

I m wonder if there is possibility for me to dynamically change the height of the panel based on the number of items I have on the y-axis. Since once the items hits 15, the multi-series chart is not displaying the result.

Regards

0 Karma
Reply
1 Solution
Solved! Jump to solution
Solution

niketn
Legend
‎11-23-2017 07:57 AM

@quahfamili, Please try the following run anywhere dashboard.

Since you want to dynamically decide the height of panel based on number of results, I have coded <done> Search Event Handler in Simple XML to set the height token based on number of results as captured by default search token $job.resultCount$> I have set couple of other tokens just for example to show/hide chart based on whether results are returned or not and also the number of results returned so that we can understand how height is changing with results. I have created four conditions for height, you may refine as per your need.

       <done>
         <!-- No Results unset showChart token to hide panel height is set to 200 but it will not be displayed -->
         <condition match="$job.resultCount$==0">
           <unset token="showChart"></unset>
           <set token="tokResultCount">0</set>
           <set token="tokPanelHeight">200</set>
         </condition>
         <!-- Results between 0 to 20. height is set to 400 -->
         <condition match="$job.resultCount$<=20">
           <set token="showChart">true</set>
           <set token="tokResultCount">$job.resultCount$</set>
           <set token="tokPanelHeight">400</set>
         </condition>
         <!-- Results between 20 to 40. height is set to 800 -->
         <condition match="$job.resultCount$>20 AND $job.resultCount$<40 ">
           <set token="showChart">true</set>
           <set token="tokResultCount">$job.resultCount$</set>
           <set token="tokPanelHeight">800</set>
         </condition>            
         <!-- Results above 40. height is set to 1200 -->
         <condition>
           <set token="showChart">true</set>
           <set token="tokResultCount">$job.resultCount$</set>
           <set token="tokPanelHeight">1200</set>              
         </condition>
       </done>

Please find the complete run anywhere Simple XML dashboard code for your reference. Please try out and confirm.

<form>
  <label>Dynamic Limit on Height</label>
  <fieldset submitButton="false"></fieldset>
  <row>
    <panel>
      <input type="time" token="tokTime">
        <label></label>
        <default>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </default>
      </input>
      <html rejects="$showChart$">
        <div style="color:red;font-weight:bold;text-align:center;font-size:150%">No Results Found... Increase Search Time span</div>
      </html>
      <chart depends="$showChart$">
        <title>Result Count: $tokResultCount$ - Height: $tokPanelHeight$</title>
        <search>
          <query>index=_internal sourcetype=splunkd log_level!=INFO
|  chart count by component log_level useother=f limit=50
|  sort - count
|  head 50</query>
          <earliest>$tokTime.earliest$</earliest>
          <latest>$tokTime.latest$</latest>
          <sampleRatio>1</sampleRatio>
          <done>
            <condition match="$job.resultCount$==0">
              <unset token="showChart"></unset>
              <set token="tokResultCount">0</set>
              <set token="tokPanelHeight">200</set>
            </condition>
            <condition match="$job.resultCount$<=20">
              <set token="showChart">true</set>
              <set token="tokResultCount">$job.resultCount$</set>
              <set token="tokPanelHeight">400</set>
            </condition>
            <condition match="$job.resultCount$>20 AND $job.resultCount$<40 ">
              <set token="showChart">true</set>
              <set token="tokResultCount">$job.resultCount$</set>
              <set token="tokPanelHeight">800</set>
            </condition>            
            <condition>
              <set token="showChart">true</set>
              <set token="tokResultCount">$job.resultCount$</set>
              <set token="tokPanelHeight">1200</set>              
            </condition>
          </done>
        </search>
        <option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
        <option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option>
        <option name="charting.axisTitleX.visibility">visible</option>
        <option name="charting.axisTitleY.visibility">visible</option>
        <option name="charting.axisTitleY2.visibility">visible</option>
        <option name="charting.axisX.abbreviation">none</option>
        <option name="charting.axisX.scale">linear</option>
        <option name="charting.axisY.abbreviation">none</option>
        <option name="charting.axisY.scale">linear</option>
        <option name="charting.axisY2.abbreviation">none</option>
        <option name="charting.axisY2.enabled">0</option>
        <option name="charting.axisY2.scale">inherit</option>
        <option name="charting.chart">bar</option>
        <option name="charting.chart.bubbleMaximumSize">50</option>
        <option name="charting.chart.bubbleMinimumSize">10</option>
        <option name="charting.chart.bubbleSizeBy">area</option>
        <option name="charting.chart.nullValueMode">gaps</option>
        <option name="charting.chart.showDataLabels">none</option>
        <option name="charting.chart.sliceCollapsingThreshold">0.01</option>
        <option name="charting.chart.stackMode">default</option>
        <option name="charting.chart.style">shiny</option>
        <option name="charting.drilldown">none</option>
        <option name="charting.layout.splitSeries">1</option>
        <option name="charting.layout.splitSeries.allowIndependentYRanges">0</option>
        <option name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</option>
        <option name="charting.legend.mode">standard</option>
        <option name="charting.legend.placement">right</option>
        <option name="charting.lineWidth">2</option>
        <option name="height">$tokPanelHeight$</option>
        <option name="refresh.display">progressbar</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
      </chart>
    </panel>
  </row>
</form>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

Reply
Solved! Jump to solution
Solution

niketn
Legend
‎11-23-2017 07:57 AM

@quahfamili, Please try the following run anywhere dashboard.

Since you want to dynamically decide the height of panel based on number of results, I have coded <done> Search Event Handler in Simple XML to set the height token based on number of results as captured by default search token $job.resultCount$> I have set couple of other tokens just for example to show/hide chart based on whether results are returned or not and also the number of results returned so that we can understand how height is changing with results. I have created four conditions for height, you may refine as per your need.

       <done>
         <!-- No Results unset showChart token to hide panel height is set to 200 but it will not be displayed -->
         <condition match="$job.resultCount$==0">
           <unset token="showChart"></unset>
           <set token="tokResultCount">0</set>
           <set token="tokPanelHeight">200</set>
         </condition>
         <!-- Results between 0 to 20. height is set to 400 -->
         <condition match="$job.resultCount$<=20">
           <set token="showChart">true</set>
           <set token="tokResultCount">$job.resultCount$</set>
           <set token="tokPanelHeight">400</set>
         </condition>
         <!-- Results between 20 to 40. height is set to 800 -->
         <condition match="$job.resultCount$>20 AND $job.resultCount$<40 ">
           <set token="showChart">true</set>
           <set token="tokResultCount">$job.resultCount$</set>
           <set token="tokPanelHeight">800</set>
         </condition>            
         <!-- Results above 40. height is set to 1200 -->
         <condition>
           <set token="showChart">true</set>
           <set token="tokResultCount">$job.resultCount$</set>
           <set token="tokPanelHeight">1200</set>              
         </condition>
       </done>

Please find the complete run anywhere Simple XML dashboard code for your reference. Please try out and confirm.

<form>
  <label>Dynamic Limit on Height</label>
  <fieldset submitButton="false"></fieldset>
  <row>
    <panel>
      <input type="time" token="tokTime">
        <label></label>
        <default>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </default>
      </input>
      <html rejects="$showChart$">
        <div style="color:red;font-weight:bold;text-align:center;font-size:150%">No Results Found... Increase Search Time span</div>
      </html>
      <chart depends="$showChart$">
        <title>Result Count: $tokResultCount$ - Height: $tokPanelHeight$</title>
        <search>
          <query>index=_internal sourcetype=splunkd log_level!=INFO
|  chart count by component log_level useother=f limit=50
|  sort - count
|  head 50</query>
          <earliest>$tokTime.earliest$</earliest>
          <latest>$tokTime.latest$</latest>
          <sampleRatio>1</sampleRatio>
          <done>
            <condition match="$job.resultCount$==0">
              <unset token="showChart"></unset>
              <set token="tokResultCount">0</set>
              <set token="tokPanelHeight">200</set>
            </condition>
            <condition match="$job.resultCount$<=20">
              <set token="showChart">true</set>
              <set token="tokResultCount">$job.resultCount$</set>
              <set token="tokPanelHeight">400</set>
            </condition>
            <condition match="$job.resultCount$>20 AND $job.resultCount$<40 ">
              <set token="showChart">true</set>
              <set token="tokResultCount">$job.resultCount$</set>
              <set token="tokPanelHeight">800</set>
            </condition>            
            <condition>
              <set token="showChart">true</set>
              <set token="tokResultCount">$job.resultCount$</set>
              <set token="tokPanelHeight">1200</set>              
            </condition>
          </done>
        </search>
        <option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
        <option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option>
        <option name="charting.axisTitleX.visibility">visible</option>
        <option name="charting.axisTitleY.visibility">visible</option>
        <option name="charting.axisTitleY2.visibility">visible</option>
        <option name="charting.axisX.abbreviation">none</option>
        <option name="charting.axisX.scale">linear</option>
        <option name="charting.axisY.abbreviation">none</option>
        <option name="charting.axisY.scale">linear</option>
        <option name="charting.axisY2.abbreviation">none</option>
        <option name="charting.axisY2.enabled">0</option>
        <option name="charting.axisY2.scale">inherit</option>
        <option name="charting.chart">bar</option>
        <option name="charting.chart.bubbleMaximumSize">50</option>
        <option name="charting.chart.bubbleMinimumSize">10</option>
        <option name="charting.chart.bubbleSizeBy">area</option>
        <option name="charting.chart.nullValueMode">gaps</option>
        <option name="charting.chart.showDataLabels">none</option>
        <option name="charting.chart.sliceCollapsingThreshold">0.01</option>
        <option name="charting.chart.stackMode">default</option>
        <option name="charting.chart.style">shiny</option>
        <option name="charting.drilldown">none</option>
        <option name="charting.layout.splitSeries">1</option>
        <option name="charting.layout.splitSeries.allowIndependentYRanges">0</option>
        <option name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</option>
        <option name="charting.legend.mode">standard</option>
        <option name="charting.legend.placement">right</option>
        <option name="charting.lineWidth">2</option>
        <option name="height">$tokPanelHeight$</option>
        <option name="refresh.display">progressbar</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
      </chart>
    </panel>
  </row>
</form>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
Reply
Get Updates on the Splunk Community!

Introducing Splunk Enterprise 9.2

WATCH HERE! Watch this Tech Talk to learn about the latest features and enhancements shipped in the new Splunk ...

Adoption of RUM and APM at Splunk

    Unleash the power of Splunk Observability   Watch Now In this can't miss Tech Talk! The Splunk Growth ...

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 ...