Archive
Highlighted

Dynamically change height of panel in dashboard based on search result

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
Highlighted

Re: Dynamically change height of panel in dashboard based on search result

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>



| eval message="Happy Splunking!!!"


View solution in original post