Dashboards & Visualizations

Drilldown on multiple charts in a dashboard

vikas_sood
Explorer

Hi,

I have a dashboard with 3 panels:

1 - area chart using token1 and token2

2 - bar chart using token2 and token3

3 - panel ( table ) populates data based on drilldown on above charts

Whenever I drilldown on area chart, drilldown works fine.

Whenever I drilldown on bar chart, drilldown works fine for bar chart. However, it also refreshes the area chart.  Is there a way to stop area chart from refreshing, when I drilldown on bar chart? 

 

Labels (5)
0 Karma
1 Solution

kamlesh_vaghela
SplunkTrust
SplunkTrust

@vikas_sood 

This behaviour is due to tkn_search_txt token which is used in Area chart also.

So what I suggest just change the token name to tkn_search_txt_1 in both drilldown and use it in table search.

Like this.

<form theme="light">
    <label>Dashboard</label>
    <fieldset submitButton="false" autoRun="false">
        <input type="time" token="tkn_search" searchWhenChanged="true">
            <label>Select Time Range</label>
            <default>
                <earliest>-12h@h</earliest>
                <latest>now</latest>
            </default>
        </input>
        <input type="dropdown" token="tkn_server">
            <label>Domain</label>
            <fieldForLabel>index</fieldForLabel>
            <fieldForValue>index</fieldForValue>
            <search>
                <query>|eventcount summarize=false index="*" | dedup index | fields index</query>
                <earliest>-30d@d</earliest>
                <latest>now</latest>
            </search>
        </input>
        <input type="dropdown" token="tkn_host" searchWhenChanged="true">
            <label>Host</label>
            <fieldForLabel>host</fieldForLabel>
            <fieldForValue>host</fieldForValue>
            <search>
                <query>| metadata type=hosts index=$tkn_server$ | fields host</query>
                <earliest>-30d@d</earliest>
                <latest>now</latest>
            </search>
        </input>
        <input type="text" token="tkn_search_txt" searchWhenChanged="true">
            <label>Search Text</label>
            <default>ERROR</default>
        </input>
    </fieldset>
    <row>
        <panel id="DataChartPanel" depends="tkn_search_txt">
            <title>Logs Time Series</title>
            <chart>
                <search>
                    <query>index=$tkn_server$ host=$tkn_host$  $tkn_search_txt$ | timechart count</query>
                    <earliest>$tkn_search.earliest$</earliest>
                    <latest>$tkn_search.latest$</latest>
                    <sampleRatio>1</sampleRatio>
                </search>
                <option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
                <option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option>
                <option name="charting.axisTitleX.text">Time ( EST TZ )</option>
                <option name="charting.axisTitleX.visibility">visible</option>
                <option name="charting.axisTitleY.text">Number of Errors</option>
                <option name="charting.axisTitleY.visibility">visible</option>
                <option name="charting.axisTitleY2.visibility">visible</option>
                <option name="charting.axisX.abbreviation">none</option>
                <option name="charting.axisX.scale">linear</option>
                <option name="charting.axisY.abbreviation">none</option>
                <option name="charting.axisY.scale">linear</option>
                <option name="charting.axisY2.abbreviation">none</option>
                <option name="charting.axisY2.enabled">0</option>
                <option name="charting.axisY2.scale">inherit</option>
                <option name="charting.chart">area</option>
                <option name="charting.chart.bubbleMaximumSize">50</option>
                <option name="charting.chart.bubbleMinimumSize">10</option>
                <option name="charting.chart.bubbleSizeBy">area</option>
                <option name="charting.chart.nullValueMode">gaps</option>
                <option name="charting.chart.showDataLabels">all</option>
                <option name="charting.chart.sliceCollapsingThreshold">0.01</option>
                <option name="charting.chart.stackMode">default</option>
                <option name="charting.chart.style">shiny</option>
                <option name="charting.drilldown">all</option>
                <option name="charting.layout.splitSeries">0</option>
                <option name="charting.layout.splitSeries.allowIndependentYRanges">0</option>
                <option name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</option>
                <option name="charting.legend.mode">standard</option>
                <option name="charting.legend.placement">none</option>
                <option name="charting.lineWidth">2</option>
                <option name="height">175</option>
                <option name="refresh.display">progressbar</option>
                <drilldown>
                    <eval token="drilldown.earliest">$earliest$</eval>
                    <eval token="drilldown.latest">$latest$</eval>
                    <set token="tkn_sourcetype">*</set>
                    <set token="tkn_search_txt_1">$tkn_search_txt$</set>
                </drilldown>
            </chart>
        </panel>
    </row>
    <row>
        <panel id="AcessData">
            <title>Access Logs</title>
            <chart>
                <search>
                    <query>index=$tkn_server$ host=$tkn_host$  | chart count by StatusCode</query>
                    <earliest>$tkn_search.earliest$</earliest>
                    <latest>$tkn_search.latest$</latest>
                </search>
                <option name="charting.axisTitleX.visibility">visible</option>
                <option name="charting.axisTitleY.text">Count of Status Codes</option>
                <option name="charting.axisTitleY.visibility">visible</option>
                <option name="charting.axisY.scale">log</option>
                <option name="charting.chart">bar</option>
                <option name="charting.chart.showDataLabels">all</option>
                <option name="charting.drilldown">all</option>
                <option name="charting.legend.placement">none</option>
                <option name="height">175</option>
                <option name="refresh.display">progressbar</option>
                <drilldown>
                    <set token="tkn_sourcetype">access</set>
                    <eval token="drilldown.earliest">$earliest$</eval>
                    <eval token="drilldown.latest">$latest$</eval>
                    <set token="tkn_search_txt_1">StatusCode=$click.value$</set>
                </drilldown>
            </chart>
        </panel>
    </row>
    <row>
        <panel id="DataPanel">
            <event>
                <title>Errors</title>
                <search>
                    <query>index=$tkn_server$ host=$tkn_host$ sourcetype=$tkn_sourcetype$ $tkn_search_txt_1$</query>
                    <earliest>$drilldown.earliest$</earliest>
                    <latest>$drilldown.latest$</latest>
                </search>
                <option name="list.drilldown">none</option>
                <option name="refresh.display">progressbar</option>
                <option name="rowNumbers">1</option>
                <option name="table.drilldown">none</option>
                <option name="type">list</option>
            </event>
        </panel>
    </row>
</form>

 

Thanks
KV
▄︻̷̿┻̿═━一

If any of my reply helps you to solve the problem Or gain knowledge, an upvote would be appreciated.

View solution in original post

kamlesh_vaghela
SplunkTrust
SplunkTrust

@vikas_sood 

Can you please share your sample XML?

KV

0 Karma

vikas_sood
Explorer

@kamlesh_vaghela 

<form theme="light">
<label>Dashboard</label>
<fieldset submitButton="false" autoRun="false">
<input type="time" token="tkn_search" searchWhenChanged="true">
<label>Select Time Range</label>
<default>
<earliest>-12h@h</earliest>
<latest>now</latest>
</default>
</input>
<input type="dropdown" token="tkn_server">
<label>Domain</label>
<fieldForLabel>index</fieldForLabel>
<fieldForValue>index</fieldForValue>
<search>
<query>|eventcount summarize=false index="*" | dedup index | fields index</query>
<earliest>-30d@d</earliest>
<latest>now</latest>
</search>
</input>
<input type="dropdown" token="tkn_host" searchWhenChanged="true">
<label>Host</label>
<fieldForLabel>host</fieldForLabel>
<fieldForValue>host</fieldForValue>
<search>
<query>| metadata type=hosts index=$tkn_server$ | fields host</query>
<earliest>-30d@d</earliest>
<latest>now</latest>
</search>
</input>
<input type="text" token="tkn_search_txt" searchWhenChanged="true">
<label>Search Text</label>
<default>ERROR</default>
</input>
</fieldset>
<row>
<panel id="DataChartPanel" depends="tkn_search_txt">
<title>Logs Time Series</title>
<chart>
<search>
<query>index=$tkn_server$ host=$tkn_host$ sourcetype=outlog $tkn_search_txt$ | timechart count</query>
<earliest>$tkn_search.earliest$</earliest>
<latest>$tkn_search.latest$</latest>
<sampleRatio>1</sampleRatio>
</search>
<option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
<option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option>
<option name="charting.axisTitleX.text">Time ( EST TZ )</option>
<option name="charting.axisTitleX.visibility">visible</option>
<option name="charting.axisTitleY.text">Number of Errors</option>
<option name="charting.axisTitleY.visibility">visible</option>
<option name="charting.axisTitleY2.visibility">visible</option>
<option name="charting.axisX.abbreviation">none</option>
<option name="charting.axisX.scale">linear</option>
<option name="charting.axisY.abbreviation">none</option>
<option name="charting.axisY.scale">linear</option>
<option name="charting.axisY2.abbreviation">none</option>
<option name="charting.axisY2.enabled">0</option>
<option name="charting.axisY2.scale">inherit</option>
<option name="charting.chart">area</option>
<option name="charting.chart.bubbleMaximumSize">50</option>
<option name="charting.chart.bubbleMinimumSize">10</option>
<option name="charting.chart.bubbleSizeBy">area</option>
<option name="charting.chart.nullValueMode">gaps</option>
<option name="charting.chart.showDataLabels">all</option>
<option name="charting.chart.sliceCollapsingThreshold">0.01</option>
<option name="charting.chart.stackMode">default</option>
<option name="charting.chart.style">shiny</option>
<option name="charting.drilldown">all</option>
<option name="charting.layout.splitSeries">0</option>
<option name="charting.layout.splitSeries.allowIndependentYRanges">0</option>
<option name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</option>
<option name="charting.legend.mode">standard</option>
<option name="charting.legend.placement">none</option>
<option name="charting.lineWidth">2</option>
<option name="height">175</option>
<option name="refresh.display">progressbar</option>
<drilldown>
<eval token="drilldown.earliest">$earliest$</eval>
<eval token="drilldown.latest">$latest$</eval>
<set token="tkn_sourcetype">outlog</set>
<set token="tkn_search_txt">$tkn_search_txt$</set>
</drilldown>
</chart>
</panel>
</row>
<row>
<panel id="AcessData">
<title>Access Logs</title>
<chart>
<search>
<query>index=$tkn_server$ host=$tkn_host$ sourcetype=access | chart count by StatusCode</query>
<earliest>$tkn_search.earliest$</earliest>
<latest>$tkn_search.latest$</latest>
</search>
<option name="charting.axisTitleX.visibility">visible</option>
<option name="charting.axisTitleY.text">Count of Status Codes</option>
<option name="charting.axisTitleY.visibility">visible</option>
<option name="charting.axisY.scale">log</option>
<option name="charting.chart">bar</option>
<option name="charting.chart.showDataLabels">all</option>
<option name="charting.drilldown">all</option>
<option name="charting.legend.placement">none</option>
<option name="height">175</option>
<option name="refresh.display">progressbar</option>
<drilldown>
<set token="tkn_sourcetype">access</set>
<eval token="drilldown.earliest">$earliest$</eval>
<eval token="drilldown.latest">$latest$</eval>
<set token="tkn_search_txt">StatusCode=$click.value$</set>
</drilldown>
</chart>
</panel>
</row>
<row>
<panel id="DataPanel">
<event>
<title>Errors</title>
<search>
<query>index=$tkn_server$ host=$tkn_host$ sourcetype=$tkn_sourcetype$ $tkn_search_txt$</query>
<earliest>$drilldown.earliest$</earliest>
<latest>$drilldown.latest$</latest>
</search>
<option name="list.drilldown">none</option>
<option name="refresh.display">progressbar</option>
<option name="rowNumbers">1</option>
<option name="table.drilldown">none</option>
<option name="type">list</option>
</event>
</panel>
</row>
</form>

 

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@vikas_sood 

This behaviour is due to tkn_search_txt token which is used in Area chart also.

So what I suggest just change the token name to tkn_search_txt_1 in both drilldown and use it in table search.

Like this.

<form theme="light">
    <label>Dashboard</label>
    <fieldset submitButton="false" autoRun="false">
        <input type="time" token="tkn_search" searchWhenChanged="true">
            <label>Select Time Range</label>
            <default>
                <earliest>-12h@h</earliest>
                <latest>now</latest>
            </default>
        </input>
        <input type="dropdown" token="tkn_server">
            <label>Domain</label>
            <fieldForLabel>index</fieldForLabel>
            <fieldForValue>index</fieldForValue>
            <search>
                <query>|eventcount summarize=false index="*" | dedup index | fields index</query>
                <earliest>-30d@d</earliest>
                <latest>now</latest>
            </search>
        </input>
        <input type="dropdown" token="tkn_host" searchWhenChanged="true">
            <label>Host</label>
            <fieldForLabel>host</fieldForLabel>
            <fieldForValue>host</fieldForValue>
            <search>
                <query>| metadata type=hosts index=$tkn_server$ | fields host</query>
                <earliest>-30d@d</earliest>
                <latest>now</latest>
            </search>
        </input>
        <input type="text" token="tkn_search_txt" searchWhenChanged="true">
            <label>Search Text</label>
            <default>ERROR</default>
        </input>
    </fieldset>
    <row>
        <panel id="DataChartPanel" depends="tkn_search_txt">
            <title>Logs Time Series</title>
            <chart>
                <search>
                    <query>index=$tkn_server$ host=$tkn_host$  $tkn_search_txt$ | timechart count</query>
                    <earliest>$tkn_search.earliest$</earliest>
                    <latest>$tkn_search.latest$</latest>
                    <sampleRatio>1</sampleRatio>
                </search>
                <option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
                <option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option>
                <option name="charting.axisTitleX.text">Time ( EST TZ )</option>
                <option name="charting.axisTitleX.visibility">visible</option>
                <option name="charting.axisTitleY.text">Number of Errors</option>
                <option name="charting.axisTitleY.visibility">visible</option>
                <option name="charting.axisTitleY2.visibility">visible</option>
                <option name="charting.axisX.abbreviation">none</option>
                <option name="charting.axisX.scale">linear</option>
                <option name="charting.axisY.abbreviation">none</option>
                <option name="charting.axisY.scale">linear</option>
                <option name="charting.axisY2.abbreviation">none</option>
                <option name="charting.axisY2.enabled">0</option>
                <option name="charting.axisY2.scale">inherit</option>
                <option name="charting.chart">area</option>
                <option name="charting.chart.bubbleMaximumSize">50</option>
                <option name="charting.chart.bubbleMinimumSize">10</option>
                <option name="charting.chart.bubbleSizeBy">area</option>
                <option name="charting.chart.nullValueMode">gaps</option>
                <option name="charting.chart.showDataLabels">all</option>
                <option name="charting.chart.sliceCollapsingThreshold">0.01</option>
                <option name="charting.chart.stackMode">default</option>
                <option name="charting.chart.style">shiny</option>
                <option name="charting.drilldown">all</option>
                <option name="charting.layout.splitSeries">0</option>
                <option name="charting.layout.splitSeries.allowIndependentYRanges">0</option>
                <option name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</option>
                <option name="charting.legend.mode">standard</option>
                <option name="charting.legend.placement">none</option>
                <option name="charting.lineWidth">2</option>
                <option name="height">175</option>
                <option name="refresh.display">progressbar</option>
                <drilldown>
                    <eval token="drilldown.earliest">$earliest$</eval>
                    <eval token="drilldown.latest">$latest$</eval>
                    <set token="tkn_sourcetype">*</set>
                    <set token="tkn_search_txt_1">$tkn_search_txt$</set>
                </drilldown>
            </chart>
        </panel>
    </row>
    <row>
        <panel id="AcessData">
            <title>Access Logs</title>
            <chart>
                <search>
                    <query>index=$tkn_server$ host=$tkn_host$  | chart count by StatusCode</query>
                    <earliest>$tkn_search.earliest$</earliest>
                    <latest>$tkn_search.latest$</latest>
                </search>
                <option name="charting.axisTitleX.visibility">visible</option>
                <option name="charting.axisTitleY.text">Count of Status Codes</option>
                <option name="charting.axisTitleY.visibility">visible</option>
                <option name="charting.axisY.scale">log</option>
                <option name="charting.chart">bar</option>
                <option name="charting.chart.showDataLabels">all</option>
                <option name="charting.drilldown">all</option>
                <option name="charting.legend.placement">none</option>
                <option name="height">175</option>
                <option name="refresh.display">progressbar</option>
                <drilldown>
                    <set token="tkn_sourcetype">access</set>
                    <eval token="drilldown.earliest">$earliest$</eval>
                    <eval token="drilldown.latest">$latest$</eval>
                    <set token="tkn_search_txt_1">StatusCode=$click.value$</set>
                </drilldown>
            </chart>
        </panel>
    </row>
    <row>
        <panel id="DataPanel">
            <event>
                <title>Errors</title>
                <search>
                    <query>index=$tkn_server$ host=$tkn_host$ sourcetype=$tkn_sourcetype$ $tkn_search_txt_1$</query>
                    <earliest>$drilldown.earliest$</earliest>
                    <latest>$drilldown.latest$</latest>
                </search>
                <option name="list.drilldown">none</option>
                <option name="refresh.display">progressbar</option>
                <option name="rowNumbers">1</option>
                <option name="table.drilldown">none</option>
                <option name="type">list</option>
            </event>
        </panel>
    </row>
</form>

 

Thanks
KV
▄︻̷̿┻̿═━一

If any of my reply helps you to solve the problem Or gain knowledge, an upvote would be appreciated.

vikas_sood
Explorer

Thanks... i suspected it was token issue, but was this close..din't know that

Tags (1)
0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...