Splunk Search
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
Ask a Question
Solved! Jump to solution

Mapping two searches to the same chart element at different times?

kartik13
Communicator
‎10-07-2015 04:17 AM

Hi,

I am on runtime trying to change the search in the same chart element. As in the chart element refers to one search at a time by mangerid.

For eg.
{"managerid":"search1"} . By clicking the HTML list, I am changing the value of managerid in the chart element. It's giving me an error:
Already have instance with id: search1

Any leads on how to resolve this issue?

Also, how can I re-render the chart if I am able to change the value of managerid at runtime .

Thanks

Tags (4)
0 Karma
Reply
1 Solution
Solved! Jump to solution
Solution

piUek
Path Finder
‎10-08-2015 01:24 AM

Inspecting this issue I've noticed, that refreshing or changing the search will also refresh all the elements linked to it. For example if I have chart with managerid set to a search, i can easily redraw this chart by grabbing the search and refreshing it with for example .startSearch() method. It would all depend on the data and your needs. I have tailored a simple example of html dashboard which would change the search string for searchManager and by doing so it will redraw the chart corresponding to it. I've removed all unnecessary code, but in the production You might use tokens instead of setting the search string from dictionary.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>test3</title>
</head>

<body class="simplexml preload locale-en">
    <select style="width:350px;" tabindex="1" id='targetsDropdown'>
        <option>Search1</option>
        <option>Search2</option>
        <option>Search3</option>
    </select>
    <div id='mybarchart'></div>
    <!-- 
END LAYOUT
-->
    <script src="{{SPLUNKWEB_URL_PREFIX}}/config?autoload=1"></script>
    <script src="{{SPLUNKWEB_URL_PREFIX}}/static/js/i18n.js"></script>
    <script src="{{SPLUNKWEB_URL_PREFIX}}/i18ncatalog?autoload=1"></script>
    <script src="{{SPLUNKWEB_URL_PREFIX}}/static/js/build/simplexml.min/config.js"></script>
    <script type="text/javascript">
    // <![CDATA[
    require.config({
        baseUrl: "{{SPLUNKWEB_URL_PREFIX}}/static/js",
        waitSeconds: 0 // Disable require.js load timeout
    });

    require([
            "splunkjs/mvc",
            "underscore",
            "jquery",
            "splunkjs/mvc/searchmanager",
            "splunkjs/mvc/simplexml/urltokenmodel",
            "splunkjs/mvc/chartview"

        ],
        function(
            mvc,
            _,
            $,
            SearchManager,
            UrlTokenModel,
            chartView
        ) {
            var ChartView = require("splunkjs/mvc/chartview");

            // dictionary with searches (the names have to match the ones on dropdown)
            var searches = {
                'Search1': 'index=_internal | head 100 | stats count by source',
                'Search2': 'index=_internal | head 100 | stats count by processor',
                'Search3': 'index=_internal | head 100 | stats count by name'
            }

            // creating search
            var mysearch = new SearchManager({
                id: "mysearch1",
                earliest_time: "-48h",
                latest_time: "now",
                search: "index=_internal | head 100 | stats count by source"
            });

            // creating barchart
            var barchart = new ChartView({
                id: "example-chart",
                managerid: "mysearch1",
                type: "bar",
                "charting.chart.stackMode": "stacked",
                "charting.legend.placement": "bottom",
                el: $("#mybarchart"),
                height: 450
            }).render();

            // grab the dropdown menu
            var dropdown = $('#targetsDropdown');

            // on change set the search to the corresponding search string from the searches dictionary
            dropdown.on('change', function() {
                mysearch.set('search', searches[this.value]) // this.value is selected value on the dropdown
            })
        }
    );
    // ]]>
    </script>
</body>

</html>

View solution in original post

Reply
Solved! Jump to solution
Solution

piUek
Path Finder
‎10-08-2015 01:24 AM

Inspecting this issue I've noticed, that refreshing or changing the search will also refresh all the elements linked to it. For example if I have chart with managerid set to a search, i can easily redraw this chart by grabbing the search and refreshing it with for example .startSearch() method. It would all depend on the data and your needs. I have tailored a simple example of html dashboard which would change the search string for searchManager and by doing so it will redraw the chart corresponding to it. I've removed all unnecessary code, but in the production You might use tokens instead of setting the search string from dictionary.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>test3</title>
</head>

<body class="simplexml preload locale-en">
    <select style="width:350px;" tabindex="1" id='targetsDropdown'>
        <option>Search1</option>
        <option>Search2</option>
        <option>Search3</option>
    </select>
    <div id='mybarchart'></div>
    <!-- 
END LAYOUT
-->
    <script src="{{SPLUNKWEB_URL_PREFIX}}/config?autoload=1"></script>
    <script src="{{SPLUNKWEB_URL_PREFIX}}/static/js/i18n.js"></script>
    <script src="{{SPLUNKWEB_URL_PREFIX}}/i18ncatalog?autoload=1"></script>
    <script src="{{SPLUNKWEB_URL_PREFIX}}/static/js/build/simplexml.min/config.js"></script>
    <script type="text/javascript">
    // <![CDATA[
    require.config({
        baseUrl: "{{SPLUNKWEB_URL_PREFIX}}/static/js",
        waitSeconds: 0 // Disable require.js load timeout
    });

    require([
            "splunkjs/mvc",
            "underscore",
            "jquery",
            "splunkjs/mvc/searchmanager",
            "splunkjs/mvc/simplexml/urltokenmodel",
            "splunkjs/mvc/chartview"

        ],
        function(
            mvc,
            _,
            $,
            SearchManager,
            UrlTokenModel,
            chartView
        ) {
            var ChartView = require("splunkjs/mvc/chartview");

            // dictionary with searches (the names have to match the ones on dropdown)
            var searches = {
                'Search1': 'index=_internal | head 100 | stats count by source',
                'Search2': 'index=_internal | head 100 | stats count by processor',
                'Search3': 'index=_internal | head 100 | stats count by name'
            }

            // creating search
            var mysearch = new SearchManager({
                id: "mysearch1",
                earliest_time: "-48h",
                latest_time: "now",
                search: "index=_internal | head 100 | stats count by source"
            });

            // creating barchart
            var barchart = new ChartView({
                id: "example-chart",
                managerid: "mysearch1",
                type: "bar",
                "charting.chart.stackMode": "stacked",
                "charting.legend.placement": "bottom",
                el: $("#mybarchart"),
                height: 450
            }).render();

            // grab the dropdown menu
            var dropdown = $('#targetsDropdown');

            // on change set the search to the corresponding search string from the searches dictionary
            dropdown.on('change', function() {
                mysearch.set('search', searches[this.value]) // this.value is selected value on the dropdown
            })
        }
    );
    // ]]>
    </script>
</body>

</html>
Reply
Solved! Jump to solution

kartik13
Communicator
‎10-08-2015 02:36 AM

Bingo !!!! that i was looking for Thanks

0 Karma
Reply
Solved! Jump to solution

piUek
Path Finder
‎10-07-2015 07:19 AM

How are You changing this managerid value?

Can You give more details - how these searches are different? It would be easier to change search string or add PostProcessManager than changing the whole manager.

0 Karma
Reply
Solved! Jump to solution

kartik13
Communicator
‎10-07-2015 10:41 PM

Yeah i know but i have created a dropdown through bootstrap which has an id related to it, which corresponds to the search id of the searches . The searches are from summary indexes .Thats why couldn't use the PostProcessManager. So if by token change i will be able to map different searches to the same chart element. But i am not able to set the token of managerid in Chart element .Do u have any leads on that. Is that possible.

0 Karma
Reply
Get Updates on the Splunk Community!

ICYMI - Check out the latest releases of Splunk Edge Processor

Splunk is pleased to announce the latest enhancements to Splunk Edge Processor.  HEC Receiver authorization ...

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 ...