Timerange preset not changing.

[cchitten]

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?

[cchitten]

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

[stephanefotso]

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 %}