Dashboards & Visualizations
×

Are you a member of the Splunk Community?

Sign in or Register with your Splunk account to get your questions answered, access valuable resources and connect with experts!
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Ask a Question

Change the color of a row based on date/time for a dashboard

jeffbat
Path Finder
‎04-25-2019 03:21 PM

I have the need to create a dashboard that will be showing a table of data based on date/time and showing the date/time as a column. The data will show the last 7 days.

I want to be able to colorize the rows in the dashboard that are within the last 24 hours.

Is there an easy way to do this in a dashboard.

we are running Splunk Enterprise 7.2.4.2.

Thanks.

0 Karma
Reply

vnravikumar
Champion
‎04-25-2019 10:36 PM

Hi

try this and modify accordingly

<dashboard script="highlight.js">
  <label>table</label>
  <row>
    <panel>
      <html depends="$hide$">
          <style>
             .green{ 
             background-color:#53A051 !important;
             }
             </style>
      </html>
    </panel>
  </row>
  <row>
    <panel>
      <table id="tableHighlight">
        <search>
          <query>| gentimes start=04/22/19 end=04/27/19 increment=1d 
| eval data="dummydata" , duration = round((now()-starttime)/86400) 
| eval color= if(duration=0,"yes","no"),  data= 'color'."|".'data'|rename starthuman as DateTime |table DateTime,data</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </table>
    </panel>
  </row>
</dashboard>

js:

 require([
      'underscore',
      'jquery',
      'splunkjs/mvc',
      'splunkjs/mvc/tableview',
      'splunkjs/mvc/simplexml/ready!'
  ], function (_, $, mvc, TableView) {

      var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
          canRender: function (cell) {
              return _(['data']).contains(cell.field);
          },
          render: function ($td, cell) {
              var val = cell.value.split("|")[0];
              var label = cell.value.split("|")[1];
              if (val == "yes") {
                  $td.addClass("range-cell").addClass("green")
              }

              $td.text(label).addClass("string");
          }
      });

      var sh = mvc.Components.get("tableHighlight");
      if (typeof (sh) != "undefined") {
          sh.getVisualization(function (tableView) {
              tableView.table.addCellRenderer(new CustomRangeRenderer());
              tableView.table.render();
          });
      }
  });
0 Karma
Reply
Career Survey
First 500 qualified respondents will receive a $20 gift card! Tell us about your professional Splunk journey.
Take the Survey

Can’t make it to .conf25? Join us online!

Watch Global Broadcast
Get Updates on the Splunk Community!

Community Content Calendar, September edition

Welcome to another insightful post from our Community Content Calendar! We're thrilled to continue bringing ...

Splunkbase Unveils New App Listing Management Public Preview

Splunkbase Unveils New App Listing Management Public PreviewWe're thrilled to announce the public preview of ...

Leveraging Automated Threat Analysis Across the Splunk Ecosystem

Are you leveraging automation to its fullest potential in your threat detection strategy?Our upcoming Security ...