Splunk Search

How to embed a timechart visualization from a Splunk query into a web app?

emiliavanderwer
Explorer

I have the following Splunk query that produces the following visualization:

alt text

I would like to embed this exact visualization into a web app using an iframe. How can I do this?

Currently, I am using the Splunk HTTP REST API and can submit & get the results back from this search using the following endpoint:
/servicesNS/nameofmyapp/nameofmynamespace/search/jobs/1535641234.45678?output_mode=json

However, I would like a src URL to the visualization that can be embedded in an iframe. Is there an endpoint that I can query instead that will give the URL to the visualization?

1 Solution

aromanauskas
Path Finder

You have two basic options for providing visual data in an external application with Splunk.

Option 1: Grab the data with directly from a job. Then using a local application turn that data into a visualization.

Option 2: Use the SplunkJS Framework. To both pull the data from Splunk and create the visualization.

Option 2 in my opinion is a little bit easier since you don't need to learn how to convert the data to be usable by whatever viz tool you're going to choose, ie (Ds3.js). You can either jump over to the SplunkJS manual, or there is a really simple version in
"Learning Splunk Web Framework" by Vincent Sesto/Packt Pub 9781786462947 .

The basics though are:

  • Install a websever Nginx or Apache
  • Configure a proxy between the webserver and Splunk
  • Install the SplunkJS SDK
  • Add HTML / JS for search
  • Add HTML / JS for charts

View solution in original post

aromanauskas
Path Finder

If you are using a homegrown C# SDK or the Splunk C# SDK then there are a few options.

Option 1, use D3.js for the visualization:
ASP example for D3

Option 2, convert OR incorporate the Splunk C# SDK which has the ability to create charts. Timeline for example: Charting Adapter

0 Karma

aromanauskas
Path Finder

You have two basic options for providing visual data in an external application with Splunk.

Option 1: Grab the data with directly from a job. Then using a local application turn that data into a visualization.

Option 2: Use the SplunkJS Framework. To both pull the data from Splunk and create the visualization.

Option 2 in my opinion is a little bit easier since you don't need to learn how to convert the data to be usable by whatever viz tool you're going to choose, ie (Ds3.js). You can either jump over to the SplunkJS manual, or there is a really simple version in
"Learning Splunk Web Framework" by Vincent Sesto/Packt Pub 9781786462947 .

The basics though are:

  • Install a websever Nginx or Apache
  • Configure a proxy between the webserver and Splunk
  • Install the SplunkJS SDK
  • Add HTML / JS for search
  • Add HTML / JS for charts

emiliavanderwer
Explorer

Thank you for your response. Option 2 is a little bit complicated because the web app is ASP.NET and written in C#. The way we have our current framework is we wrote a custom C# Splunk SDK that grabs the data.

Is there any way to pull the data from Splunk within our C# SDK and pass the data to the SplunkJS framework to create the visualization (instead of letting the SplunkJS SDK do both of the steps)?

0 Karma

mstjohn_splunk
Splunk Employee
Splunk Employee

hey @emiliavanderwerf , Looks like @aronmanauskas answered your question! What a nice user. Would you mind tossing them a like? Our users live for those likes 🙂

emiliavanderwer
Explorer

Liked. Thanks!

Get Updates on the Splunk Community!

How to Monitor Google Kubernetes Engine (GKE)

We’ve looked at how to integrate Kubernetes environments with Splunk Observability Cloud, but what about ...

Index This | How can you make 45 using only 4?

October 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with this ...

Splunk Education Goes to Washington | Splunk GovSummit 2024

If you’re in the Washington, D.C. area, this is your opportunity to take your career and Splunk skills to the ...