Dashboards & Visualizations

timerange picker on splunk 6 new web framework

crt89
Communicator

Good day everyone,

I'm starting to use Splunk 6 new Web Framework and I am having a difficulty on making my timerange picker to apply on my searches. I'm following the Django bindings provided in Splunk documentation

Here's a sample of my code:
Here is my code for my timerange picker:

{% timerange id="global-timerange" managerid="downsites-search" earliest_time="-2h@h" latest_time="now" %}

Here's my code for my search manager:

    {% searchmanager
id="downsites-search" 
search='tag=all_sites SECTOR=ALL eventtype=2G OR eventtype=3G | stats count(eval(eventtype="2G")) as count_2G count(eval(eventtype="3G")) as count_3G by _time,Site_ID,BAND,source | lookup installed_base Site_ID OUTPUT total_2G,total_3G,total_count | eval downsites_indentifier=if(count_2G < total_2G OR count_3G < total_3G,0,1) | WHERE downsites_indentifier=1 | lookup site_info Site_ID OUTPUT WGS84_Longitude,WGS84_Latitude | table Site_ID WGS84_Longitude WGS84_Latitude | geostats globallimit=0 latfield=WGS84_Latitude longfield=WGS84_Longitude maxzoomlevel=18 dc(Site_ID) by Site_ID'
earliest_time="$earliestTime$"|token_safe
latest_time="$latestTimes$"|token_safe
autostart=True
preview=True 
cache=False %}

And here's the code for my maps to render the search:

{% splunkmap id="map-of-downsites" managerid="downsites-search" height="500px" tileSource="openStreetMap" %}

I can see that I have applied the timerange picker values on my timerange picker but the map still return results from all time. I don't really know if I missed a parameter for my timerange picker, I have properly set the managerid for the maps and timerangepicker.

Hope you can help me, thanks.

0 Karma
1 Solution

magnew_splunk
Splunk Employee
Splunk Employee

Hello,

Thanks for posting. Do you have any Javascript in your page as well or just these Django tags? As it stands, the framework requires you to explicitly tie values being exported by the timerange picker to the values being used by the search manager. This can either be done in JavaScript or by using token binding. To do this with token binding without adding any JavaScript, add the tokens to both the timerange picker and the search. For example your timerange picker will look something like:

   {% timerange id="timerange1" managerid="simplesearch1"  earliest_time="$et$"|token_safe latest_time="$lt$"|token_safe %}

Which will set the tokens et and lt when the timerange is changed. Then your searchmanager will listen to these tokens like this:

{% searchmanager id="simplesearch1" ... earliest_time="$et$"|token_safe latest_time="$lt$"|token_safe ... %}

You can do the same thing in JavaScript without tokens by simply listening to the timerange picker change event and setting the search properties accordingly. For example:

// Get references to the controls
var search1 = mvc.Components.getInstance("simplesearch1");
var timerange1 = mvc.Components.getInstance("timerange1"); 

// Listen to event
timerange1.on("change", function() {
    search1.search.set(timerange1.val());
});

Does that all make sense? I hope that helps. Also, could you please point me to where in our documentation we are not doing this correctly. We'll get it fixed.

View solution in original post

andyrobinson
New Member

I'd like to raise jeffland's question again. I have multiple charts on my app page that should share a common time range control. Can you do this with just django tags or do you have to write javascript to accomplish this?

0 Karma

apruneda_splunk
Splunk Employee
Splunk Employee

I posted a new topic (and updated the reference pages) with new example code for how to do this using tokens in Django tags:
How to use search controls using Django

magnew_splunk
Splunk Employee
Splunk Employee

Hello,

Thanks for posting. Do you have any Javascript in your page as well or just these Django tags? As it stands, the framework requires you to explicitly tie values being exported by the timerange picker to the values being used by the search manager. This can either be done in JavaScript or by using token binding. To do this with token binding without adding any JavaScript, add the tokens to both the timerange picker and the search. For example your timerange picker will look something like:

   {% timerange id="timerange1" managerid="simplesearch1"  earliest_time="$et$"|token_safe latest_time="$lt$"|token_safe %}

Which will set the tokens et and lt when the timerange is changed. Then your searchmanager will listen to these tokens like this:

{% searchmanager id="simplesearch1" ... earliest_time="$et$"|token_safe latest_time="$lt$"|token_safe ... %}

You can do the same thing in JavaScript without tokens by simply listening to the timerange picker change event and setting the search properties accordingly. For example:

// Get references to the controls
var search1 = mvc.Components.getInstance("simplesearch1");
var timerange1 = mvc.Components.getInstance("timerange1"); 

// Listen to event
timerange1.on("change", function() {
    search1.search.set(timerange1.val());
});

Does that all make sense? I hope that helps. Also, could you please point me to where in our documentation we are not doing this correctly. We'll get it fixed.

jeffland
SplunkTrust
SplunkTrust

Using the variant with django tags, is there a way to use the timerange tokens with more than one searchmanager? Accessing the tokens from a searchmanager other than the one specified in the timerange tag does not seem to work.

0 Karma

crt89
Communicator

Hi there @magnew_splunk thank you for answering. Its working now, your a life saver! About the documentation here is the link of the page: http://docs.splunk.com/DocumentationStatic/WebFramework/1.0/compref_timerange.html
It has a note that you need to use tokens, it would be nice if you also put an example where you use the tokens. Just like your answer on my query (and to other modules as well). It would be a nice help for us new developers exploring the new Splunk 6 Web Framework. Thanks again.

0 Karma

unclethan
Path Finder

This looks like it will do the trick, thank you.
As for the documentation, I was unable to locate an example showing the django tag version.
Much appreciated

0 Karma
Get Updates on the Splunk Community!

Introducing the 2024 SplunkTrust!

Hello, Splunk Community! We are beyond thrilled to announce our newest group of SplunkTrust members!  The ...

Introducing the 2024 Splunk MVPs!

We are excited to announce the 2024 cohort of the Splunk MVP program. Splunk MVPs are passionate members of ...

Splunk Custom Visualizations App End of Life

The Splunk Custom Visualizations apps End of Life for SimpleXML will reach end of support on Dec 21, 2024, ...