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!

CX Day is Coming!

Customer Experience (CX) Day is on October 7th!! We're so excited to bring back another day full of wonderful ...

Strengthen Your Future: A Look Back at Splunk 10 Innovations and .conf25 Highlights!

The Big One: Splunk 10 is Here!  The moment many of you have been waiting for has arrived! We are thrilled to ...

Now Offering the AI Assistant Usage Dashboard in Cloud Monitoring Console

Today, we’re excited to announce the release of a brand new AI assistant usage dashboard in Cloud Monitoring ...