How do I pass multiple values from a chart as input into another chart?

[namritha]

Hi,

I have a chart the displays the performance of all servers.
When the user clicks two of the servers, I want them to be passed as input to another chart.

Original chart:

When the user clicks server2 and server4, I want it to be displayed in a separate chart.

How do I go about it?

[sundareshr · Accepted solution]

Try this run-anywhere sample

<dashboard>
  <label></label>
  <row>
    <panel>
      <chart>
        <search>
          <query>index=_internal | stats count by sourcetype</query>
          <earliest>-60m@m</earliest>
          <latest>now</latest>
        </search>
        <option name="rowNumbers">true</option>
        <option name="dataOverlayMode">none</option>
        <option name="count">10</option>
        <drilldown target="My New Window">
          <eval token="s">(if(len($s$)>0, $s$." OR ", "")."sourcetype=".$row.sourcetype$)</eval>
        </drilldown>
        <option name="wrap">true</option>
        <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">column</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">none</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.placement">right</option>
      </chart>
    </panel>
  </row>
  <row>
    <panel>
      <chart>
        <title></title>
        <search>
          <query>index=_internal $s$ | stats count by sourcetype</query>
          <earliest>-60m@m</earliest>
          <latest>now</latest>
        </search>
        <option name="charting.chart">column</option>
        <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.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">none</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.placement">right</option>
      </chart>
    </panel>
  </row>
</dashboard>

[namritha]

Thankyou, this worked beautifully.

Can you please tell me the significance of dot(.) in the <eval token="s">used?

<eval token="s">(if(len($s$)>0, $s$." OR ", "")."sourcetype=".$row.sourcetype$)</eval>

What does dot(.) do?

[aaraneta_splunk]

Hello @namritha - If your question has been answered, please don't forget to resolve the post by clicking "Accept" below the answer. Also, be sure to upvote any comments from users that you found helpful.

[sundareshr]

That's for concatenation. Same a +

[somesoni2]

I don't think there is a native way to store user's click history. Any specific reason you want user to be able to select multiple columns for drilldown?

[sideview]

This is all possible, but the details are important.
After the user has clicked on server1, but before they have clicked on server2, do you have any thought what should happen? I'm thinking at LEAST there should be some messaging below that says "You have selected server1. Select a second server to see results". With no messaging your users will undoubtedly think it's broken.

And after they have clicked on server2, when they click on server3.... what should happen then. It sounds from your comment above that running 3 is fine. So say they do that - does a second click on server1 or server2 then deselect server1 and server2?

Which begs the question - what exactly are you going to wire up in the drilldown. It sounds like you're going to do

( server=server1 OR server=server2 OR server=server4 )

If you can confirm this level of detail I can steer you to how to build such a view in Sideview Utils at least. It might require a couple lines of js in a custom behavior but quite a lot would just be using stock modules.

[sundareshr]

Are you saying you want to drilldown ONLY if user clicks on one of the two servers or when user clicks on both servers one after the other?

[namritha]

I am looking for the second one - When the user clicks on both servers one after the other.

[sundareshr]

What if the user clicks on server1, then server2 and then finally server4?

[namritha]

Currently that is not my use case. But if this scenario comes up, I want the resulting chart to display the count for server1, server2, server4.

So, the key functionality I need is, Whichever/How many ever server names the user clicks, I want them to be passed to another chart which will plot the values for the clicked server names.