Dashboards & Visualizations

How to stack two data element visualizations?

jaj
Path Finder

how an i stack two elements within a panel?

<form>
  <row>
    <panel>
       <single>
           ...single value...(the white one in the screenshot below)...
       </single>
    </panel>
    <panel>
        <!-- what block element can I wrap each single to stack instead of horizontally aligning? -->
       <single>
           ...single value...(the green one in screenshot below)
       </single>
       <single>
           ...single value...(the gray one in the screenshot below)
       <single/>
   </panel>
  </row>
</form>

Please note these are <single> elements and NOT <chart>'s, etc,. I cannot get the following items to stack with splunk's layout system and cannot wrap in more panels or rows.

alt text

Like this:
alt text

Tags (4)
0 Karma
1 Solution

@jaj You can use Simple XML CSS extension to format the panels as per your needs. Try the following run anywhere dashboard.

First option used Three <single> value Panels where Panel 1 is on left and remaining two panels i.e. Panel 2 and Panel 3 are stacked on top of each other on the right.

Second option uses <html> panels with <div> sections created as per needs and creates similar layout.

alt text

<form>
  <label>Single Value Multiple Rows</label>
  <!-- Option 1 Using single value panels and CSS Override -->
  <!-- Option 2: Using HTML Panels to Create Stacked View -->
  <fieldset submitButton="false">
    <input type="time" token="tokTime" searchWhenChanged="true">
      <label></label>
      <default>
        <earliest>-7d@w0</earliest>
        <latest>@w0</latest>
      </default>
    </input>
  </fieldset>
  <row>
    <panel id="panel1">
      <html depends="$alwaysHideCSSPanel$">
        <style>
          #panelWithGridLayout .panel-element-row{
            display: grid;
          }
          #panel1 #singlevalue.viz-controller,
          #panel1 div.splunk-single div.ui-resizable{
            height: 230px !important;
          }
          #singleStacked1 .dashboard-element-body,
          #singleStacked2 .dashboard-element-body{
            width: 200% !important;
          }
        </style>
      </html>
      <single>
        <search>
          <!-- Following section sets Single Value token for Option 2 using html panel -->
          <progress>
            <set token="tokSingleResult1">$result.INFO$</set>
          </progress>
          <query>index="_internal" sourcetype=splunkd log_level=INFO
| timechart count as INFO</query>
          <earliest>$tokTime.earliest$</earliest>
          <latest>$tokTime.latest$</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="colorBy">trend</option>
        <option name="colorMode">block</option>
        <option name="drilldown">none</option>
        <option name="numberPrecision">0</option>
        <option name="rangeColors">["0x53a051","0x0877a6","0xf8be34","0xf1813f","0xdc4e41"]</option>
        <option name="rangeValues">[0,30,70,100]</option>
        <option name="refresh.display">progressbar</option>
        <option name="showSparkline">1</option>
        <option name="showTrendIndicator">1</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
        <option name="trendColorInterpretation">standard</option>
        <option name="trendDisplayMode">absolute</option>
        <option name="underLabel">INFO</option>
        <option name="unitPosition">after</option>
        <option name="useColors">1</option>
        <option name="useThousandSeparators">1</option>
      </single>
    </panel>
    <panel id="panelWithGridLayout">
      <single id="singleStacked1">
        <search>
          <!-- Following section sets Single Value token for Option 2 using html panel -->
          <progress>
            <set token="tokSingleResult2">$result.ERROR$</set>
          </progress>
          <query>index="_internal" sourcetype=splunkd log_level=ERROR
| timechart count as ERROR</query>
          <earliest>$tokTime.earliest$</earliest>
          <latest>$tokTime.latest$</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="colorBy">trend</option>
        <option name="colorMode">block</option>
        <option name="drilldown">none</option>
        <option name="numberPrecision">0</option>
        <option name="rangeColors">["0x53a051","0x0877a6","0xf8be34","0xf1813f","0xdc4e41"]</option>
        <option name="rangeValues">[0,30,70,100]</option>
        <option name="refresh.display">progressbar</option>
        <option name="showSparkline">1</option>
        <option name="showTrendIndicator">1</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
        <option name="trendColorInterpretation">standard</option>
        <option name="trendDisplayMode">absolute</option>
        <option name="underLabel">ERROR</option>
        <option name="unitPosition">after</option>
        <option name="useColors">1</option>
        <option name="useThousandSeparators">1</option>
      </single>
      <single id="singleStacked2">
        <search>
          <!-- Following section sets Single Value token for Option 2 using html panel -->
          <progress>
            <set token="tokSingleResult3">$result.WARN$</set>
          </progress>
          <query>index="_internal" sourcetype=splunkd log_level=WARN
| timechart count as WARN</query>
          <earliest>$tokTime.earliest$</earliest>
          <latest>$tokTime.latest$</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="colorBy">trend</option>
        <option name="colorMode">block</option>
        <option name="drilldown">none</option>
        <option name="numberPrecision">0</option>
        <option name="rangeColors">["0x53a051","0x0877a6","0xf8be34","0xf1813f","0xdc4e41"]</option>
        <option name="rangeValues">[0,30,70,100]</option>
        <option name="refresh.display">progressbar</option>
        <option name="showSparkline">1</option>
        <option name="showTrendIndicator">1</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
        <option name="trendColorInterpretation">standard</option>
        <option name="trendDisplayMode">absolute</option>
        <option name="underLabel">WARN</option>
        <option name="unitPosition">after</option>
        <option name="useColors">1</option>
        <option name="useThousandSeparators">1</option>
      </single>
    </panel>
  </row>
  <row>
    <panel>
      <html id="htmlPanel">
        <style>
          #htmlPanel div#container{
            display:flex;
          }
          #htmlPanel div#firstRowDiv{
            width: 50%;
            text-align: center;
            padding-top: 20px;
          }
          #htmlPanel div#secondRowDiv,
          #htmlPanel div#secondRowDiv{
            width: 50%;
            text-align: center;
          }
          #htmlPanel div[id$="PanelDiv"] p{
            font-weight: bold;
            font-size: xx-large;
          }
        </style>
        <div id="container">
          <div id="firstRowDiv">
            <div id="firstPanelDiv">
              <p>$tokSingleResult1$</p>
            </div>
          </div>
          <div id="secondRowDiv">
            <div id="secondPanelDiv">
              <p>$tokSingleResult2$</p>
            </div>
            <div id="thirdPanelDiv">
              <p>$tokSingleResult3$</p>
            </div>
          </div>
        </div>
      </html>
    </panel>
  </row>
</form>

Please try out and confirm.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

@jaj You can use Simple XML CSS extension to format the panels as per your needs. Try the following run anywhere dashboard.

First option used Three <single> value Panels where Panel 1 is on left and remaining two panels i.e. Panel 2 and Panel 3 are stacked on top of each other on the right.

Second option uses <html> panels with <div> sections created as per needs and creates similar layout.

alt text

<form>
  <label>Single Value Multiple Rows</label>
  <!-- Option 1 Using single value panels and CSS Override -->
  <!-- Option 2: Using HTML Panels to Create Stacked View -->
  <fieldset submitButton="false">
    <input type="time" token="tokTime" searchWhenChanged="true">
      <label></label>
      <default>
        <earliest>-7d@w0</earliest>
        <latest>@w0</latest>
      </default>
    </input>
  </fieldset>
  <row>
    <panel id="panel1">
      <html depends="$alwaysHideCSSPanel$">
        <style>
          #panelWithGridLayout .panel-element-row{
            display: grid;
          }
          #panel1 #singlevalue.viz-controller,
          #panel1 div.splunk-single div.ui-resizable{
            height: 230px !important;
          }
          #singleStacked1 .dashboard-element-body,
          #singleStacked2 .dashboard-element-body{
            width: 200% !important;
          }
        </style>
      </html>
      <single>
        <search>
          <!-- Following section sets Single Value token for Option 2 using html panel -->
          <progress>
            <set token="tokSingleResult1">$result.INFO$</set>
          </progress>
          <query>index="_internal" sourcetype=splunkd log_level=INFO
| timechart count as INFO</query>
          <earliest>$tokTime.earliest$</earliest>
          <latest>$tokTime.latest$</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="colorBy">trend</option>
        <option name="colorMode">block</option>
        <option name="drilldown">none</option>
        <option name="numberPrecision">0</option>
        <option name="rangeColors">["0x53a051","0x0877a6","0xf8be34","0xf1813f","0xdc4e41"]</option>
        <option name="rangeValues">[0,30,70,100]</option>
        <option name="refresh.display">progressbar</option>
        <option name="showSparkline">1</option>
        <option name="showTrendIndicator">1</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
        <option name="trendColorInterpretation">standard</option>
        <option name="trendDisplayMode">absolute</option>
        <option name="underLabel">INFO</option>
        <option name="unitPosition">after</option>
        <option name="useColors">1</option>
        <option name="useThousandSeparators">1</option>
      </single>
    </panel>
    <panel id="panelWithGridLayout">
      <single id="singleStacked1">
        <search>
          <!-- Following section sets Single Value token for Option 2 using html panel -->
          <progress>
            <set token="tokSingleResult2">$result.ERROR$</set>
          </progress>
          <query>index="_internal" sourcetype=splunkd log_level=ERROR
| timechart count as ERROR</query>
          <earliest>$tokTime.earliest$</earliest>
          <latest>$tokTime.latest$</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="colorBy">trend</option>
        <option name="colorMode">block</option>
        <option name="drilldown">none</option>
        <option name="numberPrecision">0</option>
        <option name="rangeColors">["0x53a051","0x0877a6","0xf8be34","0xf1813f","0xdc4e41"]</option>
        <option name="rangeValues">[0,30,70,100]</option>
        <option name="refresh.display">progressbar</option>
        <option name="showSparkline">1</option>
        <option name="showTrendIndicator">1</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
        <option name="trendColorInterpretation">standard</option>
        <option name="trendDisplayMode">absolute</option>
        <option name="underLabel">ERROR</option>
        <option name="unitPosition">after</option>
        <option name="useColors">1</option>
        <option name="useThousandSeparators">1</option>
      </single>
      <single id="singleStacked2">
        <search>
          <!-- Following section sets Single Value token for Option 2 using html panel -->
          <progress>
            <set token="tokSingleResult3">$result.WARN$</set>
          </progress>
          <query>index="_internal" sourcetype=splunkd log_level=WARN
| timechart count as WARN</query>
          <earliest>$tokTime.earliest$</earliest>
          <latest>$tokTime.latest$</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="colorBy">trend</option>
        <option name="colorMode">block</option>
        <option name="drilldown">none</option>
        <option name="numberPrecision">0</option>
        <option name="rangeColors">["0x53a051","0x0877a6","0xf8be34","0xf1813f","0xdc4e41"]</option>
        <option name="rangeValues">[0,30,70,100]</option>
        <option name="refresh.display">progressbar</option>
        <option name="showSparkline">1</option>
        <option name="showTrendIndicator">1</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
        <option name="trendColorInterpretation">standard</option>
        <option name="trendDisplayMode">absolute</option>
        <option name="underLabel">WARN</option>
        <option name="unitPosition">after</option>
        <option name="useColors">1</option>
        <option name="useThousandSeparators">1</option>
      </single>
    </panel>
  </row>
  <row>
    <panel>
      <html id="htmlPanel">
        <style>
          #htmlPanel div#container{
            display:flex;
          }
          #htmlPanel div#firstRowDiv{
            width: 50%;
            text-align: center;
            padding-top: 20px;
          }
          #htmlPanel div#secondRowDiv,
          #htmlPanel div#secondRowDiv{
            width: 50%;
            text-align: center;
          }
          #htmlPanel div[id$="PanelDiv"] p{
            font-weight: bold;
            font-size: xx-large;
          }
        </style>
        <div id="container">
          <div id="firstRowDiv">
            <div id="firstPanelDiv">
              <p>$tokSingleResult1$</p>
            </div>
          </div>
          <div id="secondRowDiv">
            <div id="secondPanelDiv">
              <p>$tokSingleResult2$</p>
            </div>
            <div id="thirdPanelDiv">
              <p>$tokSingleResult3$</p>
            </div>
          </div>
        </div>
      </html>
    </panel>
  </row>
</form>

Please try out and confirm.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

jaj
Path Finder

@niketnilay wow yes! this is exactly what I was looking for and then some! you are splunk solutions magician! thank you!

alt text

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

@jaj you would need to provide more details on which visualization/s you are planning to plot? For examples two Single Values Stacked on Top of Each other on the left and which visualization/s on the right?

Could you whiteboard/or create a mock of what you need? For the Single Value Viz do you need to show Trendline and/or colors? We would be able to assist if more detail is provided!

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

jaj
Path Finder

hi @niketnilay i just updated my post with visual details

0 Karma

@jaj so you have three value panels and you want them on top of each other? You could just assign them to separate <row><panel>. I am sorry if I misunderstood the question.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

jaj
Path Finder

hi @niketnilay i just want the last two single elements in the second panel to stack on top of each-other. there is no way to achieve this to my knowledge per the standard splunk grid system using additional panel or rows. does this make more sense?

0 Karma

@jaj Do you also have trendline in Single Value Panels?

Is panel1 also <single> value panel?

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

jaj
Path Finder

hi, no trendline....i updated the picture...all components/boxes are <single> elements as shown in the code (so correct panel1 is also single...apologies for the confusion). thx

0 Karma

bangalorep
Communicator
0 Karma

jaj
Path Finder

hi @bangalorep that won't work because the last two elements that are stacked are not <chart> elements. they are <single> and the css (block vs. inline) seems to be different with splunk's grid system.

cc: @niketnilay

0 Karma

ashajambagi
Communicator

Hey @jaj ,

Can you please elaborate more?

0 Karma

jaj
Path Finder

hi @ashajambagi i just updated my post with more info

0 Karma
Get Updates on the Splunk Community!

Splunk Forwarders and Forced Time Based Load Balancing

Splunk customers use universal forwarders to collect and send data to Splunk. A universal forwarder can send ...

NEW! Log Views in Splunk Observability Dashboards Gives Context From a Single Page

Today, Splunk Observability releases log views, a new feature for users to add their logs data from Splunk Log ...

Last Chance to Submit Your Paper For BSides Splunk - Deadline is August 12th!

Hello everyone! Don't wait to submit - The deadline is August 12th! We have truly missed the community so ...