Dashboards & Visualizations

How can I drill down from one panel (pie chart) to another panel in the same dashboard, passing a variable from the chart?

Communicator

i create query for pie chart they show marcName in different different color i want when i click on particular colour then they show other pie chart for that particular marcName details like refReq, refRes, save, for that MarcName how i do this
my first query is:
index=machine | eval GG=substr(Msg,1,5) |eval MarcName=if((GG=="ARL E" OR GG=="QRL E"),substr(Msg, 27,5),substr(Msg, 26,5)) |stats count(MarcName) as numviewed by MarcName

By this query they show many MarcName in different colour so when i click on particular colour(Particular MarcName) then they go to next query with that particular MarcName
My secound Query is:
index=machine | eval GG=substr(Msg,1,5)|eval MarcName=if((GG=="ARL E" OR GG=="QRL E"),substr(Msg, 27,5),substr(Msg, 26,5)) | eval ll=substr(Msg,0,7) |search MarcName=mmm09 |eval tran=if(ll="QRLNP72","refReq",if(ll="ARLNP72","refRes",if(ll="QRL E04","save","other")))| stats count(MarcName) as numviewed by tran

in this query on click particular colour in 1st query they take MarcName automaticaly in 2nd query that place( |search MarcName=mmm09)

here mmm09 is i want automatically take on click in first query pie chart single colour they take value

0 Karma
1 Solution

Splunk Employee
Splunk Employee

What you are looking for is demonstrated in the "contextual Drilldown" example in the Splunk 6.x Dashboard examples App
To find the example install the app, and then select it. Click on the Examples Menu and then choose "Drilldown Examples" The one you want is towards the bottom. "Contextual Drilldown" When you view it, the title is: "In-Page Drilldown with Perma-linking" For further detail you can look at the example just left of Contextual Drilldown called "Dynamic Drilldown". The first, shows how you create two panes. One is invisible, until your pie chart is clicked. The second form opens and uses the context of your click to pass a token.

Below, I've edited the example so that it uses a pie chart and so that the structure of the searches is the same as yours (without the evals etc...) so you can see how you might replace the searches and the token value setting. It uses internal Splunk data so it will run in your environment as is.

Create a new dashboard, click "edit source" and paste the code in.
Either clone the dashboard (after you see it run) and replace the searches with your own (and replace the reference to sourcetype with your own field, in this case MarcName

This will create a chart where when you click on the particular slice, it will pass the sort value (MarcName) to the next chart. That next chart will initiate ...|search MarcName= and there you have it.

<form>
  <label>In-Page Drilldown with Perma-linking</label>
  <fieldset submitButton="false">
    <!--
            Create an input to store the drilldown value. It will be hidden using custom javascript when
            the dashboard is loaded.
         -->
    <input type="text" token="sourcetype" searchWhenChanged="true"></input>
  </fieldset>
  <row>
    <chart id="master">
      <title>Master</title>
      <search>
        <query>index=_internal | stats count(sourcetype) as ST by sourcetype</query>
        <earliest>-60m@m</earliest>
        <latest>now</latest>
      </search>
      <!-- Set the type of of drilldown, since we will always consume the same field, use row-->
      <drilldown>
        <!-- Use set to specify the new token to be created.
                     Use any token from the page or from the click event to produce the value needed. -->
        <set token="sourcetype">$row.sourcetype$</set>
        <!-- If we also set the form.sourcetype the input will get updated too -->
        <set token="form.sourcetype">$row.sourcetype$</set>
      </drilldown>
      <option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
      <option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option>
      <option name="charting.axisTitleX.visibility">visible</option>
      <option name="charting.axisTitleY.visibility">visible</option>
      <option name="charting.axisTitleY2.visibility">visible</option>
      <option name="charting.axisX.scale">linear</option>
      <option name="charting.axisY.scale">linear</option>
      <option name="charting.axisY2.enabled">false</option>
      <option name="charting.axisY2.scale">inherit</option>
      <option name="charting.chart">pie</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.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.legend.labelStyle.overflowMode">ellipsisMiddle</option>
      <option name="charting.legend.placement">right</option>
    </chart>
  </row>
  <row>
    <!-- depends is the way we tell the content to only show when the token has a value.
             Hint: use comma separated values if the element requires more than one token. -->
    <chart id="detail" depends="$sourcetype$">
      <title>Detail: $sourcetype$</title>
      <searchTemplate>index=_internal | search sourcetype=$sourcetype$ | stats count(sourcetype) as numvalue by source</searchTemplate>
      <earliestTime>-60m@m</earliestTime>
      <latestTime>now</latestTime>
    </chart>
  </row>
</form>
With Splunk... the answer is always "YES!". It just might require more regex than you're prepared for!

View solution in original post

0 Karma

Communicator

Thanks for reply sir,
yestaday i found this app and i success to create

my XML is

searchtry

<!--
        Create an input to store the drilldown value. It will be hidden using custom javascript when
        the dashboard is loaded.
     -->
<input type="text" token="MarcName" searchWhenChanged="true"></input>



  <title>Master</title>
  <searchString>index=newpwm source="SOCK_20150327_192217.log"  | eval GG=substr(Msg,1,5)  |eval MarcName=if((GG=="ARL E" OR GG=="QRL E"),substr(Msg, 27,5),substr(Msg, 26,5)) |stats count(MarcName) as numviewed by MarcName</searchString>
  <earliestTime></earliestTime>
  <latestTime>now</latestTime>
 <option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
  <option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option>
  <option name="charting.axisTitleX.visibility">visible</option>
  <option name="charting.axisTitleY.visibility">visible</option>
  <option name="charting.axisTitleY2.visibility">visible</option>
  <option name="charting.axisX.scale">linear</option>
  <option name="charting.axisY.scale">linear</option>
  <option name="charting.axisY2.enabled">0</option>
  <option name="charting.axisY2.scale">inherit</option>
  <option name="charting.chart">pie</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.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.legend.labelStyle.overflowMode">ellipsisEnd</option>
  <option name="charting.legend.placement">right</option>

  <drilldown>
    <!-- Use set to specify the new token to be created.
                 Use any token from the page or from the click event to produce the value needed. -->
    <set token="MarcName">$row.MarcName$</set>
    <!-- If we also set the form.sourcetype the input will get updated too -->
    <set token="form.MarcName">$row.MarcName$</set>
  </drilldown>
   </chart>



<!-- depends is the way we tell the content to only show when the token has a value.
         Hint: use comma separated values if the element requires more than one token. -->
<chart id="detail" depends="$MarcName$">
  <title>Detail: $MarcName$</title>
  <search>
    <query>index=newpwm source="SOCK_20150327_192217.log" | eval GG=substr(Msg,1,5)|eval MarcName=if((GG=="ARL E" OR GG=="QRL E"),substr(Msg, 27,5),substr(Msg, 26,5)) | eval ll=substr(Msg,0,7) |search MarcName=$MarcName$ |eval tran=if(ll="QRLNP72","refReq",if(ll="ARLNP72","refRes",if(ll="QRL E04","save","other")))| stats count(MarcName) as numviewed by tran</query>
    <latest>now</latest>
  </search>
  <option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
  <option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option>
  <option name="charting.axisTitleX.visibility">visible</option>
  <option name="charting.axisTitleY.visibility">visible</option>
  <option name="charting.axisTitleY2.visibility">visible</option>
  <option name="charting.axisX.scale">linear</option>
  <option name="charting.axisY.scale">linear</option>
  <option name="charting.axisY2.enabled">false</option>
  <option name="charting.axisY2.scale">inherit</option>
  <option name="charting.chart">pie</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.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.legend.labelStyle.overflowMode">ellipsisEnd</option>
  <option name="charting.legend.placement">right</option>
</chart>


<!-- depends is the way we tell the content to only show when the token has a value.
         Hint: use comma separated values if the element requires more than one token. -->
<chart id="detai" depends="$MarcName$">
  <title>Detail: $MarcName$</title>
  <search>
    <query>index=newpwm source="SOCK_20150327_192217.log" Msg="QRL E04*" |eval MarcName=substr(Msg, 27,5)  |search MarcName=$MarcName$ |eval uu=substr(Msg,32,12) |join uu [search index=newpwm source="SOCK_20150327_192217.log" Msg=ARLNL* OR Msg=ARLNA* | eval ll=substr(Msg,0,7)|eval uu=if(ll=="ARLNL72",substr(Msg,299,12),substr(Msg,315,12))] | eval ll=substr(Msg,0,7) |eval tran=if(ll="ARLNL12","SaleTran",if(ll="ARLNL72","RefTran","other"))| stats count(ll) as numviewed by tran



    <latest>now</latest>
  </search>
  <option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
  <option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option>
  <option name="charting.axisTitleX.visibility">visible</option>
  <option name="charting.axisTitleY.visibility">visible</option>
  <option name="charting.axisTitleY2.visibility">visible</option>
  <option name="charting.axisX.scale">linear</option>
  <option name="charting.axisY.scale">linear</option>
  <option name="charting.axisY2.enabled">false</option>
  <option name="charting.axisY2.scale">inherit</option>
  <option name="charting.chart">pie</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.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.legend.labelStyle.overflowMode">ellipsisEnd</option>
  <option name="charting.legend.placement">right</option>
</chart>
0 Karma

Splunk Employee
Splunk Employee

Yup! Good job.

With Splunk... the answer is always "YES!". It just might require more regex than you're prepared for!
0 Karma

Splunk Employee
Splunk Employee

What you are looking for is demonstrated in the "contextual Drilldown" example in the Splunk 6.x Dashboard examples App
To find the example install the app, and then select it. Click on the Examples Menu and then choose "Drilldown Examples" The one you want is towards the bottom. "Contextual Drilldown" When you view it, the title is: "In-Page Drilldown with Perma-linking" For further detail you can look at the example just left of Contextual Drilldown called "Dynamic Drilldown". The first, shows how you create two panes. One is invisible, until your pie chart is clicked. The second form opens and uses the context of your click to pass a token.

Below, I've edited the example so that it uses a pie chart and so that the structure of the searches is the same as yours (without the evals etc...) so you can see how you might replace the searches and the token value setting. It uses internal Splunk data so it will run in your environment as is.

Create a new dashboard, click "edit source" and paste the code in.
Either clone the dashboard (after you see it run) and replace the searches with your own (and replace the reference to sourcetype with your own field, in this case MarcName

This will create a chart where when you click on the particular slice, it will pass the sort value (MarcName) to the next chart. That next chart will initiate ...|search MarcName= and there you have it.

<form>
  <label>In-Page Drilldown with Perma-linking</label>
  <fieldset submitButton="false">
    <!--
            Create an input to store the drilldown value. It will be hidden using custom javascript when
            the dashboard is loaded.
         -->
    <input type="text" token="sourcetype" searchWhenChanged="true"></input>
  </fieldset>
  <row>
    <chart id="master">
      <title>Master</title>
      <search>
        <query>index=_internal | stats count(sourcetype) as ST by sourcetype</query>
        <earliest>-60m@m</earliest>
        <latest>now</latest>
      </search>
      <!-- Set the type of of drilldown, since we will always consume the same field, use row-->
      <drilldown>
        <!-- Use set to specify the new token to be created.
                     Use any token from the page or from the click event to produce the value needed. -->
        <set token="sourcetype">$row.sourcetype$</set>
        <!-- If we also set the form.sourcetype the input will get updated too -->
        <set token="form.sourcetype">$row.sourcetype$</set>
      </drilldown>
      <option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
      <option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option>
      <option name="charting.axisTitleX.visibility">visible</option>
      <option name="charting.axisTitleY.visibility">visible</option>
      <option name="charting.axisTitleY2.visibility">visible</option>
      <option name="charting.axisX.scale">linear</option>
      <option name="charting.axisY.scale">linear</option>
      <option name="charting.axisY2.enabled">false</option>
      <option name="charting.axisY2.scale">inherit</option>
      <option name="charting.chart">pie</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.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.legend.labelStyle.overflowMode">ellipsisMiddle</option>
      <option name="charting.legend.placement">right</option>
    </chart>
  </row>
  <row>
    <!-- depends is the way we tell the content to only show when the token has a value.
             Hint: use comma separated values if the element requires more than one token. -->
    <chart id="detail" depends="$sourcetype$">
      <title>Detail: $sourcetype$</title>
      <searchTemplate>index=_internal | search sourcetype=$sourcetype$ | stats count(sourcetype) as numvalue by source</searchTemplate>
      <earliestTime>-60m@m</earliestTime>
      <latestTime>now</latestTime>
    </chart>
  </row>
</form>
With Splunk... the answer is always "YES!". It just might require more regex than you're prepared for!

View solution in original post

0 Karma

Communicator

Thanks for reply sir,

0 Karma
Don’t Miss Global Splunk
User Groups Week!

Free LIVE events worldwide 2/8-2/12
Connect, learn, and collect rad prizes
and swag!