topic Re: Font size for single value visualization in Dashboards & Visualizations

Font size for single value visualization

HeinzWaescher — Mon, 14 Apr 2014 11:25:04 GMT

Hi,

I've added several single value visualizations to a dashboard. Is it possible to adjust the font size for each panel in the xml view?

BR
Heinz

Re: Font size for single value visualization

martin_mueller — Mon, 14 Apr 2014 14:12:59 GMT

Sure. You can give them an additional CSS class, and specify the font size there. Add this to your single values (assuming SimpleXML):

...
  <row>
    <single>
      ...
      <option name="additionalClass">largerSingleValue</option>
    </single>
    ...
  </row>
...

In your application.css or a more specific file linked to at the top of your dashboard you can specify the size like this:

.largerSingleValue {
  font-size: xx-large;
}

Re: Font size for single value visualization

HeinzWaescher — Wed, 16 Apr 2014 07:14:06 GMT

Sounds good, I'll get some admin support and have a look at this. Thanks!

Re: Font size for single value visualization

shailesh030 — Wed, 10 Dec 2014 22:04:35 GMT

Hi martin_mueller,
I made the change as suggested above and included a change in color of the SingleValue(field) as well. In the dashboard the color is changing but cannot see the font-size change instead the panel size is increasing. Any clues to what I might be doing wrong? Below is the CSS associated with additionalClass assigned to the panel.

.SingleValueHolder{
color:#FF0000;
font-size:150px;
font-weight:300;
width:auto;
}

Panel XML

Single Value Dasboard

<panel>
  <single>
    <title>TotalCount</title>
    <searchString>index=_internal | eval cur=if(_time &gt; relative_time(now(),"-15m"),1,0) | stats count by cur | sort -cur</searchString>
    <earliestTime>rt-30m</earliestTime>
    <latestTime>rt</latestTime>
    <option name="field">count</option>
    <option name="additionalClass">SingleValueHolder</option>

  </single>
</panel>

Re: Font size for single value visualization

somesoni2 — Wed, 10 Dec 2014 23:25:40 GMT

Try this

<form>
  <label>Big Single Value</label>
  <description/>
  <fieldset submitButton="false">   
    <html>
      <style type="text/css">
        .single-value .single-result {
    font-size: 120px;
}
      </style>
    </html>
  </fieldset>
  <row>
    <panel>
      <single>
        <searchString>index=_internal | stats count</searchString>
        <earliestTime>-15m</earliestTime>
        <latestTime>now</latestTime>
        <option name="field">count</option>        
      </single>
    </panel>
  </row>  
</form>