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!

Detecting Remote Code Executions With the Splunk Threat Research Team

WATCH NOWRemote code execution (RCE) vulnerabilities pose a significant risk to organizations. If exploited, ...

Enter the Splunk Community Dashboard Challenge for Your Chance to Win!

The Splunk Community Dashboard Challenge is underway! This is your chance to showcase your skills in creating ...

.conf24 | Session Scheduler is Live!!

.conf24 is happening June 11 - 14 in Las Vegas, and we are thrilled to announce that the conference catalog ...