Dashboards & Visualizations

Timerange preset not changing.

cchitten
Path Finder

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?

0 Karma

cchitten
Path Finder

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

0 Karma

stephanefotso
Motivator

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 %}
SGF
0 Karma
Get Updates on the Splunk Community!

Optimize Cloud Monitoring

  TECH TALKS Optimize Cloud Monitoring Tuesday, August 13, 2024  |  11:00AM–12:00PM PST   Register to ...

What's New in Splunk Cloud Platform 9.2.2403?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.2.2403! Analysts can ...

Stay Connected: Your Guide to July and August Tech Talks, Office Hours, and Webinars!

Dive into our sizzling summer lineup for July and August Community Office Hours and Tech Talks. Scroll down to ...