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

niketn
Legend

@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

niketn
Legend

@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!

niketn
Legend

alt text

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

niketn
Legend

@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

niketn
Legend

@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

niketn
Legend

@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!

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

March Community Office Hours Security Series Uncovered!

Hello Splunk Community! In March, Splunk Community Office Hours spotlighted our fabulous Splunk Threat ...

Stay Connected: Your Guide to April Tech Talks, Office Hours, and Webinars!

Take a look below to explore our upcoming Community Office Hours, Tech Talks, and Webinars in April. This post ...