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!

Enter the Splunk Community Dashboard Challenge for Your Chance to Win!

The Splunk Community Dashboard Challenge is underway! This is your chance to showcase your skills in creating ...

.conf24 | Session Scheduler is Live!!

.conf24 is happening June 11 - 14 in Las Vegas, and we are thrilled to announce that the conference catalog ...

Introducing the Splunk Community Dashboard Challenge!

Welcome to Splunk Community Dashboard Challenge! This is your chance to showcase your skills in creating ...