Dashboards & Visualizations

How can I use a jquery plugin in a dashboard?

csimonnet
New Member

Hello,
how can I use a jquery plugin in a dashboard? I would like to have a panel with the weather like here: https://codepen.io/fleeting/pen/xklfq
I downloaded the files and wrote the html code in the dashboard but nothing happened.

<dashboard script="jquery.simpleWeather.min.js, weather.js" stylesheet="weather.css">
<row>
</panel>
    <panel>
      <html>
        <div id="weather"/>
      </html>
    </panel>
  </row>
</dashboard>

javascript file:

require([
       "splunkjs/ready!",
       "splunkjs/mvc/simplexml/ready!",
    "jquery"
     ], function($) {
$(document).ready(function() {
  $.simpleWeather({
    location: 'Lyon',
    woeid: '',
    unit: 'C',
    success: function(weather) {
      html = '<h2><i class="icon-'+weather.code+'"></i> '+weather.temp+'&deg;'+weather.units.temp+'</h2>';
      html += '<ul><li>'+weather.city+', '+weather.region+'</li>';
      html += '<li class="currently">'+weather.currently+'</li>';
      $("#weather").html(html);
    },
    error: function(error) {
      $("#weather").html('<p>'+error+'</p>');
    }
  });
});
});
0 Karma

elliotproebstel
Champion

I believe you should be loading your required jquery libraries all into the weather.js script. I would recommend closely following some of the guides here:
http://dev.splunk.com/view/SP-CAAAE4A
http://dev.splunk.com/view/SP-CAAAESY

For example, I believe this:

 require([
        "splunkjs/ready!",
        "splunkjs/mvc/simplexml/ready!",
     "jquery"
      ], function($) {

needs to be this:

 require([
     "jquery",
        "splunkjs/ready!",
        "splunkjs/mvc/simplexml/ready!"
      ], function($) {

Based on this excerpt from the second guide:

Then, add variables for the returned objects as function arguments in the same order as they are declared in requirements.
Because the ready! loader script does not return a value, you can add this statement at the end of the requirements, 
and omit it from the function arguments.
0 Karma
Get Updates on the Splunk Community!

Why You Can't Miss .conf25: Unleashing the Power of Agentic AI with Splunk & Cisco

The Defining Technology Movement of Our Lifetime The advent of agentic AI is arguably the defining technology ...

Deep Dive into Federated Analytics: Unlocking the Full Power of Your Security Data

In today’s complex digital landscape, security teams face increasing pressure to protect sprawling data across ...

Your summer travels continue with new course releases

Summer in the Northern hemisphere is in full swing, and is often a time to travel and explore. If your summer ...