I have created a time range picker in javascript with django bindings and it is rendering fine on the page except that it doesn't update with the preset value i have selected at start. It defaults to "all time" which causes my panels to load very slowly as there is a lot of data on the indexes.
var globaltimerange = new TimeRangeView({
id: "global-timerange",
preset: "Today",
el: $("#globaltimerangeview")
}).render();
Has anyone else experienced this?
I found out that it was an issue in the current release of splunk (found some other mentions of the problem)
http://answers.splunk.com/answers/179865/why-is-the-time-range-preset-in-web-framework-view.html
It should work. I don't know how you are handling your code, but i think you are surely making errors on it. Bellow is a basic example that can help you. Just test it, it is working very well.
timerangePreset.html
{% extends 'splunkdj:base_with_app_bar.html' %}
{% load splunkmvc %}
{% block title %}Splunk views (JavaScript){% endblock title %}
{% block css %}
<link rel="stylesheet" type="text/css" href="{{STATIC_URL}}{{app_name}}/custom.css" />
<link rel="stylesheet" type="text/css" href="{{STATIC_URL}}splunkjs/css/dashboard.css" />
{% endblock css %}
{% block content %}
<div class="dashboard-body container-fluid main-section-body">
<div class="row">
<div class="dashboard-header clearfix">
<p>This example shows how to set up a timerange using JavaScript. Tokens are used to keep the search controls in sync with the search manager.</p>
</div>
</div>
<!-- Row -->
<div class="dashboard-row">
<div class="dashboard-cell" style="width: 20%;">
<div class="dashboard-panel">
<div class="dashboard-element">
<div class="panel-head">
<h3>TimeRange</h3>
</div>
<div class="panel-body">
<div id="mytimerangeview"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Row -->
<div class="dashboard-row">
<div class="dashboard-cell" style="width: 100%;">
<div class="dashboard-panel">
<div class="dashboard-element">
<div class="panel-head">
<h3>Table</h3>
</div>
<div class="panel-body">
<div id="mytable"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Row -->
<div class="dashboard-row">
<div class="dashboard-cell" style="width: 100%;">
<div class="dashboard-panel">
<div class="dashboard-element">
<div class="panel-head">
<h3>Chart</h3>
</div>
<div class="panel-body">
<div id="mychart"></div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock content %}
{% block js %}
<script>
var deps = [
"splunkjs/ready!",
"splunkjs/mvc/searchmanager",
"splunkjs/mvc/chartview",
"splunkjs/mvc/tableview",
"splunkjs/mvc/timerangeview"
];
require(deps, function(mvc) {
// Load individual components
var SearchManager = require("splunkjs/mvc/searchmanager");
var ChartView = require("splunkjs/mvc/chartview");
var TableView = require("splunkjs/mvc/tableview");
var TimeRangeView = require("splunkjs/mvc/timerangeview");
// Create a stats search for chart ant Table examples
var mysearch = new SearchManager({
id: "example-search",
search: "index=_internal | head 1000 | stats count by sourcetype",
preview: true,
cache: true
});
// Create views
// Instantiate a view using the default time range picker
var mytimerange = new TimeRangeView({
id: "example-timerange",
managerid: "example-search",
preset: "Today",
el: $("#mytimerangeview")
}).render();
// Update the search manager when the time range changes
mytimerange.on("change", function() {
mysearch.settings.set(mytimerange.val());
});
var table1 = new TableView({
id:"example-table",
managerid: "example-search",
el: $("#mytable")
}).render();
var chart1 = new ChartView({
id:"example-chart",
managerid: "example-search",
type: "bar",
el: $("#mychart")
}).render();
});
</script>
{% endblock js %}