Dashboards & Visualizations

Dynamically change height of panel in dashboard based on search result

quahfamili
Path Finder

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
1 Solution

niketnilay
Legend

@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

niketnilay
Legend

@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

Did you miss .conf21 Virtual?

Good news! The event's keynotes and many of its breakout sessions are now available online, and still totally FREE!