How to update a chart drilldown with a token that updates dynamically?

[robertlynch2020]

Hi

I am updating a chart drilldown with a token, from "undefined" to "all" to "undefined".

<option name="charting.drilldown">$Zoom_ON_POINT_GRAPH$</option>

It works great at the start when "undefined" is set, but i can't drill down into the timechart
Then i set the token to "all" and again it works, i can now drill down - perfect 🙂
The issue is when i reset the token back to "undefined", the graph does not pick this up and i can still drill down. I have also tied to set it to off... still does not work.

I have done this before with below and it works well (I can flip as much as i want to), perhaps there is a difference. SO i am not really sure, if i am missing something here.

<option name="charting.axisY.scale">$Log_vs_Linear$</option>

[knielsen]

What about using a radio button to switch? This is an example that runs fine:

<form>
  <label>Toggle Scale Example</label>
  <description>(Of course the radio button could also be global and used for several charts in parallel.)</description>
  <fieldset submitButton="false"></fieldset>
  <row>
    <panel>
      <input type="radio" token="chartstyle" searchWhenChanged="true">
        <label>chart scale</label>
        <choice value="linear">linear</choice>
        <choice value="log">logarithmic</choice>
        <default>linear</default>
      </input>
      <chart>
        <search>
          <query>index=_internal | timechart span=5s count by source</query>
          <earliest>-2m</earliest>
          <latest>now</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.scale">linear</option>
        <option name="charting.axisY.scale">$chartstyle$</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">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>
</form>

[robertlynch2020]

Thanks for this, however. The issue is not getting the token to be correct (even when it is correct, the graph is wrong), it is the graph does not re-drive when the token has been updated.

[chadmedeiros]

Some JavaScript intervention could be made to force the chart to redraw when tokens are updated. Wondering if this is the path you took.

[cmerriman]

can you expand your xmls a little more? how is the token defined/undefined in both scenarios?

[robertlynch2020]

Hi

Thanks for taking a look at this.

The Log_vs_Linear is a drop down where the Zoom_ON_POINT_GRAPH is check box. However the tokens get set correctly, i have checked this. It is just the graph does not update the same way.

 <input type="dropdown" token="Log_vs_Linear" searchWhenChanged="true">
        <label>Log_vs_linear - Y Axis</label>
        <choice value="log">log</choice>
        <choice value="linear">linear</choice>
        <default>log</default>
      </input>

      <input type="checkbox" token="Zoom_ON_POINT_GRAPH" searchWhenChanged="true">
      <choice value="all">ON</choice>

    </input>
      <chart>
        <search>

          <query>| tstats summariesonly=$summariesonly_token$ $split_by_token2$(All_TPS_Logs.duration) AS All_TPS_Logs.duration FROM datamodel=MLC_TPS_DEBUG4 WHERE (nodename=All_TPS_Logs host=$host_token$) All_TPS_Logs.name =*$TPS_Class_token$* GROUPBY _time, All_TPS_Logs.$fullyQualifiedMethod_or_class$ span=1s | rename All_TPS_Logs.$fullyQualifiedMethod_or_class$ as opId | timechart $tps_span_token$ $split_by_token2$(All_TPS_Logs.duration) AS All_TPS_Logs.duration by opId limit=20</query>
          <earliest>$time_token.earliest$</earliest>
          <latest>$time_token.latest$</latest>
        </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.scale">linear</option>
        <option name="charting.axisY.scale">$Log_vs_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.sliceCollapsingThreshold">0.01</option>
        <option name="charting.chart.stackMode">default</option>
        <option name="charting.chart.style">shiny</option>
        <option name="charting.drilldown">$Zoom_ON_POINT_GRAPH$</option>
        <option name="charting.data.count">20000</option>
        <option name="charting.chart.resultTruncationLimit">20000</option>
        <option name="charting.layout.splitSeries">0</option>
        <option name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</option>
        <option name="charting.legend.placement">right</option>
        <option name="charting.fieldColors">{"PREVIEW":0x990000, "COMMIT":0x999900 ,"CHECK_AND_RESERVE":0x99CCFF ,"CHECK":0x9900FF, "RESERVE":0x006600 }</option>

[cmerriman]

have you tried using <unset> to unset the token?

http://docs.splunk.com/Documentation/Splunk/latest/Viz/tokens#Define_tokens_for_conditional_operatio...

[robertlynch2020]

Can you unset, something on a checkbox?

I have tried the following, but not luck.
But the token is changing from "all" to "unknown" is it just he graph is not re-creating with the new parameters

<input type="checkbox" token="Zoom_ON_POINT_GRAPH" searchWhenChanged="true">
      <choice value="all">ON</choice>
      <default>off</default>
      <change>
        <condition value="off">
          <unset token="Zoom_ON_POINT_GRAPH"></unset>
        </condition>
       </change>
    </input>

[cmerriman]

I've never tried using a checkbox as a drilldown, just as a depends. This is how i have my input set up for that and it works when I check and uncheck repeatedly:

  <input type="checkbox" token="serviceUsage" searchWhenChanged="true">
    <label>Service Usage</label>
    <choice value="true">Show</choice>
    <change>
      <condition label="Show">
        <set token="serviceUsage">true</set>
      </condition>
    </change>
    <default>true</default>
  </input>

so perhaps try something like this:

<input type="checkbox" token="Zoom_ON_POINT_GRAPH" searchWhenChanged="true">
       <choice value="all">ON</choice>
          <change>
          <condition label="ON">
            <set token="Zoom_ON_POINT_GRAPH">all</set>
          </condition>
        </change>
        <default>all</default>
      </input>