Implementing JS chart with splunk

DavidHourani · ‎02-14-2014

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.

DavidHourani · ‎06-13-2014

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

kerry_chin · ‎03-14-2016

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

kerry_chin · ‎02-24-2016

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

cgekoski · ‎06-12-2014

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

DavidHourani · ‎06-13-2014

Hello cory, See answer bellow.

psanford_splunk · ‎02-14-2014

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 · ‎02-20-2014

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...

Implementing JS chart with splunk

Say goodbye to manually analyzing phishing and malware threats with Splunk Attack ...

AppDynamics is now part of Splunk Ideas

Advanced Splunk Data Management Strategies