Dashboards & Visualizations
×

Are you a member of the Splunk Community?

Sign in or Register with your Splunk account to get your questions answered, access valuable resources and connect with experts!
cancel
Turn on suggestions
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Ask a Question
Solved! Jump to solution

JavaScript not working when using multiple tokens

PavelNed
Explorer
‎12-08-2020 05:58 AM

Hi guys,

I am currently struggling with making JS work at dashboard. My idea is to have a line graph with some data and add another line based on button clicked. I have set of buttons in html. When clicked, it calls JS function and changes token (token_foo) value to given string, which is then used in graph search. Well, this part works just fine. Until...

Now let's say I would like to color these buttons based on other tokens. Once I do it, buttons get the right color, but suddenly refuse to call the JS function. The same happens when I try to display token value by <p>$foo_color$</p>.

Shortened XML code:

 

<row>    
<panel>
      <html>
        <input type="button" id="foo" value="Foo" style="background-color:$foo_color$"/>
        <input type="button" id="boo" value="Boo" style="background-color:$boo_color$"/>
       </html>
    </panel>
  </row>
  <row>
    <panel>
      <event>
        <search>
          <done>
            <condition match="'job.resultCount' == 0">
              <set token="foo_color">#00FF00</set>
            </condition>
            <condition match="'job.resultCount' &gt; 0">
              <set token="foo_color">#FF0000</set>
            </condition>
          </done>
          <query>index="foo_index"</query>
          <earliest>$time_picker.earliest$</earliest>
          <latest>$time_picker.latest$</latest>
        </search>
        <option name="list.drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </event>
    </panel>
  </row>

 

 What am I missing?

Thanks.

Labels (1)
Labels
0 Karma
Reply
1 Solution
Solved! Jump to solution
Solution

PavelNed
Explorer
‎12-15-2020 07:35 AM

Managed to sort it out by using more js and css.

In js I watch "foo_color" token and when changed, it appends class to "foo", which has either green or red color in it.

Shortened example in js:

var defaultTokenModel = mvc.Components.get("default");
defaultTokenModel.on("change:foo_color", function () {
   if (defaultTokenModel.get("foo_color" == "Faulty" && !($("#foo").hasClass('faulty'))) {
     $("#foo").addClass('faulty');
   } else if ($("#foo").hasClass('faulty')) {  
      $("#foo").removeClass('faulty');
   }
});

 

View solution in original post

0 Karma
Reply
Solved! Jump to solution
Solution

PavelNed
Explorer
‎12-15-2020 07:35 AM

Managed to sort it out by using more js and css.

In js I watch "foo_color" token and when changed, it appends class to "foo", which has either green or red color in it.

Shortened example in js:

var defaultTokenModel = mvc.Components.get("default");
defaultTokenModel.on("change:foo_color", function () {
   if (defaultTokenModel.get("foo_color" == "Faulty" && !($("#foo").hasClass('faulty'))) {
     $("#foo").addClass('faulty');
   } else if ($("#foo").hasClass('faulty')) {  
      $("#foo").removeClass('faulty');
   }
});

 

0 Karma
Reply
Get Updates on the Splunk Community!

Splunk Observability Cloud’s AI Assistant in Action Series: Analyzing and ...

This is the second post in our Splunk Observability Cloud’s AI Assistant in Action series, in which we look at ...

Elevate Your Organization with Splunk’s Next Platform Evolution

 Thursday, July 10, 2025  |  11AM PDT / 2PM EDT Whether you're managing complex deployments or looking to ...

Splunk Answers Content Calendar, June Edition

Get ready for this week’s post dedicated to Splunk Dashboards! We're celebrating the power of community by ...
Top