Dashboards & Visualizations

store search result to a javascript variable for dynamic displaying custom dashboard

jperezh
Explorer

Hi, I'm new to splunk and trying to create a custom dashboard using javascript. I want to store the result from a search to a variable in a javascript code so I can use it for displaying on a custom dashboard. So basically I need something like this:

javascript file
var x = "search index=test qualify=Me | stats count",

html

P.D. I know there is some similare questions out there but i haven't been able to make them work for my particular case.
Thanks in advance.

0 Karma

woodcock
Esteemed Legend

I suggest you download the Splunk 6.x Dashboard Examples app and poke around in it; it has many examples of this kind of thing:
https://splunkbase.splunk.com/app/1603/

0 Karma

niketn
Legend

@jperezh, you can do this directly via SimpleXML using Search Event Handler and tokens. Any specific reason for JavaScript?

Following example uses done event handler to access search result field count and assign to token to be used elsewhere in the dashboard.

  <search>
    <query>index=test qualify=Me 
   | stats count
    </query>
    <earliest>-1h@h</earliest>
    <latest>now</latest>
    <done>
      <condition match="$job.resultCount$==0$">
        <set token="tokCount">0</set>
      </condition>
      <condition>
        <set token="tokCount">$result.count$</set>
      </condition>
    </done>
  </search>

PS: Following condition, $job.resultCount$==0, is used to default the token to 0 in case no results are found.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

jperezh
Explorer

Thanks for answering. I've just try that but I don't get the value but the search string: index=chartlike qualify=Me | stats count -1h@h now 0 $result.count$ . I thought of javascript because I implemented some facebook like buttons to qualify the charts and I want to get back the count of those buttons to display it beside the icons, I've mixed xml with html to make it.

this is my xml/html:

Blockquote

prueba

<panel>
  <chart>
    <search>
      <query>sourcetype="csv"</query>
      <earliest>-24h@h</earliest>
      <latest>now</latest>
    </search>
    <option name="charting.chart">line</option>
    <option name="charting.drilldown">none</option>
  </chart>

    <html>
     <div>
          <!-- Boton de "me gusta" -->
          <a class="like_chart" title="Me gusta" id="like_app_chart1">
            <i class="fa fa-2x fa-thumbs-o-up fa-lg"/>
          </a>

        <search>
           <query>
             index=chartlike qualify=Me | stats count 
           </query>
           <earliest>-1h@h</earliest>
           <latest>now</latest>
           <done>
             <condition match="$job.resultCount$==0$">
               <set token="tokCount">0</set>
             </condition>
             <condition>
               <set token="tokCount">$result.count$</set>
             </condition>
           </done>
         </search>

          <!-- Boton de "no me gusta" -->
          <a class="like_chart" title="No me gusta" id="nolike_app_chart1">
            <i class="fa fa-2x fa-thumbs-o-down fa-lg"/>
          </a>

          <!-- boton de mostrar caja de comentarios -->
          <a class="comment" title="Comentar" id="comment_app_chart1">
            <i class="fa fa-2x fa-comment-o fa-lg" aria-hidden="true"/>
          </a>
          <!-- caja de comentarios -->
          <div class="comments" id="show_comment_chart1">
          <div id="comment_chart1" contenteditable="true" placeholder="Comentario"/>
            <span id="error_app_chart1">Máximo 140 caracteres&gt;</span>
            &lt;br/&gt;
            <button type="button" class="comment_chart" id="send_comment_app_chart1">Enviar</button>
          </div>

     </div>
  </html>
</panel>

Blockquote

P.D I would attach some screen captures but I don't have enough karma points.
I've already try to insert a Splunk sigle value with the search result buy I can olny seem to put it into a new panel.

0 Karma

niketn
Legend

@ jperezh, you have set the token in your search however, you have not displayed the same in either Splunk visualization or HTML panel. Based on your requirements

Option 1
Seems like you are looking for Splunk Custom Visualization called Status Indicator which shows value icon and color based on data (https://splunkbase.splunk.com/app/3119/) .

Option 2
If you do not want to use Status Indicator and stick to HTML to apply CSS Style to show thumbs up or down based on value you can also check out Custom Decorations examples in the Splunk 6.x Dashboard Examples App. Or check out the following blog: https://www.splunk.com/blog/2015/06/25/shiny-icons.html

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

niketn
Legend

PS: The token $tokCount$ set through the search needs to be displayed with CSS Styling in your HTML Panel. Something like the following:

     <search>
        <query>
          index=chartlike qualify=Me | stats count 
        </query>
        <earliest>-1h@h</earliest>
        <latest>now</latest>
        <done>
          <condition match="$job.resultCount$==0$">
            <set token="tokCount">0</set>
          </condition>
          <condition>
            <set token="tokCount">$result.count$</set>
          </condition>
        </done>
      </search>

<row>
  <panel>
     <chart>
         ....
         Your Chart Code Here
         ....
     </chart>
     <html>
        <div>
           <!-- Boton de "me gusta" -->
           <a class="like_chart" title="Me gusta" id="like_app_chart1">
             <i class="fa fa-2x fa-thumbs-o-up fa-lg"/>
           </a>
           <div style="font-weight:bold;color:green">$tokCount$</div>
          ....
          ....

PS: To understand Search Event Handler and Token refer to the following documentation: http://docs.splunk.com/Documentation/Splunk/latest/Viz/EventHandlerReference#Search_event_handlers

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

jperezh
Explorer

Thank you very much, Indeed I was missing the way to display the token. Just another question, If I need 3 tokens, one for like, one for dislike and another for comments, can I put the 3 queries inside the same search tag or do I need to create one search tag for each query?

0 Karma

niketn
Legend

@jperezh, as far as you can get the query to return results (or fields) in single row, you can access them all through $result.<fieldName>$.

If you can provide your query for like, dislike and other with field name and sample data, we can help you further.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

jperezh
Explorer

My queries are:

likes:
index="chartlike" "qualify=me" | stats count

dislikes:
index="chartlike" "qualify=no" | stats count

comments:
index="chartlike" comments | stats count

The data is the result of a javascript code that makes an entry to the index whenever one of the buttons is clicked. That's already working. When I put those queries on the search bar I get the value I need but when i put them in the html code the value displayed is always 0.

0 Karma

jperezh
Explorer

UPDATE: I think the problem is that the query doesn't have an all time specification, so it only displays the lastest of all.

So I only modify this part of the xml

<earliest>-1h@h</earliest>

to

<earliest>0</earliest>

And that did it, its displaying the whole amount of likes and dislikes.

0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...