Dashboards & Visualizations

Dropdown on a panel

dbcase
Motivator

Hi,

I have the below simple XML code for a dropdown on a panel but for some reason I can't get it to show on the panel. What am I missing? (tablevariablescubscribers is set from a table selection and the resulting chart works just fine. Just no dropdown visible)

<!-- Begin create a line chart based off of the drilldown above -->
      <!-- Don't show a panel until tablevariable is set -->
      <chart depends="$tablevariablesubscribers$">
        <title>Expanded Subscriber Connectivity for - $tablevariablesubscribers$</title>

       <input type="dropdown" token="predict_time" searchWhenChanged="true">
      <label>Select number of days to predict:</label>
      <default>ccivirpxa0*</default>
      <choice value="90">90 Days</choice>
      <choice value="7">7 Days</choice>
      <choice value="30">30 Days</choice>
      <choice value="60">60 Days</choice>
      <choice value="180">180 Days</choice>
      <choice value="365">365 Days</choice>
      <choice value="1000">Maximum</choice>
    </input>









        <search>
          <query>index=mso_statistics sourcetype=ic_connectivity_5min-too_small stat_name=subscribers| where lower(mso)=lower("$tablevariablesubscribers$") | timechart avg(stat_val) as Trend|predict Trend as Prediction  future_timespan=90|eval Prediction=round(Prediction,0)</query>
          <earliest>0</earliest>
        </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">collapsed</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">zero</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>
        <option name="charting.axisTitleY.text">Subscriber Count</option>
      </chart>
      <!-- End create a line chart based off of the drilldown above -->
    </panel>
  </row>
0 Karma
1 Solution

sundareshr
Legend

Try moving the input outside the chart and add depends to the panel instead. Like this

<panel depends="$tablevariablesubscribers$">
         <title>Expanded Subscriber Connectivity for - $tablevariablesubscribers$</title>

        <input type="dropdown" token="predict_time" searchWhenChanged="true">
       <label>Select number of days to predict:</label>
       <default>ccivirpxa0*</default>
       <choice value="90">90 Days</choice>
       <choice value="7">7 Days</choice>
       <choice value="30">30 Days</choice>
       <choice value="60">60 Days</choice>
       <choice value="180">180 Days</choice>
       <choice value="365">365 Days</choice>
       <choice value="1000">Maximum</choice>
     </input>








<chart>

         <search>
           <query>index=mso_statistics sourcetype=ic_connectivity_5min-too_small stat_name=subscribers| where lower(mso)=lower("$tablevariablesubscribers$") | timechart avg(stat_val) as Trend|predict Trend as Prediction  future_timespan=90|eval Prediction=round(Prediction,0)</query>
           <earliest>0</earliest>
         </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">collapsed</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">zero</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>
         <option name="charting.axisTitleY.text">Subscriber Count</option>
       </chart>
       <!-- End create a line chart based off of the drilldown above -->
     </panel>
   </row>

View solution in original post

0 Karma

sundareshr
Legend

Try moving the input outside the chart and add depends to the panel instead. Like this

<panel depends="$tablevariablesubscribers$">
         <title>Expanded Subscriber Connectivity for - $tablevariablesubscribers$</title>

        <input type="dropdown" token="predict_time" searchWhenChanged="true">
       <label>Select number of days to predict:</label>
       <default>ccivirpxa0*</default>
       <choice value="90">90 Days</choice>
       <choice value="7">7 Days</choice>
       <choice value="30">30 Days</choice>
       <choice value="60">60 Days</choice>
       <choice value="180">180 Days</choice>
       <choice value="365">365 Days</choice>
       <choice value="1000">Maximum</choice>
     </input>








<chart>

         <search>
           <query>index=mso_statistics sourcetype=ic_connectivity_5min-too_small stat_name=subscribers| where lower(mso)=lower("$tablevariablesubscribers$") | timechart avg(stat_val) as Trend|predict Trend as Prediction  future_timespan=90|eval Prediction=round(Prediction,0)</query>
           <earliest>0</earliest>
         </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">collapsed</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">zero</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>
         <option name="charting.axisTitleY.text">Subscriber Count</option>
       </chart>
       <!-- End create a line chart based off of the drilldown above -->
     </panel>
   </row>
0 Karma

dbcase
Motivator

Hi Sundareshr! Sorry I don't quite understand. The panel with the subscriber and prediction count shows up just fine. It's the dropdown that never shows up.

0 Karma

dbcase
Motivator

well I think I figured out what you are trying to tell me. Here is the updated code. But.... I get this error when trying to save

XML Syntax Error: Cannot find object mapper for panel type: panel

<panel depends="$tablevariablesubscribers$">
          <title>Expanded Subscriber Connectivity for - $tablevariablesubscribers$</title>

         <input type="dropdown" token="predict_time" searchWhenChanged="true">
        <label>Select number of days to predict:</label>
        <default>90</default>
        <choice value="90">90 Days</choice>
        <choice value="7">7 Days</choice>
        <choice value="30">30 Days</choice>
        <choice value="60">60 Days</choice>
        <choice value="180">180 Days</choice>
        <choice value="365">365 Days</choice>
        <choice value="1000">Maximum</choice>
      </input>




      <chart>


        <search>
          <query>index=mso_statistics sourcetype=ic_connectivity_5min-too_small stat_name=subscribers| where lower(mso)=lower("$tablevariablesubscribers$") | timechart avg(stat_val) as Trend|predict Trend as Prediction  future_timespan=90|eval Prediction=round(Prediction,0)</query>
          <earliest>0</earliest>
        </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">collapsed</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">zero</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>
        <option name="charting.axisTitleY.text">Subscriber Count</option>
      </chart>
      <!-- End create a line chart based off of the drilldown above -->
    </panel>
    </panel>
  </row>
</dashboard>
0 Karma

sundareshr
Legend

You have two </panel> towards the end, remove one

0 Karma

dbcase
Motivator

Hmmm, (sorry for all the hand holding here)

When I do that the editor complains with Encountered the following error while trying to update: In handler 'views': Error parsing XML on line 462: Premature end of data in tag dashboard line 1

<panel depends="$tablevariablesubscribers$">


         <input type="dropdown" token="predict_time" searchWhenChanged="true">
        <label>Select number of days to predict:</label>
        <default>90</default>
        <choice value="90">90 Days</choice>
        <choice value="7">7 Days</choice>
        <choice value="30">30 Days</choice>
        <choice value="60">60 Days</choice>
        <choice value="180">180 Days</choice>
        <choice value="365">365 Days</choice>
        <choice value="1000">Maximum</choice>
      </input>





      <chart>
        <title>Expanded Subscriber Connectivity for - $tablevariablesubscribers$</title>

        <search>
          <query>index=mso_statistics sourcetype=ic_connectivity_5min-too_small stat_name=subscribers| where lower(mso)=lower("$tablevariablesubscribers$") | timechart avg(stat_val) as Trend|predict Trend as Prediction  future_timespan=90|eval Prediction=round(Prediction,0)</query>
          <earliest>0</earliest>
        </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">collapsed</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">zero</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>
        <option name="charting.axisTitleY.text">Subscriber Count</option>
      </chart>
      <!-- End create a line chart based off of the drilldown above -->
    </panel>

  </row>
</dashboard>
0 Karma

dbcase
Motivator

Ok found where the other panel was and fixed it 🙂 Now it shows WITH the dropdown !!!! Thank you!!!!

0 Karma

sundareshr
Legend

The reason dropdown doesn't show is becuase you have it inside the chart tags. So it treats it as options/settings for the chart. Just the <input type=dropdown>.....</input> which is currently right after <chart depends="$tablevariablesubscribers$"> to before the <chart depends="$tablevariablesubscribers$"> and the set the token dependency at the panel level. SO your panel will look like this <panel depends="$tablevariablesubscribers$">

0 Karma
Get Updates on the Splunk Community!

Threat Hunting Unlocked: How to Uplevel Your Threat Hunting With the PEAK Framework ...

WATCH NOWAs AI starts tackling low level alerts, it's more critical than ever to uplevel your threat hunting ...

Splunk APM: New Product Features + Community Office Hours Recap!

Howdy Splunk Community! Over the past few months, we’ve had a lot going on in the world of Splunk Application ...

Index This | Forward, I’m heavy; backward, I’m not. What am I?

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