Splunk Search

Implementing JS chart with splunk

DavidHourani
Super Champion

Hello everyone,

I've been stuck on this JS issue for quite some time and I hope someone can help me out.

The thing is I wish to use JS charts ( ie.: Google charts,Ichart....) to implement a chart that allows the zoom in/out functionality.

Something like http:// www.fusioncharts.com/explore/zoom-line-chart

I managed to copy the code unto splunk, get it to display on my page but i can't seem to figure out how I can input data from splunk's search unto the charts.

Has anyone tried doing something like that before ?

Best regards,

David

PS: If you can send me working codes or how you personally developed something like that it would be very much appreciated.

0 Karma

DavidHourani
Super Champion

Hello Cory,

Thanks for the link you sent me. I had already went through it during my quest for javascripts.

Basically I wanted to have the "Zoom Chart" function implemented on my dashboards and eventually I ended up using Splunk 6.1 for that because 6.1 natively implements zoom charts on all time charts and pivots. Also you should know that using JS can make your source code a bit complex and might not be the best idea because you never know how splunk updates would effect your code.

Anyway to get back to your question, eventually I found 2 approaches to JS:

1- Instead of converting the entire page to HTML or using django, I simply added an HTML tag on my dashboard. The HTML tag calls the JS that is in the "static" folder in my app and the data is sent to the JS via the search manager.

 <dashboard script="highchart_dash.js">
       <label>highchart_dash</label>
      <description/>
      <row>
            <html>
            <div id="highcharts_container" style="min-width: 310px; height: 400px; margin: 0 auto">
            <div id="search" string="index=_internal|head 20000 |timechart count " earliest="-240h" latest="now"/>
            </div>
            </html>
        </row>
       </dashboard>

2-I found the Python version on highcharts and implemented it as an advanced search. You need to know some python to do that...it took me quite some time and eventually the code I made was kind of slow so I didn't use this approach.

If you want the source code of the JS to see how the search manager is configured in it let me know.

Regards,
David

0 Karma

kerry_chin
New Member

Hello David,

Just checking in to see if you had a chance to review my earlier request? I'm hoping you can share your "highchart_dash.js" with me, so I can gain a better understanding of how to hook a Highcharts chart to data from a Splunk query.

Thank you!
Kerry

0 Karma

kerry_chin
New Member

Hello David,

My organization has tasked me with exploring how to use Highcharts in Splunk. I am extremely new to Splunk, and would love to see how you accomplished your solution. I will be studying the info at the "Add a third-party visualization" link, but your dashboard snippet is different from theirs -- you include a search tag -- and I'm interested in seeing what you did in your "highchart_dash.js", as well.

Thanks for any and all help!
Kerry

0 Karma

cgekoski
Path Finder

Hey David,

Can you share how you added the JS to your dashboard, also, did you ever get this working. I am currently looking at a way to change our dashboards to use something like; www.chartsjs.org

I found an article explaining somewhat how to implement but really new to splunk and java. This may be the answer you were looking for also on how to get your data to use java and 3rd party visuals.

http://dev.splunk.com/view/webframework-splunkjsstack/SP-CAAAERK

Any help would be greatful,

Cory

0 Karma

DavidHourani
Super Champion

Hello cory, See answer bellow.

0 Karma

psanford_splunk
Splunk Employee
Splunk Employee

Here are a few links that might help.

The web framework toolkit provides a number of examples to tie visualization with search.

http://apps.splunk.com/app/1613/

Here is a blog showing how to use google maps:
http://blogs.splunk.com/2013/11/14/my-experience-of-building-splunk-application

The JavaScript SDK has a number of examples in it:
http://dev.splunk.com/view/javascript-sdk/SP-CAAAECM

DavidHourani
Super Champion

Thank you for the answer.

The thing is that I converted a dashboard to HTML and I just want to add JS code to it. I am able to integrate the JS but I can't seem to find how i can use the information from a search result as input for the js chart/panel...

0 Karma
Get Updates on the Splunk Community!

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...

What’s New in Splunk Security Essentials 3.8.0?

Splunk Security Essentials (SSE) is an app that can amplify the power of your existing Splunk Cloud Platform, ...

Let’s Get You Certified – Vegas-Style at .conf24

Are you ready to level up your Splunk game? Then, let’s get you certified live at .conf24 – our annual user ...