Splunk Search

set a column's max-width in a chart

RiccardoV
Communicator

chart

Hi, I have a JSChart like this and I want to set a max width for graph's column.
I want to avoid this huge column when I have only one (or two or three..) results.
Is it possible? I read the reference here with no success.

thanks!

niketn
Legend

@RiccardoV, Chart Width can be set based on Number of Results.

Following is the range used for setting width depending on number of results in the Timechart (using <done> search event handler with predefined search job token $job.resultCount$)

1) 0 Results : 100% Width (No Results Found Message... Better use case is to hide Chart and Display html panel with custom message using depends and rejects.).
2) 1 - 5 Results: 30% Width
3) 5 - 25 Results: 50% Width
4) 25 - 100 Results: 75% Width
5) >100 Results: 100% Width
PS: As you can see ranges can be modified as per need. Run anywhere search uses timechart command on Splunk's _internal index with cont=f for generating data only for time bucket where events are present. First example shows 30% chart Width instead of 100% when timechart produces Single result.

alt text

Following is the Simple XML Code for attached screenshot:

<form>
  <label>Chart Width Based on Number of Results</label>
  <fieldset submitButton="false"></fieldset>
  <row>
    <panel>
      <html>
        <style>
          #myChart1{
            width:$tokChart1Width$ !important;
          }
        </style>
      </html>
      <input type="time" token="tokTime">
        <label></label>
        <default>
          <earliest>-1s@s</earliest>
          <latest>now</latest>
        </default>
      </input>
      <chart id="myChart1">
        <title>tokChart1Width: $tokChart1Width$</title>
        <search>
          <query>index=_internal sourcetype=splunkd log_level="INFO"
| timechart count cont=f</query>
          <earliest>$tokTime.earliest$</earliest>
          <latest>$tokTime.latest$</latest>
          <sampleRatio>1</sampleRatio>
          <done>
            <condition match="$job.resultCount$==0">
              <!-- 0 Results Found. Better use case is to unset the token and show HTML panel with Custom Message -->
              <set token="tokChart1Width">100%</set>
            </condition>
            <condition match="$job.resultCount$>0 AND $job.resultCount$<=5">
              <!-- 1-5 Results. Chart Width 30% -->
              <set token="tokChart1Width">30%</set>
            </condition>
            <condition match="$job.resultCount$>5 AND $job.resultCount$<=25">
              <!-- 5-25 Results. Chart Width 50% -->
              <set token="tokChart1Width">50%</set>
            </condition>
            <condition match="$job.resultCount$>25 AND $job.resultCount$<=100">
              <!-- 25-100 Results. Chart Width 75% -->
              <set token="tokChart1Width">75%</set>
            </condition>
            <condition match="$job.resultCount$>100">
              <!-- >100 Results. Chart Width 100% -->
              <set token="tokChart1Width">100%</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">column</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">minimal</option>
        <option name="charting.drilldown">none</option>
        <option name="charting.layout.splitSeries">0</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="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!!!"
0 Karma

Lazarix
Communicator

Best thing i've found in these situations is to add an empty panel, or two empty panels to the same row.

<panel>
  <html>
    <u1> </u1>
  </html>
</panel>

Below is an image example of 1 row with a chart, and a second row with blank panels added along with the same chart.

alt text

0 Karma

RiccardoV
Communicator

I want to avoid to use flashchart..

0 Karma

chillao123
Explorer

I converted to flashchart in AdvancedXML and was able to set width.

RiccardoV
Communicator

no, sorry 😞

0 Karma

chillao123
Explorer

Hi Riccardo, Were you able to solve this?

0 Karma
Get Updates on the Splunk Community!

How to Monitor Google Kubernetes Engine (GKE)

We’ve looked at how to integrate Kubernetes environments with Splunk Observability Cloud, but what about ...

Index This | How can you make 45 using only 4?

October 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with this ...

Splunk Education Goes to Washington | Splunk GovSummit 2024

If you’re in the Washington, D.C. area, this is your opportunity to take your career and Splunk skills to the ...