Dashboards & Visualizations

Adding colored field based on row index

seam0n
Explorer

Hi,
im trying to build my own legend since I want to add further fields later and now im trying to construct a field containing the same color as the line in my chart. My thought is that this may be done by defining some colors in order with seriesColors and then in my legend fill a field with a color depending on the row index, i.e I want to set a color depending on if it is the first, second, third row and so on.
Im building my legends by filling a table with a search.

<form script="script.js" stylesheet="stylesheet.css">
<label>Events</label>
<fieldset submitButton="false">
...
</fieldset>
<row>
<panel depends="...">
<chart>
<title>Event meter</title>
<search>
<query>source="\xml\Splunk\run_\Event_meter.xml" | where run=$run_id$ | join type=inner EventID [search source="\xml\Splunk\run_\Event_map.xml" | where run=$run_id$] | timechart span=$time_span$ values(Value) AS response_time by EventGroup usenull=f limit=0</query>
</search>
<option name="charting.legend.masterLegend"></option>
<option name="charting.seriesColors">[0xFF0000,0xFFFF00,0x00FF00,...]</option>
</chart>
</panel>
</row>
<row>
<panel depends="...">
<table class="legend">
<title>Legend</title>
<search>
<query>source="\xml\Splunk\run_\Event_map.xml" | where run=$run_id$ | dedup EventGroup | table EventGroup</query>
</search>
</table>
</panel>
</row>
</form>

Thanks Simon

0 Karma
1 Solution

LukeMurphey
Champion

You can do this in CSS using the nth-of-type declaration.

Below is an example:

Step 1: Include a CSS file in your view

Create a CSS file and include it in your view if you haven't already. You can do this by editing your view to include the reference to the file like this:

<form stylesheet="mystyle.css"> ...

Put the CSS file in the appserver directory of the view (e.g. "etc/apps/MyApp/appserver/static/mystyle.css" if your app if called "MyApp").

Step 2: Update the table with an ID

Modify the table (or chart, etc.) with an ID so that we can have the CSS know what to stylize. Below is an example or a table with the ID specified (as "custom_styled_table"):

<form stylesheet="mystyle.css">
  <label>test</label>
  <row>
    <panel>
      <table id="custom_styled_table">
        <search>
          <query>index=_internal | stats count as count by sourcetype | table sourcetype count</query>
          <earliest>-15m</earliest>
          <latest>now</latest>
        </search>
        <option name="count">10</option>
      </table>
    </panel>
  </row>
</form>

Step 3: Update the CSS to stylize the contents

Update the stylesheet with the content to stylize the contents accordingly. Below is an example (in mystyle.css for this example):

/* Highlight the cell in the first row and second column */
#custom_styled_table tr:nth-of-type(1) > td:nth-of-type(2){
    background-color: red;
}       

/* Highlight the entire second row */
#custom_styled_table tr:nth-of-type(2) > td{
    background-color: blue;
}

This will result in:
alt text

View solution in original post

LukeMurphey
Champion

You can do this in CSS using the nth-of-type declaration.

Below is an example:

Step 1: Include a CSS file in your view

Create a CSS file and include it in your view if you haven't already. You can do this by editing your view to include the reference to the file like this:

<form stylesheet="mystyle.css"> ...

Put the CSS file in the appserver directory of the view (e.g. "etc/apps/MyApp/appserver/static/mystyle.css" if your app if called "MyApp").

Step 2: Update the table with an ID

Modify the table (or chart, etc.) with an ID so that we can have the CSS know what to stylize. Below is an example or a table with the ID specified (as "custom_styled_table"):

<form stylesheet="mystyle.css">
  <label>test</label>
  <row>
    <panel>
      <table id="custom_styled_table">
        <search>
          <query>index=_internal | stats count as count by sourcetype | table sourcetype count</query>
          <earliest>-15m</earliest>
          <latest>now</latest>
        </search>
        <option name="count">10</option>
      </table>
    </panel>
  </row>
</form>

Step 3: Update the CSS to stylize the contents

Update the stylesheet with the content to stylize the contents accordingly. Below is an example (in mystyle.css for this example):

/* Highlight the cell in the first row and second column */
#custom_styled_table tr:nth-of-type(1) > td:nth-of-type(2){
    background-color: red;
}       

/* Highlight the entire second row */
#custom_styled_table tr:nth-of-type(2) > td{
    background-color: blue;
}

This will result in:
alt text

seam0n
Explorer

Thank you Luke!

0 Karma

seam0n
Explorer

Maybe this is possible by adding javascript that iterates through the rows and adds some class then adding a css file to color the rows based on classes?
If this might be possible, how would one with javascript iterate through every row in a table with some specific class?

0 Karma

vganjare
Builder

Can you please provide more details from the code point of view?

Thanks!!

0 Karma

vganjare
Builder

Can Iconify command help? More details @ http://docs.splunk.com/Documentation/Splunk/6.2.2/SearchReference/Iconify

Thanks!!

0 Karma

seam0n
Explorer

Thanks but I don't think I can make use of that command since it gives an icon and I want to correlate colors in my table legend and my line charts.

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