How to highlight the 2nd panel trend based on 1st panel daya

[aditsss]

Hi Everyone,

I have one requirement 

I have two panels one showing bar chart and one showing trend for the same

first panel consists of operations like GET,PUT,POST ,DELETE

AND second panel is showing trend for this 4 operations. 

My requirement is when I select GET in first panel it should highlight the trend of 2nd panel.

Can someone guide me how can I achieve this

Below is my code:

<row>
<panel>
<chart>
<title>NiFi_Operations</title>
<search>
<query>index=abc sourcetype=xyz source="user.log" $req$ $usr$| chart count(Request_Type) as "Request- Types" by Request_Type</query>
<earliest>-15m</earliest>
<latest>now</latest>
</search>
<option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
<option name="charting.axisLabelsX.majorLabelStyle.rotation">-45</option>
<option name="charting.axisTitleX.text">NiFi_Operations</option>
<option name="charting.axisTitleX.visibility">visible</option>
<option name="charting.axisTitleY.text">Count</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.maximumNumber">999</option>
<option name="charting.axisY.minimumNumber">0</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">bar</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.00</option>
<option name="charting.chart.stackMode">stacked</option>
<option name="charting.chart.style">shiny</option>
<option name="charting.drilldown">all</option>
<option name="charting.layout.splitSeries">1</option>
<option name="charting.layout.splitSeries.allowIndependentYRanges">0</option>
<option name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</option>
<option name="charting.legend.placement">right</option>
<option name="height">300</option>
<option name="refresh.display">progressbar</option>
<option name="trellis.enabled">0</option>
<drilldown>
<set token="form.req">$click.value$</set>
</drilldown>
</chart>
</panel>
<panel>
<chart>
<title>NiFi_Operations Trend</title>
<search>
<query>index=abc sourcetype=xyz source="user.log" Request_Type="*" ADS_Id="*"| timechart count(Request_Type) as "Request- Types" by Request_Type</query>
<earliest>$field1.earliest$</earliest>
<latest>$field1.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.visibility">visible</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">line</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">none</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">right</option>
<option name="charting.lineWidth">2</option>
<option name="refresh.display">progressbar</option>
<option name="trellis.enabled">0</option>
<option name="trellis.scales.shared">1</option>
<option name="trellis.size">medium</option>
</chart>
</panel>
</row>

Thanks in advance

[ITWhisperer]

It depends what you mean by highlighting - you could use a drilldown to set a token which is then used to just show one of the lines

In the first panel:

        <drilldown>
          <eval token="showline">if(isnull($showline$),"[".$click.value$."]",null)</eval>
        </drilldown>

 In the second panel:

        <option name="charting.data.fieldShowList">$showline$</option>

[aditsss]

@ITWhisperer 

I have 4 Bar charts in 1st panel GET,PUT,POST AND DELETE and there trend in 2nd panel.

I want when I hover on GET Bar in 1st panel the trend of GET should highlight in 2nd panel.

Is that possible.

Below is my code:

<row>
<panel>
<chart>
<title>NiFi_Operations-Current</title>
<search>
<query>index=abc sourcetype=xyz source="user.log" |rex "\)\s+(?&lt;Request_Type&gt;[^ ]+)"| rex "Attempting request for \\(\\&lt;(?&lt;Adsid&gt;[^\\&gt;]+)\\&gt;"|search $req$ $usr$|chart count(Request_Type) as "Request- Types" by Request_Type</query>
<earliest>-15m</earliest>
<latest>now</latest>
</search>
<option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
<drilldown>
<set token="form.req">$click.value$</set>
</drilldown>
<option name="charting.axisLabelsX.majorLabelStyle.rotation">-45</option>
<option name="charting.axisTitleX.text">NiFi_Operations</option>
<option name="charting.axisTitleX.visibility">visible</option>
<option name="charting.axisTitleY.text">Count</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.maximumNumber">999</option>
<option name="charting.axisY.minimumNumber">0</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">bar</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.00</option>
<option name="charting.chart.stackMode">stacked</option>
<option name="charting.chart.style">shiny</option>
<option name="charting.drilldown">all</option>
<option name="charting.layout.splitSeries">1</option>
<option name="charting.layout.splitSeries.allowIndependentYRanges">0</option>
<option name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</option>
<option name="charting.legend.placement">right</option>
<option name="height">300</option>
<option name="refresh.display">progressbar</option>
<option name="trellis.enabled">0</option>
</chart>
</panel>
<panel>
<chart>
<title>NiFi_Operations Trend</title>
<search>
<query>index=abc  sourcetype=xyz source="user.log" |rex "\)\s+(?&lt;Request_Type&gt;[^ ]+)"| rex "Attempting request for \\(\\&lt;(?&lt;Adsid&gt;[^\\&gt;]+)\\&gt;"|search $req$ $usr$|timechart count(Request_Type) as "Request- Types" by Request_Type</query>
<earliest>$field1.earliest$</earliest>
<latest>$field1.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.visibility">visible</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">line</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">none</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">right</option>
<option name="charting.lineWidth">2</option>
<option name="trellis.enabled">0</option>
<option name="trellis.scales.shared">1</option>
<option name="trellis.size">medium</option>
</chart>
</panel>

Attached is the screenshot.

[ITWhisperer]

I don't know how you would do that. Hover doesn't generate any events that a handler in splunk could pick up e.g. no drilldown event, so I am not sure how you might, for example, set a token which could be used elsewhere in the dashboard. Perhaps this is possible with javascript, but my knowledge is very weak in this area. Have you tried my suggestion? Is it good enough?