topic Re: Using a single value instead of chart in Dashboards & Visualizations

Using a single value instead of chart

dolfantimmy — Fri, 24 Oct 2014 20:09:55 GMT

I am just getting back in to dashboards and xml after about 3 years without using it. I have an immediate issue. I have a dashboard that displays a single value on a gauge. I just want a rectangular color box. I am assuming I need to use a single. But I'm not sure what it takes to change this....

                <param name="charting.chart">fillerGauge</param>
                <module name="JSChart">
                  <param name="width">100%</param>

so that it displays the box with a text value instead of using the fillergauge.

Thanks in advance.

Re: Using a single value instead of chart

martin_mueller — Fri, 24 Oct 2014 23:20:43 GMT

You'll want to remove the HiddenChartFormatter module and replace the JSChart module with a SingleValue module. Check out http://yoursplunkhost:8000/en-US/modules#Splunk.Module.SingleValue for more info.

If you're getting back into dashboarding after three years I highly recommend grabbing a new version of Splunk (6.1.x, or wait until Tuesday for 6.2) and check out the immensely improved abilities in SimpleXML and the graphical dashboard editor. You likely won't want to go back to AdvancedXML again.

Re: Using a single value instead of chart

dolfantimmy — Tue, 28 Oct 2014 16:59:16 GMT

Thanks Martin. That worked. However, is there no way to define the font color that's used by the single?

Re: Using a single value instead of chart

martin_mueller — Tue, 28 Oct 2014 17:02:11 GMT

You can set the classField option that grabs a field value from your result, using that as the CSS class for your single value display. For example, default range classes such as low (greenish), elevated (yellowish), severe (redish) are already defined. Beyond that you can define your own classes with whatever colour you need.

Re: Using a single value instead of chart

dolfantimmy — Tue, 28 Oct 2014 17:45:16 GMT

I thought that was it, but the following...

           <module name="SingleValue">
            <param name="field">Total Checks</param>
            <param name="afterLabel"> events</param>
            <param name="classField">severe</param>
           </module>

simple shows ## events in black, as if the classField is being ignored.

Re: Using a single value instead of chart

martin_mueller — Tue, 28 Oct 2014 17:52:06 GMT

Does your event have a field called severe that contains the class name?

Re: Using a single value instead of chart

dolfantimmy — Fri, 28 Nov 2014 14:59:52 GMT

I'm afraid Martin that I don't know exactly what you mean. I simply want to have a colorized box instead of a black on white number, I want the box to be colorized. Can I define color classes in the app's application.css and reference them with the classField param? If so, can you show me a simple example of the css code and how to reference it?

Thanks a ton!

Re: Using a single value instead of chart

martin_mueller — Fri, 28 Nov 2014 15:02:25 GMT

The classField option references a field in your results. By setting it to "severe", you make Splunk look for a field severe in your results and use its value as the class. I'm guessing you don't have such a field in your results.

Re: Using a single value instead of chart

dolfantimmy — Fri, 28 Nov 2014 15:03:52 GMT

Correct, the search simply returns a single integer value.

Re: Using a single value instead of chart

martin_mueller — Fri, 28 Nov 2014 15:05:28 GMT

To test this as is, append this to your search:

... | eval severe = "severe"

The Splunk will find a field severe, grab its value "severe", and set the css class to severe... which exists as "red" in Splunk's default CSS.

Once that works, you can apply this principle to use any CSS class, even ones you define yourself.

Re: Using a single value instead of chart

dolfantimmy — Fri, 28 Nov 2014 16:11:50 GMT

Ok, that worked. Now, how can I define my own css class, in application.css? Can I change the background color as well.

Thanks for all of your help.

Re: Using a single value instead of chart

martin_mueller — Fri, 28 Nov 2014 16:36:49 GMT

You could for example do this:

.single-value.yourclass {
    background-color: darkgreen;   
}

Set the class value to "yourclass" and you'll get a dark green box behind the single value.

Re: Using a single value instead of chart

dolfantimmy — Fri, 28 Nov 2014 16:55:58 GMT

Ok, that makes sense, but I'm not having success.

Here's a snippet of the view

  <searchName>Total X</searchName>
  <title>Total X</title>
  <option name="count">10</option>
  <option name="displayRowNumbers">true</option>
  <option name="classField">bg_darkgreen</option>
</single>

And here's the entire contents of the app's application.css file

.single-value.bg_darkgreen { background-color: darkgreen; }

Re: Using a single value instead of chart

martin_mueller — Fri, 28 Nov 2014 17:46:09 GMT

Going back a few posts, do you have a field in your results called bg_darkgreen?

Re: Using a single value instead of chart

dolfantimmy — Mon, 28 Sep 2020 18:17:57 GMT

Yes, I appended this to the search

... | eval bg_darkgreen = "bg_darkgreen"

Re: Using a single value instead of chart

martin_mueller — Fri, 28 Nov 2014 21:24:49 GMT

Okay, is your CSS correctly loaded in the browser?