Splunk Search
×

Join the Conversation

Without signing in, you're just watching from the sidelines. Sign in or Register to connect, share, and be part of the Splunk Community.
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
Got questions? Get answers!

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Meet up IRL or virtually!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

Get Updates on the Splunk Community!

May 2026 Splunk Expert Sessions: Security & Observability

Level Up Your Operations: May 2026 Splunk Expert Sessions Whether you are refining your security posture or ...

Network to App: Observability Unlocked [May & June Series]

In today’s digital landscape, your environment is no longer confined to the data center. It spans complex ...

SPL2 Deep Dives, AppDynamics Integrations, SAML Made Simple and Much More on Splunk ...

Splunk Lantern is Splunk’s customer success center that provides practical guidance from Splunk experts on key ...