Dashboards & Visualizations

Animate SimpleXML Dashboard Elements with a Carousel

danillopavan
Communicator

Hi all, i am trying to implement the Carousel animation as explained by the below link however still getting issues..

https://www.splunk.com/blog/2017/04/25/animate-simplexml-dashboard-elements-with-a-carousel.html

Did someone implement this animation?

I have created a Dashboard, and then copy the files "carousel.css" and "carousel.js" into my static folder. I have created also a sub folder called "js/lib" with 3 files "jquery.cloud9carousel.js", "jquery.js" and "jquery.reflection.js"

Initially loading the Dashboard I got the below issue:

jquery.cloud9carousel.js:371 Uncaught TypeError: Cannot read property 'fn' of undefined
at jquery.cloud9carousel.js:371
at jquery.cloud9carousel.js:394

Probably because jQuery was not being loaded correctly. I have changed the file "jquery.cloud9carousel.js" adding in the initial of the file the code "require([ 'jquery'". After that i believe that jQuery began to be loaded correctly, but I started to got other error: Uncaught TypeError: showcase.Cloud9Carousel is not a function
at carousel.js:18

The method "Could9Carousel" was not identified.

Could you please let me know what I doing wrong?

Many thanks and regards,
Danillo Pavan

Tags (1)
0 Karma
1 Solution

danillopavan
Communicator

Hi all,

It is working fine now 🙂
I was able to implement that just making one change...
In the initial of the file "jquery.cloud9carousel.js", I needed to add the below code:
"require([
'jquery'
], function($) {"

instead of
";(function($) {"

It is working perfectly!

Thanks and regards,
Danillo Pavan

View solution in original post

0 Karma

danillopavan
Communicator

Hi all,

It is working fine now 🙂
I was able to implement that just making one change...
In the initial of the file "jquery.cloud9carousel.js", I needed to add the below code:
"require([
'jquery'
], function($) {"

instead of
";(function($) {"

It is working perfectly!

Thanks and regards,
Danillo Pavan

0 Karma

niketn
Legend

@danillopavan I tried the code on Splunk Enterprise 7 and original code shared in the blog worked without any changes.

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

nagar57
Communicator

I am also trying to implement the same thing in splunk 7.x but not able to do so. After inspecting the webpage I am getting this error:

 Uncaught TypeError: showcase.Cloud9Carousel is not a function
    at eval (eval at globalEval (common.js:15), <anonymous>:17:11)
    at Object.execCb (eval at module.exports (common.js:139), <anonymous>:1658:33)
    at Module.check (eval at module.exports (common.js:139), <anonymous>:874:51)
    at Module.eval (eval at module.exports (common.js:139), <anonymous>:1121:34)
    at eval (eval at module.exports (common.js:139), <anonymous>:132:23)
    at eval (eval at module.exports (common.js:139), <anonymous>:1164:21)
    at each (eval at module.exports (common.js:139), <anonymous>:57:31)
    at Module.emit (eval at module.exports (common.js:139), <anonymous>:1163:17)
    at Module.check (eval at module.exports (common.js:139), <anonymous>:925:30)
    at Module.enable (eval at module.exports (common.js:139), <anonymous>:1151:22)
VM650:766 Uncaught TypeError: depMaps.slice is not a function
    at Module.init (eval at module.exports (common.js:139), <anonymous>:766:51)
    at eval (eval at module.exports (common.js:139), <anonymous>:1424:36)

I tried adding require([
'jquery'
], function($) {
in jquery.cloud9carousel.js, But it didn't work
Could you please help
TIA!!

0 Karma

advin
New Member

I followed that article exactly but I did not received any kind of errors and still does not worked. Could you please let me know what I doing wrong? Thanks.

0 Karma

niketn
Legend

@advin by error do you mean you have used Browser Inspector Tool to verify no Errors in the JavaScript Console?

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

advin
New Member

I mean, I am not seeing any kind of issues by loading the dashbaord but the feature does not worked.

0 Karma

niketn
Legend

Hit F12 on your browser, check under console whether you see any errors. Usually red cross icon with error count should show up if something is failing or static files have not been uploaded to correct folder.

Also, hope you are using separate Single Value panels and not Single Value Trellis as Carousal will not work with Trellis.

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

niketn
Legend

@danillopavan, great to know that you were able to find the solution on your own. Please go ahead and accept your own answer.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma
Get Updates on the Splunk Community!

Your Guide to SPL2 at .conf24!

So, you’re headed to .conf24? You’re in for a good time. Las Vegas weather is just *chef’s kiss* beautiful in ...

Get ready to show some Splunk Certification swagger at .conf24!

Dive into the deep end of data by earning a Splunk Certification at .conf24. We're enticing you again this ...

Built-in Service Level Objectives Management to Bridge the Gap Between Service & ...

Now On-Demand Join us to learn more about how you can leverage Service Level Objectives (SLOs) and the new ...