Dashboards & Visualizations

How to create custom dashboard?

ramesh12345
Explorer

Hi,

I have a query which displays max percentages.i am displaying with default splunk provided radial gauge.But i want to display the same in with an image. i need to display in bulb(red,green,orange) as per the percentages defined,it automatically needs to change according to the percentages.(>80 green,<80 and >60 orange <60 red)
How to do this custom dashboard?

Tags (1)
0 Karma
1 Solution

niketn
Legend

@ramesh12345 you should check out Table with Icon example in the Splunk Dashboard Examples App.

Please refer to one of my previous answers which demos three examples including icons based on range 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

0 Karma

niketn
Legend

@ramesh12345 you should check out Table with Icon example in the Splunk Dashboard Examples App.

Please refer to one of my previous answers which demos three examples including icons based on range https://answers.splunk.com/answers/637615/why-is-the-table-cell-highlighting-not-reading-the.html

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

vnravikumar
Champion

Hi

Try this, based on value image will get change. For sample purpose, I had made a text box to enter the value. Modify it accordingly to your requirement.

<form>
   <label>Image</label>
   <fieldset submitButton="false">
     <input type="text" token="value">
       <label>Enter number to test(1-100)</label>
     </input>
   </fieldset>
   <row>
     <panel depends="$path$">
       <html>
         <body>
           <tr>
             <td>
             <img src="$path$" height="200" width="200"/>
           </td>
           </tr>
         </body>
       </html>
     </panel>
     <panel depends="$hide$">
      <single>
         <search>
           <query>|makeresults |eval temp=$value$ | table temp</query>
           <done>
             <condition match="'result.temp' >=80">
               <set token="path">/static/app/splunk/green.jpg</set>
             </condition>
            <condition match="'result.temp' >=60 AND 'result.temp' <80">
               <set token="path">/static/app/splunk/orange.jpg</set>
             </condition>
             <condition match=" 'result.temp' <60">
               <set token="path">/static/app/splunk/red.jpg</set>
             </condition>
           </done>
           <earliest>$earliest$</earliest>
           <latest>$latest$</latest>
         </search>
      </single>
     </panel>
   </row>
 </form>
0 Karma

ramesh12345
Explorer

For example my query

index=_internal|stats count by name

it will display all count with the names. now i want to display different color bulbs based on count value for each individual item.

whenever i executed query above query by your example it is showing only one row,but i need to display all the names count with different bulb colors based on range.

Please help how to do this

0 Karma

ramesh12345
Explorer

Bulb Visualization Sample

 <panel>
   <html>
     <style>
       /* CSS for table response_time_highlight_icon 
        #response_time_highlight_icon tr{

               width: 40px;
               height: 40px;
               float: left;
        }*/
       #response_time_highlight_icon td.icon img{
           text-align: center;
            width: 100px;
            height: 100px;
       }
       #response_time_highlight_icon td.icon i {
           font-size: 25px;
           text-shadow: 1px 1px #aaa;
       }
       #response_time_highlight_icon td.icon .severe {
           color: indianred;
       }
       #response_time_highlight_icon td.icon .elevated {
           color: orange;
       }
       #response_time_highlight_icon td.icon .low {
           color: #lightgreen ;
       }

       /* CSS for table response_time_highlight_cell */
       #response_time_highlight_cell td.range-low {
           background-color: lightgreen !important;
       }
       #response_time_highlight_cell td.range-elevated {
           background-color: orange !important;
           font-weight: bold;
       }
       #response_time_highlight_cell td.range-severe {
           background-color: indianred !important;
           font-weight: bold;
       }

       /* CSS for table response_time_highlight_row */
       #response_time_highlight_row tr td {
           background-color: lightgreen !important;
       }
       #response_time_highlight_row tr.range-elevated td {
           background-color: orange !important;
       }
       #response_time_highlight_row tr.range-severe td {
           background-color: indianred !important;
       }
       #response_time_highlight_row .table td {
           border-top: 1px solid #fff;
       }
     </style>


   <table id="response_time_highlight_icon">
     <search>
       <query>index=_internal|stats count by name|  eval "Total Count"=case('count'>2800,"severe_".'count','count'&lt;2800 AND 'count'>=2000,"elevated_".'count',true(),"low_".'count')|fields - count,name</query>
       <earliest>-24h@h</earliest>
       <latest>now</latest>
       <sampleRatio>1</sampleRatio>
     </search>
     <option name="count">10</option>
     <option name="dataOverlayMode">none</option>
     <option name="drilldown">none</option>
     <option name="percentagesRow">false</option>
     <option name="rowNumbers">false</option>
     <option name="totalsRow">false</option>
     <option name="wrap">true</option>
   </table>
 </panel>

Java Script Code is:

require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'splunkjs/mvc/simplexml/ready!'
], function(, $, mvc, TableView) {
// Translations from rangemap results to CSS class
var ICONS = {
severe: 'alert-circle',
elevated: 'alert',
low: 'check-circle'
};
var RangeMapIconRenderer = TableView.BaseCellRenderer.extend({
canRender: function(cell) {
// Only use the cell renderer for the "Total Count" field
return cell.field === 'Total Count';
},
render: function($td, cell) {
var icon = 'check-circle';
// Fetch the icon for the value
var cellArray = cell.value.split("
");
var cellValue = cellArray1;
var range = cellArray[0];
if (ICONS.hasOwnProperty(cellArray[0])) {
icon = ICONS[cellArray[0]];
}
// Create the icon element and add it to the table cell
/* $td.addClass('icon').html(.template('

<%- cellValue %>
', {
icon: icon,
range: cellArray[0],
cellValue:cellValue
}));
}
});
var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
canRender: function(cell) {
// Enable this custom cell renderer for 'Total Count'
return _(['Total Count']).contains(cell.field);
},
render: function($td, cell) {
// Add a class to the cell based on the returned value
var strSLA = cell.value;
if (strSLA!==undefined){
strSLA=strSLA.trim();
$td.addClass('range-cell').addClass("range-"+strSLA);
}
$td.text(strSLA).addClass('string');
}
});

mvc.Components.get("response_time_highlight_icon").getVisualization(function(tableView){
// Register custom cell renderer, the table will re-render automatically
tableView.addCellRenderer(new RangeMapIconRenderer());
});

mvc.Components.get("response_time_highlight_cell").getVisualization(function(tableView){
tableView.on("rendered", function() {
console.log("Table Rendered");
setTimeout(function(){
$("#response_time_highlight_cell tr").each(function() {
var strSLA=$(this).find("td:last").html();
if (strSLA!==undefined){
strSLA=strSLA.trim();
$(this).find("td:nth-child(3)").addClass("range-cell").addClass("range-"+strSLA);
}
});
},100);
});
});
mvc.Components.get("response_time_highlight_row").getVisualization(function(tableView) {
tableView.on('rendered', function() {
setTimeout(function(){
// Apply class of the cells to the parent row in order to color the whole row
tableView.$el.find('td.range-cell').each(function() {
$(this).parents('tr').addClass(this.className);
});
},100);
});
// Add custom cell renderer, the table will re-render automatically.
tableView.addCellRenderer(new CustomRangeRenderer());
});
});
alt text

Output is showing like this,But i want to display horizontally.Bulbs should display sided by side.How to do this.

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@ramesh12345

If you want to go with only radial gauge then check below links. You can set a range in settings.

https://docs.splunk.com/Documentation/SplunkLight/7.2.4/References/Datavisualizationlibrary#Gauges
https://docs.splunk.com/Documentation/Splunk/7.2.5/Viz/CreateGauges#Radial_gauge

You can display images in the Dashboard then you can use achieve by using HTML panel.

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

Can you please share more information about your dashboard and how you are planning to display bulb image??
Dashboard mock will preferable 😛

0 Karma

ramesh12345
Explorer

I just want to display bulb(it should be dynamically changes color as per the percentage) instead of Gauge.
Red,Green,Orange colors.how to do this.

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 ...