hi guys,
I have been trying to color a table in a Splunk dashboard, but I need the color ranges to be different for each row:
Example:
Context Field 1 Field 2 Field 3
A 8 -4 9
B 8 -4 9
C 8 -4 9
For row where column Context is A: color green when the value is > 5 , red if the value < -5
For row where column Context is B: color blue when the value is > 5, yellow if the value < -5
For row where column Context is C: color orange when the value is > 5, pink if the value < -5
So, I tested with Javascript something that for a normal HTML page works. However, for the Splunk results table, it does not work.
what am I missing??
In Splunk, I built my SimpleXML table, then converted to HTML and inserted my Javascript code.
For an HTML page, this sample I built works:
<head>
<title>Sample code </title>
<script>
function start() {
var body = document.getElementsByTagName("body")[0];
var table = body.getElementsByClassName("table")[0];
var tbody = table.getElementsByTagName('tbody')[0];
for (var j=0; j<3; j++){
var rows = tbody.getElementsByTagName('tr')[j];
var cells = rows.getElementsByTagName('td');
for (var i=0, len=cells.length; i<len; i++){
if (cells[0].innerHTML == "A"){
if (parseInt(cells[i].innerHTML,10) > 5){
cells[i].style.backgroundColor = 'green';
}
else if (parseInt(cells[i].innerHTML,10) < -5){
cells[i].style.backgroundColor = 'red';
}
}
if (cells[0].innerHTML == "B"){
if (parseInt(cells[i].innerHTML,10) > 5){
cells[i].style.backgroundColor = 'blue';
}
else if (parseInt(cells[i].innerHTML,10) < -5){
cells[i].style.backgroundColor = 'yellow';
}
}
if (cells[0].innerHTML == "C"){
if (parseInt(cells[i].innerHTML,10) > 5){
cells[i].style.backgroundColor = 'orange';
}
else if (parseInt(cells[i].innerHTML,10) < -5){
cells[i].style.backgroundColor = 'pink';
}
}
}
}
}
</script>
</head>
<body onload="start()">
</br></br></br></br></br>
<table id="tableID" class="table" border="2" style="padding: 0.2em 0.5em" align="center">
<thead>
<tr>
<th>Context</th>
<th>Field 1</th>
<th>Field 2</th>
<th>Field 3</th>
</tr>
</thead>
<tbody>
<tr>
<td style="font-size: 50pt">A</td>
<td style="font-size: 50pt">8</td>
<td style="font-size: 50pt">-4</td>
<td style="font-size: 50pt">-9</td>
</tr>
<tr>
<td style="font-size: 50pt">B</td>
<td style="font-size: 50pt">8</td>
<td style="font-size: 50pt">-4</td>
<td style="font-size: 50pt">-9</td>
</tr>
<tr>
<td style="font-size: 50pt">C</td>
<td style="font-size: 50pt">8</td>
<td style="font-size: 50pt">-4</td>
<td style="font-size: 50pt">-9</td>
</tr>
</tbody>
</table>
</body>
</html>
... View more