Solved: How to merge the single viz and table vis in same ...

kartm2020 · ‎12-11-2022

Hi,

Can someone help me to provide the solution same as like in attached image.

bowesmana · ‎12-11-2022

My take on your rather brief question is

a) wider table than single value viz
b) multiple single values, stacked horizontally/vertically

See this example - it makes the table width 70% and the SV panel 30%.

The multiple SV visualisations are stacked horizontally by default, but the empty HTML viz in the middle of the 4 will break the next SV onto a new row.

<dashboard>
  <label>Panel Width</label>
  <row depends="$showformat$">
    <panel>
      <html>
      <style>
        #example_id .dashboard-cell:nth-child(1) {
          width:70% !important;
        }
        #example_id .dashboard-cell:nth-child(2) {
          width:30% !important;
        }
      </style>
    </html>
    </panel>
  </row>
  <row id="example_id">
    <panel>
      <title>Status</title>
      <table>
        <search>
          <query>| makeresults count=5
          | fields - _time
          | eval "Out-of-band Managent Address" = (random() % 254 + 1).".".(random() % 254 + 1).".".(random() % 254 + 1).".".(random() % 254 + 1)
          | eval "Fabric MAC address"=printf("%04x%04x%04x", random() % 65536, random() % 65536, random() % 65536)
          | eval name="Name:".(mvindex(split("ABCDEFGHIJKLMNOPQRSTUVWXYZ", ""), random() % 26))
          | eval "APIC Health"="fully-fit"
          | eval "Operational Status"="Available"
          | table "Out-of-band Managent Address" "Fabric MAC address" name "APIC Health" "Operational Status"</query>
          <earliest>$earliest$</earliest>
          <latest>$latest$</latest>
        </search>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
    <panel>
      <single>
        <title>EPG</title>
        <search>
          <query>
          | makeresults
          | eval value=83
          | fields - _time
        </query>
        </search>
        <option name="colorMode">block</option>
        <option name="rangeColors">["0x53a051","0x006d9c"]</option>
        <option name="rangeValues">[0]</option>
        <option name="useColors">1</option>
      </single>
      <single>
        <title>EPG</title>
        <search>
          <query>
          | makeresults
          | eval value=83
          | fields - _time
        </query>
        </search>
        <option name="colorMode">block</option>
        <option name="rangeColors">["0x53a051","0x006d9c"]</option>
        <option name="rangeValues">[0]</option>
        <option name="useColors">1</option>
      </single>
      <html/>
      <single>
        <title>EPG</title>
        <search>
          <query>
          | makeresults
          | eval value=83
          | fields - _time
        </query>
        </search>
        <option name="colorMode">block</option>
        <option name="rangeColors">["0x53a051","0x006d9c"]</option>
        <option name="rangeValues">[0]</option>
        <option name="useColors">1</option>
      </single>
      <single>
        <title>EPG</title>
        <search>
          <query>
          | makeresults
          | eval value=83
          | fields - _time
        </query>
        </search>
        <option name="colorMode">block</option>
        <option name="rangeColors">["0x53a051","0x006d9c"]</option>
        <option name="rangeValues">[0]</option>
        <option name="useColors">1</option>
      </single>
    </panel>
  </row>
</dashboard>

View solution in original post

bowesmana · ‎12-11-2022

My take on your rather brief question is

a) wider table than single value viz
b) multiple single values, stacked horizontally/vertically

See this example - it makes the table width 70% and the SV panel 30%.

The multiple SV visualisations are stacked horizontally by default, but the empty HTML viz in the middle of the 4 will break the next SV onto a new row.

<dashboard>
  <label>Panel Width</label>
  <row depends="$showformat$">
    <panel>
      <html>
      <style>
        #example_id .dashboard-cell:nth-child(1) {
          width:70% !important;
        }
        #example_id .dashboard-cell:nth-child(2) {
          width:30% !important;
        }
      </style>
    </html>
    </panel>
  </row>
  <row id="example_id">
    <panel>
      <title>Status</title>
      <table>
        <search>
          <query>| makeresults count=5
          | fields - _time
          | eval "Out-of-band Managent Address" = (random() % 254 + 1).".".(random() % 254 + 1).".".(random() % 254 + 1).".".(random() % 254 + 1)
          | eval "Fabric MAC address"=printf("%04x%04x%04x", random() % 65536, random() % 65536, random() % 65536)
          | eval name="Name:".(mvindex(split("ABCDEFGHIJKLMNOPQRSTUVWXYZ", ""), random() % 26))
          | eval "APIC Health"="fully-fit"
          | eval "Operational Status"="Available"
          | table "Out-of-band Managent Address" "Fabric MAC address" name "APIC Health" "Operational Status"</query>
          <earliest>$earliest$</earliest>
          <latest>$latest$</latest>
        </search>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
    <panel>
      <single>
        <title>EPG</title>
        <search>
          <query>
          | makeresults
          | eval value=83
          | fields - _time
        </query>
        </search>
        <option name="colorMode">block</option>
        <option name="rangeColors">["0x53a051","0x006d9c"]</option>
        <option name="rangeValues">[0]</option>
        <option name="useColors">1</option>
      </single>
      <single>
        <title>EPG</title>
        <search>
          <query>
          | makeresults
          | eval value=83
          | fields - _time
        </query>
        </search>
        <option name="colorMode">block</option>
        <option name="rangeColors">["0x53a051","0x006d9c"]</option>
        <option name="rangeValues">[0]</option>
        <option name="useColors">1</option>
      </single>
      <html/>
      <single>
        <title>EPG</title>
        <search>
          <query>
          | makeresults
          | eval value=83
          | fields - _time
        </query>
        </search>
        <option name="colorMode">block</option>
        <option name="rangeColors">["0x53a051","0x006d9c"]</option>
        <option name="rangeValues">[0]</option>
        <option name="useColors">1</option>
      </single>
      <single>
        <title>EPG</title>
        <search>
          <query>
          | makeresults
          | eval value=83
          | fields - _time
        </query>
        </search>
        <option name="colorMode">block</option>
        <option name="rangeColors">["0x53a051","0x006d9c"]</option>
        <option name="rangeValues">[0]</option>
        <option name="useColors">1</option>
      </single>
    </panel>
  </row>
</dashboard>

kartm2020 · ‎12-11-2022

Thanks a lot for your answer. it is working as expected. Can i able to remove the white space in the table by reducing the single value size ? if yes, how can i reduce the size of single value viz.

bowesmana · ‎12-12-2022

If you want to play around with single value viz that has lots of options, I recommend @chrisyounger app - number viz, which allows you to specify various sizes.

https://splunkbase.splunk.com/app/4537

However, it you want to change the SV standard viz sizes and play around with the UI layout, you will need to use CSS changes. You would add those CSS changes to the <style> section in the XML dashboard.

If you are not so knowledgable with CSS, I recommend looking at posts made by @niketn who has made some excellent posts on CSS and how to do some great stuff with extending the standard visualisations.

https://community.splunk.com/t5/forums/searchpage/tab/message?filter=location,authorId&q=css&noSynon...

ITWhisperer · ‎12-11-2022

Do you mean like this?

...
  <row>
    <panel>
       <table>
...
       </table>
    </panel>
    <panel>
      <single>
...
      </single>
    </panel>
  </row>
...

How to merge the single viz and table vis in same row in Splunk dashboard XML?

development

Introducing the 2024 SplunkTrust!

Introducing the 2024 Splunk MVPs!

Splunk Custom Visualizations App End of Life