Removing Thousand separators from single value visualization in HTML dashboard

[nkankur]

Hi All,

I had a single value visualization panel with numeric value in my xml dashboard without the thousand separator.
The Thousand Separator field was marked as no.

But after converting it into HTML dashboard I see the thousand separators are there.

I tried converting the value to string but it didn't worked.

In the html dashboard source code, I see that the value is zero for thousand separator field for that particular element still in the output panel I see values separated by commas.

Can anyone help me with this?
I don't want thousand separators in my output.

[niketn · Accepted solution]

@nkankur, you should add a BUG tag to your question and if you have Splunk Entitlement through Splunk Support you should report the same that "useThousandSeparators": "0", configuration in the Splunk JS Stack is not working as expected using HTML Dashboard.

Meanwhile, if you are using HTML Dashboard and the id of Single Value in your dashboard is element1, you can use the following JavaScript code and SplunkJS Stack to remove comma from Single Value Results and Delta (if you are also showing Trend).

    var singleView=mvc.Components.get("element1");

    singleView.on('rendered', function() {
        console.log("SingleView Rendered");
        setTimeout(function(){
             var strSingleText=$("#element1 #singlevalue text.single-result").html();
             if(strSingleText!==undefined){
                  strSingleText=strSingleText.trim().replace( /,/g,"");
                  $("#element1 #singlevalue text.single-result").text(strSingleText);
                  console.log("strSingleText:",strSingleText);
             }
             var strDeltaText=$("#element1 #singlevalue text.delta-label").html();
             if(strDeltaText!==undefined){
                  strDeltaText=strDeltaText.trim().replace( /,/g,"");
                  $("#element1 #singlevalue text.delta-label").text(strDeltaText);
                  console.log("strDeltaText:",strDeltaText);
             }
        },100);
    });

Please try out and confirm!

[nkankur]

Hi niketnilay,

Thanks a lot for your support and quick responses. Really appreciate it!

I added above code, but I am still seeing the same results. Probably there is a chance that I am adding it in the wrong place.

My panel element is element1 and I have added above code in the head section as shown below,

 <script>
            (function () {
                window._splunk_metrics_events = [];
                window._splunk_metrics_events.active = true;

                function onLoadSwa() {
                    new SWA({"instanceGUID": "C4344CC3-D23F-4693-8EE1-677B2BE8F147", "version": "3", "url": "https://e1345286.api.splkmobile.com/1.0/e1345286", "visibility": "anonymous,support", "userID": "a52d56d1e13dbd9ef9f2ea24b11c0091e636d9280dca4db9b7a92fe0600a934b", "deploymentID": "c5f82277-0bcd-560d-8276-95a3572e2d33"});
                };

                document.addEventListener("DOMContentLoaded", function(event) {
                    var s = document.createElement('script');
                    s.type = 'text/javascript';
                    s.async = true;
                    s.src = '/en-US/static/app/splunk_instrumentation/build/pages/swa.js';
                    s.addEventListener('load', onLoadSwa);
                    var x = document.getElementsByTagName('script')[0];
                    x.parentNode.insertBefore(s, x);
                });
            }());
        </script>
  <script>
  var singleView=mvc.Components.get("element1");

     singleView.on('rendered', function() {
         console.log("SingleView Rendered");
         setTimeout(function(){
                 var strSingleText=$("#element1 #singlevalue text.single-result").html();
              if(strSingleText!==undefined){
                   strSingleText=strSingleText.trim().replace( /,/g,"");
                   $("#element1 #singlevalue text.single-result").text(strSingleText);
                   console.log("strSingleText:",strSingleText);
              }
              var strDeltaText=$("#element1 #singlevalue text.delta-label").html();
              if(strDeltaText!==undefined){
                   strDeltaText=strDeltaText.trim().replace( /,/g,"");
                   $("#element1 #singlevalue text.delta-label").text(strDeltaText);
                   console.log("strDeltaText:",strDeltaText);
              }
         },100);
     });
 </script>

Please tell me if it's correct or not and if not then where I should add it.
I am new with javascript 🙂

[niketn]

@nkankur, try to find the following two pieces of your code.

1. Single View Element: Try to find the following code new SingleElement({ under the VIEWS code section below.

   //
   // VIEWS: VISUALIZATION ELEMENTS
   //
   

   I have written code assuming Single View id is element1 i.e. "id": "element1",. If id is something else, your jQuery Selector will also need the same id.

2. JavaScript Section with Dashboard Ready Section

   //
   // DASHBOARD READY
   //
   

   The code in my answer above needs to be pasted as it is (correction to Single View id would need to be made if required), under the above piece of code.
   If you are under the process of learning Splunk Web Framework/Splunk JS Stack check out code examples on Splunk Dev Site to understand the concepts.

[nkankur]

It's working!

Thanks a lot 🙂