Splunk Search

How to put two pictures in one line?

flzhang132
Explorer

How to put two pictures in one line
alt text

Tags (1)
0 Karma
1 Solution

harishalipaka
Motivator

hi @flzhang132

try this example

<dashboard>

  <label>radial</label>
  <row>
    <panel>
       <html >
         <style>
           div#gauge1 {
               width: 50% !important;
            }  
          div#gauge2 {
                   width: 50% !important;
                  float: right;
                  top: -15.7rem !important;

            } 
         </style>
       </html>
      <chart id="gauge1">
        <search>
          <query>index=_internal sourcetype=splunk_web_access | stats count</query>
          <earliest>0</earliest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="charting.chart">radialGauge</option>
      </chart>

      <chart id="gauge2">
        <search>
          <query>index=_internal sourcetype=splunk_web_access | stats count</query>
          <earliest>0</earliest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="charting.chart">radialGauge</option>
      </chart>
    </panel>
  </row>
</dashboard>
Thanks
Harish

View solution in original post

0 Karma

harishalipaka
Motivator

hi @flzhang132

try this example

<dashboard>

  <label>radial</label>
  <row>
    <panel>
       <html >
         <style>
           div#gauge1 {
               width: 50% !important;
            }  
          div#gauge2 {
                   width: 50% !important;
                  float: right;
                  top: -15.7rem !important;

            } 
         </style>
       </html>
      <chart id="gauge1">
        <search>
          <query>index=_internal sourcetype=splunk_web_access | stats count</query>
          <earliest>0</earliest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="charting.chart">radialGauge</option>
      </chart>

      <chart id="gauge2">
        <search>
          <query>index=_internal sourcetype=splunk_web_access | stats count</query>
          <earliest>0</earliest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="charting.chart">radialGauge</option>
      </chart>
    </panel>
  </row>
</dashboard>
Thanks
Harish
0 Karma

niketn
Legend

@flzhang132, you have several options

Option 1) Use dashboard Edit --> UI to apply Drag and Drop feature with Mouse Left Button Clicked on Panel top section to rearrange panels in the same row.

Option 2) Use dashboard Edit --> Source to apply similar change provided you are comfortable with Simple XML Dashboards.

Your current dashboard snippet would be something like the following:

...
  <row>
    <panel>
      <chart>
         ...
         ...
         ...
      </chart>
    </panel>
  </row>
  <row>
    <panel>
      <chart>
         ...
         ...
         ...
      </chart>
    </panel>
  </row>
...

And should be changed to the following:

...
  <row>
    <panel>
      <chart>
         ...
         ...
         ...
      </chart>
    </panel>
    <panel>
      <chart>
         ...
         ...
         ...
      </chart>
    </panel>
  </row>
...

PS: For Options 2, if you are not familier with Splunk Simple XML, you should get Splunk Dashboard Examples App from Splunkbase, which has several useful run anywhere examples including Panel Grouping use case that you have requested.

Option 3) If Same query split is being used to display the two Radial Gauges, use Trellis Visualization to Split the <chart> using single panel and single search. This is available in Version 6.6 and higher. Refer to Trellis Documentation: https://docs.splunk.com/Documentation/Splunk/latest/Viz/VisualizationTrellis

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

poete
Builder

Hello @flzhang132,

assuming your are using a simple xml dashboard, simply edit the xml (edit->source code), and cut/past thepanel contraining the second gauge into the row containing the first one, and then delete the empty row.

0 Karma
Get Updates on the Splunk Community!

Routing logs with Splunk OTel Collector for Kubernetes

The Splunk Distribution of the OpenTelemetry (OTel) Collector is a product that provides a way to ingest ...

Welcome to the Splunk Community!

(view in My Videos) We're so glad you're here! The Splunk Community is place to connect, learn, give back, and ...

Tech Talk | Elevating Digital Service Excellence: The Synergy of Splunk RUM & APM

Elevating Digital Service Excellence: The Synergy of Real User Monitoring and Application Performance ...