Dashboards & Visualizations

How do you put two HTML images side by side in a panel?

marvinlee93
Explorer

Hi,

I would like to display HTML images side by side in a panel. I realized that the visualization display will rearrange itself, but it does not apply to my HTML images.
alt text

Any idea how can I do this?

0 Karma
1 Solution

niketn
Legend

@marvinlee93 you can add the two images for Green Caution and Outdoor within a <div> inside <html> panel and set the CSS <style> to display:flex !important;. This way the images inside the div will not span across two separate lines.

Alternatively You should also check out the following options as well:

1) Status Indicator Custom Visualization which will allow you to display Icon color and text as per your use case (PS: it uses font-awesome icons).
2) You can use separate <panel> for each <html> image and then remove the padding between them using CSS override to make them appear as single panel.
3) Custom Decorations examples from the Splunk Dashboard Examples app.

Following is a run anywhere example (PS: I have used http links for the two icons so that it works for everyone with internet connection. You can replace with your own):

alt text

<dashboard>
  <label>HTML Images in the same row</label>
  <row>
    <panel>
      <html>
        <style>
          .image-title-single-row,
          .image-single-row{
             display:flex;
          }
        </style>
        <div class="image-title-single-row">
          <p style="padding-right:10px;width:50%;text-align:center">Green</p>
          <p style="width:50%;text-align:center">Outdoor</p>
        </div>
        <div class="image-single-row">
          <img style="height:250px;width:50%;padding-right:10px" src="https://cdn3.iconfinder.com/data/icons/flat-actions-icons-9/792/Tick_Mark_Dark-512.png" alt="ok"></img>
          <img style="height:250px;width:50%" src="https://www.iconspng.com/images/yellow-sun-icon/yellow-sun-icon.jpg" alt="out"></img>
        </div>
      </html>
    </panel>
  </row>
</dashboard>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

0 Karma

niketn
Legend

@marvinlee93 you can add the two images for Green Caution and Outdoor within a <div> inside <html> panel and set the CSS <style> to display:flex !important;. This way the images inside the div will not span across two separate lines.

Alternatively You should also check out the following options as well:

1) Status Indicator Custom Visualization which will allow you to display Icon color and text as per your use case (PS: it uses font-awesome icons).
2) You can use separate <panel> for each <html> image and then remove the padding between them using CSS override to make them appear as single panel.
3) Custom Decorations examples from the Splunk Dashboard Examples app.

Following is a run anywhere example (PS: I have used http links for the two icons so that it works for everyone with internet connection. You can replace with your own):

alt text

<dashboard>
  <label>HTML Images in the same row</label>
  <row>
    <panel>
      <html>
        <style>
          .image-title-single-row,
          .image-single-row{
             display:flex;
          }
        </style>
        <div class="image-title-single-row">
          <p style="padding-right:10px;width:50%;text-align:center">Green</p>
          <p style="width:50%;text-align:center">Outdoor</p>
        </div>
        <div class="image-single-row">
          <img style="height:250px;width:50%;padding-right:10px" src="https://cdn3.iconfinder.com/data/icons/flat-actions-icons-9/792/Tick_Mark_Dark-512.png" alt="ok"></img>
          <img style="height:250px;width:50%" src="https://www.iconspng.com/images/yellow-sun-icon/yellow-sun-icon.jpg" alt="out"></img>
        </div>
      </html>
    </panel>
  </row>
</dashboard>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

Chaser
Explorer

So, I want to display 2 visualization instead of image side by side in panel, how can I do this

0 Karma

marvinlee93
Explorer

Hi!

So I have to do the inline styling for each html? Is there a way to set the style for just a particular group of HTML images?? I have 3 groups of HTML images. They are not static. Different images will appear when
the field.value changes. And I don't think tokens work on ? (

0 Karma

niketn
Legend

@marvinlee93

The default setting for html elements is display: block and that for <img> width is original size. So both need to be overridden using CSS. Inline style for each <img> is not required as you can add required class to each and apply CSS at one place. I have done this for .image-title-single-row and .image-single-row in the example. You can adopt this approach of adding/removing classes to various sections as per your need.

Tokens can work in CSS, provided <style> is applied through dashboard <html> panel. Additinally, you can keep style html panel hidden using depends attribute to a token which is never set. Refer to one of my older answers: https://answers.splunk.com/answers/684166/how-do-you-make-a-table-that-reduces-in-height-whe.html

Do up vote the answer/comments if it helps 🙂

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

kamlesh_vaghela
SplunkTrust
SplunkTrust

@marvinlee93

You can HTML panel to display HTML content like <img>

See :
Use the HTML panel to display static text

https://docs.splunk.com/Documentation/Splunk/7.2.1/Viz/BuildandeditdashboardswithSimplifiedXML#Use_t...

I hope this link will help you. Let me know for further assistance.

0 Karma

micahwilliams12
New Member

The html needs to live in a dashboard, one way or another. For a dashboard, you can write Simple XML or Advanced XML or you can use HTML. The tag defines a dashboard in Advanced XML.

However, I would write this simple XML for a dashboard instead:

 <dashboard>
 <row>
   <html>
     <h1>HTML Panel Example</h1>
     <p>The HTML panel displays inline HTML.</p>
       <img src="picture.jpg"/>
    </html>
   </row>
 </dashboard>

Now you don't need hello.html at all.

For more info check out the Build Dashboards with Simple XML section of the manual - or start at the beginning of the manual. learn Splunk.

0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...