All Apps and Add-ons

How to add commas to the Horseshoe Meter?

marxsabandana
Path Finder

I have a stats dc() pipe, and I want to format it with commas using either fieldformat and eval, but it only displays the two digits before a comma is supposedly added to the value.

Default Horseshoe Meter
alt text

alt text
Using tostring(,"commas")

Is there any other way to format the value of a horseshoe meter?

1 Solution

niketn
Legend

@marxsabandana since you need numeric data to plot horseshoe meter, it would not work with string format. You can refer to one of my previous answers to plot Horseshoe meter using numeric data but hide number and show caption with string format data inside horseshoe meter. https://answers.splunk.com/answers/738735/horse-shoe-meter-for-visualisation.html

As per your use case you can use either an html panel with text and use CSS to position it inside Horseshoe meter. In this case I have used chart title for displaying SalesCount.

alt text

Kindly try the following run anywhere search example:

<dashboard>
  <label>Horseshoe Meter</label>
  <init>
    <set token="tokVizHeight">220</set>
    <set token="tokVizCaptionHeight">160</set>
  </init>
  <!-- Search to get Count, string count and color based on count -->
  <search>
    <query>| makeresults
 | fields - _time
 | eval sales_count=63929
 | eval sales_count_string=tostring(sales_count,"commas")
 | eval color_based_on_count=case(sales_count>=0 AND sales_count<10000,"#dc4e41",
                                     sales_count>=10000 AND sales_count<30000,"#fbcd2f",
                                     true(),"#53a051")
     </query>
    <done>
      <set token="tokSalesCount">$result.sales_count$</set>
      <set token="tokSalesCountString">$result.sales_count_string$</set>
      <eval token="tokVizColor">$result.color_based_on_count$</eval>
    </done>
  </search>
  <row>
    <panel>
      <html>
         <style>
           #my_horseshoe_meter .meter-center-text{
             visibility: hidden !important;
           }
           #my_horseshoe_meter h3{
              text-align: center;
              position: relative;
              top: $tokVizCaptionHeight$px;
              left: 20px;
              z-index: 1;
              color: $tokVizColor$;
           }
           #my_horseshoe_meter .meter-under-text{
             font-size: 50px !important;
             font-weight: 250 !important;
             transform: translateY(15px) !important;
           }
         </style>
       </html>
      <viz id="my_horseshoe_meter" type="horseshoe_meter_app.horseshoe_meter">
        <title>Sales Count</title>
        <search>
          <query>| makeresults
           | fields - _time
           | eval failure="$tokSalesCount$"</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="drilldown">none</option>
        <option name="height">$tokVizHeight$</option>
        <option name="horseshoe_meter_app.horseshoe_meter.backgroundColor">#ccc</option>
        <option name="horseshoe_meter_app.horseshoe_meter.caption">$tokSalesCountString$</option>
        <option name="horseshoe_meter_app.horseshoe_meter.dialColor">#fff</option>
        <option name="horseshoe_meter_app.horseshoe_meter.maxRangeColor">#53a051</option>
        <option name="horseshoe_meter_app.horseshoe_meter.maxRangeThreshold">30000</option>
        <option name="horseshoe_meter_app.horseshoe_meter.maxValue">100000</option>
        <option name="horseshoe_meter_app.horseshoe_meter.midRangeColor">#fbcd2f</option>
        <option name="horseshoe_meter_app.horseshoe_meter.midRangeThreshold">10000</option>
        <option name="horseshoe_meter_app.horseshoe_meter.minRangeColor">#dc4e41</option>
        <option name="horseshoe_meter_app.horseshoe_meter.minValue">0</option>
        <option name="horseshoe_meter_app.horseshoe_meter.thresholdStyle">realValue</option>
        <option name="horseshoe_meter_app.horseshoe_meter.useRangemap">true</option>
        <option name="horseshoe_meter_app.horseshoe_meter.valueColor">#555</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
      </viz>
    </panel>
  </row>
</dashboard>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

niketn
Legend

@marxsabandana since you need numeric data to plot horseshoe meter, it would not work with string format. You can refer to one of my previous answers to plot Horseshoe meter using numeric data but hide number and show caption with string format data inside horseshoe meter. https://answers.splunk.com/answers/738735/horse-shoe-meter-for-visualisation.html

As per your use case you can use either an html panel with text and use CSS to position it inside Horseshoe meter. In this case I have used chart title for displaying SalesCount.

alt text

Kindly try the following run anywhere search example:

<dashboard>
  <label>Horseshoe Meter</label>
  <init>
    <set token="tokVizHeight">220</set>
    <set token="tokVizCaptionHeight">160</set>
  </init>
  <!-- Search to get Count, string count and color based on count -->
  <search>
    <query>| makeresults
 | fields - _time
 | eval sales_count=63929
 | eval sales_count_string=tostring(sales_count,"commas")
 | eval color_based_on_count=case(sales_count>=0 AND sales_count<10000,"#dc4e41",
                                     sales_count>=10000 AND sales_count<30000,"#fbcd2f",
                                     true(),"#53a051")
     </query>
    <done>
      <set token="tokSalesCount">$result.sales_count$</set>
      <set token="tokSalesCountString">$result.sales_count_string$</set>
      <eval token="tokVizColor">$result.color_based_on_count$</eval>
    </done>
  </search>
  <row>
    <panel>
      <html>
         <style>
           #my_horseshoe_meter .meter-center-text{
             visibility: hidden !important;
           }
           #my_horseshoe_meter h3{
              text-align: center;
              position: relative;
              top: $tokVizCaptionHeight$px;
              left: 20px;
              z-index: 1;
              color: $tokVizColor$;
           }
           #my_horseshoe_meter .meter-under-text{
             font-size: 50px !important;
             font-weight: 250 !important;
             transform: translateY(15px) !important;
           }
         </style>
       </html>
      <viz id="my_horseshoe_meter" type="horseshoe_meter_app.horseshoe_meter">
        <title>Sales Count</title>
        <search>
          <query>| makeresults
           | fields - _time
           | eval failure="$tokSalesCount$"</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="drilldown">none</option>
        <option name="height">$tokVizHeight$</option>
        <option name="horseshoe_meter_app.horseshoe_meter.backgroundColor">#ccc</option>
        <option name="horseshoe_meter_app.horseshoe_meter.caption">$tokSalesCountString$</option>
        <option name="horseshoe_meter_app.horseshoe_meter.dialColor">#fff</option>
        <option name="horseshoe_meter_app.horseshoe_meter.maxRangeColor">#53a051</option>
        <option name="horseshoe_meter_app.horseshoe_meter.maxRangeThreshold">30000</option>
        <option name="horseshoe_meter_app.horseshoe_meter.maxValue">100000</option>
        <option name="horseshoe_meter_app.horseshoe_meter.midRangeColor">#fbcd2f</option>
        <option name="horseshoe_meter_app.horseshoe_meter.midRangeThreshold">10000</option>
        <option name="horseshoe_meter_app.horseshoe_meter.minRangeColor">#dc4e41</option>
        <option name="horseshoe_meter_app.horseshoe_meter.minValue">0</option>
        <option name="horseshoe_meter_app.horseshoe_meter.thresholdStyle">realValue</option>
        <option name="horseshoe_meter_app.horseshoe_meter.useRangemap">true</option>
        <option name="horseshoe_meter_app.horseshoe_meter.valueColor">#555</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
      </viz>
    </panel>
  </row>
</dashboard>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
Get Updates on the Splunk Community!

Introducing the 2024 SplunkTrust!

Hello, Splunk Community! We are beyond thrilled to announce our newest group of SplunkTrust members!  The ...

Introducing the 2024 Splunk MVPs!

We are excited to announce the 2024 cohort of the Splunk MVP program. Splunk MVPs are passionate members of ...

Splunk Custom Visualizations App End of Life

The Splunk Custom Visualizations apps End of Life for SimpleXML will reach end of support on Dec 21, 2024, ...