Adding colored field based on row index

[seam0n]

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

[LukeMurphey · Accepted solution]

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:

[seam0n]

Thank you Luke!

[seam0n]

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?

[vganjare]

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

Thanks!!

[vganjare]

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

Thanks!!

[seam0n]

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.