topic Re: How to stack two data element visualizations? in Dashboards & Visualizations

How to stack two data element visualizations?

jaj — Mon, 21 Jan 2019 01:14:40 GMT

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.

Like this:

Re: How to stack two data element visualizations?

ashajambagi — Mon, 21 Jan 2019 06:37:01 GMT

Hey @jaj ,

Can you please elaborate more?

Re: How to stack two data element visualizations?

bangalorep — Mon, 21 Jan 2019 12:00:00 GMT

You can check out the final answer from here:
https://answers.splunk.com/answers/584253/isit-possible-to-display-multiple-panels-in-a-spli.html

Re: How to stack two data element visualizations?

jaj — Mon, 21 Jan 2019 16:09:48 GMT

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

Re: How to stack two data element visualizations?

niketn — Mon, 21 Jan 2019 16:17:03 GMT

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

Re: How to stack two data element visualizations?

jaj — Mon, 21 Jan 2019 16:21:55 GMT

hi @ashajambagi i just updated my post with more info

Re: How to stack two data element visualizations?

jaj — Mon, 21 Jan 2019 16:22:38 GMT

hi @niketnilay i just updated my post with visual details

Re: How to stack two data element visualizations?

niketn — Mon, 21 Jan 2019 16:38:59 GMT

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

Re: How to stack two data element visualizations?

jaj — Mon, 21 Jan 2019 16:57:05 GMT

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?

Re: How to stack two data element visualizations?

niketn — Mon, 21 Jan 2019 17:07:47 GMT

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

Is panel1 also <single> value panel?

Re: How to stack two data element visualizations?

jaj — Mon, 21 Jan 2019 17:56:17 GMT

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

Re: How to stack two data element visualizations?

niketn — Mon, 21 Jan 2019 19:10:31 GMT

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

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

Re: How to stack two data element visualizations?

jaj — Mon, 21 Jan 2019 19:17:43 GMT

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

Re: How to stack two data element visualizations?

niketn — Mon, 21 Jan 2019 19:29:36 GMT