According to app 'Splunk 6.x Dashboard Examples', dashboard 'Image Overlay with Single Values', it's cool to display a single value on an image, Picture: http://postimg.org/image/sjvjqy5vn/
But is it possible to define color range for result values?
I added the rangemap
command to its search string:
<search id="merging_queue">
<query>index=_internal earliest=-5m
| stats count
| rangemap field=count high=1000-1800 elevated=1801-2000 guarded=2001-2500 default=gray</query>
<earliest>$earliest$</earliest>
<latest>$latest$</latest>
<preview>
<set token="merging_queue">$result.count$</set>
</preview>
</search>
and add singlevalue color range definition to its css file:
.singleValue {
font-size: 4em;
font-weight: bold;
.singleValue .singleResult {
font-size: 3em;
vertical-align: -4px;
margin: 0px 6px;
}
.singleValue .high .singleResult {
color: #ff7e00;
}
.singleValue .elevated .singleResult {
color: #ffb800;
}
.singleValue .guarded .singleResult {
color: #4da6df;
}
#image_overlay_panel #merging_queue {
position: absolute;
top: 430px;
left: 292px;
}
But it seems the <preview> element will not take rangemap value
Still thanks to @ppablo_splunk, I will try not to mess up everything this time.
I found a solution myself.
in css file:
.singleValue {
font-size: 1em;
font-weight: bold;
}
.singleValue .green {
font-size: 2em;
color: #00ff00;
}
.singleValue .red {
font-size: 6em;
color: #ff0000;
}
.singleValue .blue {
font-size: 4em;
color: #0000ff;
}
#image_overlay_panel #parsing_queue {
position: absolute;
top: 430px;
left: 292px;
}
in xml file:
<search id="parsing_queue">
<query>index=_internal
| stats count
| rangemap field=count green=0-50 blue=51-100 red=101-200 default=green
</query>
<earliest>$earliest$</earliest>
<latest>$latest$</latest>
<preview>
<set token="parsing_queue">$result.count$</set>
<set token="parsing_range">$result.range$</set>
</preview>
</search>
and:
<div class="singleValue">
<div class="$parsing_range$" id="parsing_queue">$parsing_queue$</div>
</div>
Still thanks to @ppablo_splunk, I will try not to mess up everything this time.
I found a solution myself.
in css file:
.singleValue {
font-size: 1em;
font-weight: bold;
}
.singleValue .green {
font-size: 2em;
color: #00ff00;
}
.singleValue .red {
font-size: 6em;
color: #ff0000;
}
.singleValue .blue {
font-size: 4em;
color: #0000ff;
}
#image_overlay_panel #parsing_queue {
position: absolute;
top: 430px;
left: 292px;
}
in xml file:
<search id="parsing_queue">
<query>index=_internal
| stats count
| rangemap field=count green=0-50 blue=51-100 red=101-200 default=green
</query>
<earliest>$earliest$</earliest>
<latest>$latest$</latest>
<preview>
<set token="parsing_queue">$result.count$</set>
<set token="parsing_range">$result.range$</set>
</preview>
</search>
and:
<div class="singleValue">
<div class="$parsing_range$" id="parsing_queue">$parsing_queue$</div>
</div>
no worries @crazyeva. I'm glad you found your own answer and shared it here for other users 🙂
Thanks to @ppablo_splunk for your help, By another misoperation, I deleted your post about code editing suggestion. Could I reinstate it?