Solved: How to create a visualization similar to this one

macadminrohit · ‎05-30-2019

I am basically interested in the first row panels .

niketn · ‎05-30-2019

@macadminrohit you can try any of the following options depending on your comfort level.

Option 1) You can please refer to Custom Decorations example in the Splunk Dashboard Examples App which uses <html> dashboard with custom decorations using CSS. This would need drilldown to be coded using Simple XML JS Extension where jQuery can be used to handle click on the Custom Decoration inside html panel.
Option 2) You can use <single> Value visualization with <html> panel similar to above Example and allow drilldown using Single Value <drilldown>. No JS required. (PS: Supports trellis layout post Splunk 6.6)
Option 3) You can use Status Indicator Custom visualization where you would not need Simple XML CSS extension and additional <html> panel. However, you still would need Simple XML JS extension to code drilldown. (PS: Supports trellis layout post Splunk 6.6)
Option 4) You can have <table> with single row and each collumn having unicode icons to display custom decorations. No Simple XML CSS or JS required however, coding Simple XML may show additional space for each unicode character added.
Option 5) Similar to above approach you can have table with single row and each cell value can be an icon using Simple XML JS Extension and SplunkJS Stack to change custom cell rendering.

Refer to the following answers of mine for more details on each one of the above approaches.

1) https://answers.splunk.com/answers/590581/refresh-data-in-table-by-collecting-token-on-click.html
2) https://answers.splunk.com/answers/741114/how-to-drill-down-from-custom-result-value-1.html
3) https://answers.splunk.com/answers/606353/dashboard-help-1.html
4) https://answers.splunk.com/answers/681268/one-rangemap-column-for-multiple-values.html
5) https://answers.splunk.com/answers/637615/why-is-the-table-cell-highlighting-not-reading-the.html

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

View solution in original post

macadminrohit · ‎05-31-2019

niketn · ‎05-30-2019

@macadminrohit you can try any of the following options depending on your comfort level.

Option 1) You can please refer to Custom Decorations example in the Splunk Dashboard Examples App which uses <html> dashboard with custom decorations using CSS. This would need drilldown to be coded using Simple XML JS Extension where jQuery can be used to handle click on the Custom Decoration inside html panel.
Option 2) You can use <single> Value visualization with <html> panel similar to above Example and allow drilldown using Single Value <drilldown>. No JS required. (PS: Supports trellis layout post Splunk 6.6)
Option 3) You can use Status Indicator Custom visualization where you would not need Simple XML CSS extension and additional <html> panel. However, you still would need Simple XML JS extension to code drilldown. (PS: Supports trellis layout post Splunk 6.6)
Option 4) You can have <table> with single row and each collumn having unicode icons to display custom decorations. No Simple XML CSS or JS required however, coding Simple XML may show additional space for each unicode character added.
Option 5) Similar to above approach you can have table with single row and each cell value can be an icon using Simple XML JS Extension and SplunkJS Stack to change custom cell rendering.

Refer to the following answers of mine for more details on each one of the above approaches.

1) https://answers.splunk.com/answers/590581/refresh-data-in-table-by-collecting-token-on-click.html
2) https://answers.splunk.com/answers/741114/how-to-drill-down-from-custom-result-value-1.html
3) https://answers.splunk.com/answers/606353/dashboard-help-1.html
4) https://answers.splunk.com/answers/681268/one-rangemap-column-for-multiple-values.html
5) https://answers.splunk.com/answers/637615/why-is-the-table-cell-highlighting-not-reading-the.html

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

macadminrohit · ‎05-31-2019

Thanks Niket, I tried option 3 using dummy data set which suits my requirement. The xml code is below :

<dashboard>
  <label>App health_Demo</label>
  <row>
    <panel>
      <title>Eco health</title>
      <viz type="status_indicator_app.status_indicator">
        <search>
          <query>| makeresults 
| eval Panel1="GREEN:App:#F7BC38:pod1,YELLOW:Compute:#F7BC38:pod1,RED:Data:#F7BC38:pod1" 
| eval split=split(Panel1,",") 
| mvexpand split 
| fields split 
| eval health=mvindex(split(split,":"),0) 
| eval category=mvindex(split(split,":"),1) 
| eval color=mvindex(split(split,":"),2) 
| eval pod=mvindex(split(split,":"),3) 
| fields category health color pod | fields - _time | chart values(health) as health over pod by category</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="drilldown">none</option>
        <option name="height">152</option>
        <option name="refresh.display">progressbar</option>
        <option name="status_indicator_app.status_indicator.colorBy">field_value</option>
        <option name="status_indicator_app.status_indicator.fillTarget">text</option>
        <option name="status_indicator_app.status_indicator.icon">field_value</option>
        <option name="status_indicator_app.status_indicator.showOption">1</option>
        <option name="status_indicator_app.status_indicator.staticColor">#555</option>
        <option name="status_indicator_app.status_indicator.useColors">false</option>
        <option name="trellis.enabled">1</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">small</option>
      </viz>
    </panel>
  </row>
</dashboard>

I am looking for a panel similar to the attached Picture, where POD1 , will be an HTML heading.

How to create a visualization similar to this one

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

.conf24 | Registration Open!

ICYMI - Check out the latest releases of Splunk Edge Processor