Dashboards & Visualizations
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
Ask a Question
Solved! Jump to solution

How to stack two data element visualizations?

jaj
Path Finder
‎01-20-2019 05:14 PM

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)
Preview file
1 KB
Preview file
1 KB
0 Karma
Reply
1 Solution
Solved! Jump to solution
Solution

niketn
Legend
‎01-21-2019 11:10 AM

@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

Preview file
1 KB
Reply
Solved! Jump to solution
Solution

niketn
Legend
‎01-21-2019 11:10 AM

@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!!!"
Preview file
1 KB
Reply
Solved! Jump to solution

jaj
Path Finder
‎01-21-2019 11:17 AM

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

Reply
Solved! Jump to solution

niketn
Legend
‎01-21-2019 11:29 AM

alt text

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma
Reply
Solved! Jump to solution

niketn
Legend
‎01-21-2019 08:17 AM

@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
Reply
Solved! Jump to solution

jaj
Path Finder
‎01-21-2019 08:22 AM

hi @niketnilay i just updated my post with visual details

0 Karma
Reply
Solved! Jump to solution

niketn
Legend
‎01-21-2019 08:38 AM

@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
Reply
Solved! Jump to solution

jaj
Path Finder
‎01-21-2019 08:57 AM

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
Reply
Solved! Jump to solution

niketn
Legend
‎01-21-2019 09:07 AM

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

Is panel1 also <single> value panel?

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma
Reply
Solved! Jump to solution

jaj
Path Finder
‎01-21-2019 09:56 AM

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
Reply
Solved! Jump to solution

bangalorep
Communicator
‎01-21-2019 04:00 AM

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

0 Karma
Reply
Solved! Jump to solution

jaj
Path Finder
‎01-21-2019 08:09 AM

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
Reply
Solved! Jump to solution

ashajambagi
Communicator
‎01-20-2019 10:37 PM

Hey @jaj ,

Can you please elaborate more?

0 Karma
Reply
Solved! Jump to solution

jaj
Path Finder
‎01-21-2019 08:21 AM

hi @ashajambagi i just updated my post with more info

0 Karma
Reply
Get Updates on the Splunk Community!

Webinar Recap | Revolutionizing IT Operations: The Transformative Power of AI and ML ...

The Transformative Power of AI and ML in Enhancing Observability   In the realm of IT operations, the ...

.conf24 | Registration Open!

Hello, hello! I come bearing good news: Registration for .conf24 is now open!   conf is Splunk’s rad annual ...

ICYMI - Check out the latest releases of Splunk Edge Processor

Splunk is pleased to announce the latest enhancements to Splunk Edge Processor.  HEC Receiver authorization ...