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!

Introducing the 2024 SplunkTrust!

Hello, Splunk Community! We are beyond thrilled to announce our newest group of SplunkTrust members!  The ...

Introducing the 2024 Splunk MVPs!

We are excited to announce the 2024 cohort of the Splunk MVP program. Splunk MVPs are passionate members of ...

Splunk Custom Visualizations App End of Life

The Splunk Custom Visualizations apps End of Life for SimpleXML will reach end of support on Dec 21, 2024, ...