Dashboards & Visualizations

In web frame work 6 how to add time picker to bubble chart example

New Member

My requirement is that to add timepicker to bubble chart developed in d3 code simple_xml_examples.
I have tried following to implement suggeted in below example but it is not working
http://answers.splunk.com/answers/107934/timerange-picker-on-splunk-6-new-web-framework?page=1&focus... but still it not working.

can any one plz help me with implementtation.

Thanks

Tags (2)
0 Karma

Motivator
{% timerange id="timerange1" preset="Last 30 days"  %}
 {% searchmanager
    autostart=True
    id="bubbleSearch"
        search="InsertSearchHere"|token_safe}

and a little javascript:

var deps = [ "splunkjs/ready!",
     "splunkjs/mvc/searchmanager",
 "splunkjs/mvc/timerangeview" ];

require(deps, function (mvc) {
var timerange = splunkjs.mvc.Components.getInstance("timerange1");
var bubbleSearch = splunkjs.mvc.Components.getInstance("bubbleSearch");
bubbleSearch .search.set(timerange.val());
timerange.on("change", function () {
    //Set timerange for searches.
     bubbleSearch.search.set(this.val());
    });

});
0 Karma

Communicator

Unfortunately I cant paste you whole file, but here is my implementation - step by step:

Timerange picker in {% block content %}

{% timerange id="timerange1" preset="Last 7 days"  earliest_time="$earlyval$"|token_safe latest_time="$lateval$"|token_safe %}

Bubblechart in {% block content %}

{% bubblechart id="map_clients"  managerid="search_incidents_client" valueField="count" labelField="ClientName" categoryField="ClientName" %}

Search manager in {% block managers %}

{% searchmanager
    id="search_incidents_client"
    search="index=autosupport (sourcetype=critical OR sourcetype=error OR sourcetype=warning) earliest=$earlyval$ latest=$lateval$ | sort -_time | fields + ClientName |  stats count by ClientName"|token_safe
    enable_lookups="true"
    app="ourspaceautosupport"
%}

And thats pretty much about it! 🙂

0 Karma

New Member

thanks MaverickT even this did not help

0 Karma

Communicator

I dont think I understand you correctly, but you have to include $time1$ in search manager. I added variable $time2$ as latest date of event. Search manager code should be something like this:

{% searchmanager
id="bubbleSearch"
search="source=\"mysource.log\" earliest=$time1$ latest=$time2$ | stats count by sourcetype"|token_safe
enable_lookups="false"
app="search"
%}

0 Karma

New Member

I am not sure how to replace values form the example that you posted.here is the sample HTML code.$time1$ is input type.

0 Karma