topic Re: Mapping two searches to the same chart element at different times? in Splunk Search

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

kartik13 — Wed, 07 Oct 2015 11:17:49 GMT

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

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

piUek — Wed, 07 Oct 2015 14:19:45 GMT

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.

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

kartik13 — Thu, 08 Oct 2015 05:41:58 GMT

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.

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

piUek — Thu, 08 Oct 2015 08:24:30 GMT

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>

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

kartik13 — Thu, 08 Oct 2015 09:36:50 GMT

Bingo !!!! that i was looking for Thanks