Dashboards & Visualizations

conditionally show d3 visualization

dominiquevocat
SplunkTrust
SplunkTrust

So I have a dashboard with a base search that I display in several ways. One of them is a panel with a link switcher and depending on the selected value, one of the two div containing a d3 visualization is showing.

My problem is: when I switch to a different visualization, then the div stays empty until the search from which I derive is refreshed (by change of some form input).

What am I overlooking?

the snippet:

  <input type="link" token="unused">
    <label>Choose a visualization...</label>
    <choice value="sankey">Sankey</choice>
    <choice value="forcedirected">Force Directed Graph</choice>
    <default>sankey</default>
    <change>
      <condition value="sankey">
        <set token="showSankey">true</set>
        <unset token="showForceDirected"></unset>
      </condition>
      <condition value="forcedirected">
        <set token="showForceDirected">true</set>
        <unset token="showSankey"></unset>
      </condition>
    </change>
  </input>
  <search id="viz_search" base="base">
    <query>stats count by from to</query>
  </search>
  <html depends="$showSankey$">
    <h2>Sankey</h2>
    <div id="sankey" class="splunk-view" data-require="app/custom_vizs/components/sankey/sankey" data-options="{           &quot;managerid&quot;: &quot;viz_search&quot;,           &quot;height&quot;: &quot;400px&quot;         }"></div>  
  </html>
  <html depends="$showForceDirected$">
    <h2>Force Directed</h2>
    <div id="forcedirected" class="splunk-view" data-require="app/custom_vizs/components/forcedirected/forcedirected" data-options="{           &quot;managerid&quot;: &quot;viz_search&quot;,           &quot;height&quot;: &quot;500px&quot;,           &quot;panAndZoom&quot;: false,           &quot;isStatic&quot;: false         }"></div>
  </html>
</panel>
0 Karma

MuS
SplunkTrust
SplunkTrust

Hi dominiquevocat,

I had the same problem til I changed the div id="force directed" to div id="custom" take a look at this example:

<form script="autodiscover.js">
  <fieldset submitButton="false">
    <input type="link" token="unused">
      <label>Choose a visualization...</label>
      <choice value="sankey">Sankey</choice>
      <choice value="forcedirected">Force Directed Graph</choice>
      <default>sankey</default>
      <change>
        <condition value="sankey">
          <set token="showSankey">true</set>
          <unset token="showForceDirected"></unset>
        </condition>
        <condition value="forcedirected">
          <set token="showForceDirected">true</set>
          <unset token="showSankey"></unset>
        </condition>
      </change>
    </input>
  </fieldset>
          <search id="viz_search">
         <query>
         <![CDATA[
                    index=_internal sourcetype=splunk_web_access NOT uri_path=*/static/* uri_path=*/app/* OR uri_path=*/manager/* 
                    | rex field=referer "https?://.+?/.+?(?<referer_path>/[^\\?]+)" 
                    | rex field=uri_path "/.+?(?<path>/.+)" 
                    | rename referer_path as from path as to 
                    | stats count by from to | sort -count | head 50
                ]]>
         </query>
        </search>
  <row>
    <panel depends="$showSankey$">
      <html>
       <h2>Sankey</h2>
       <div id="sankey"
                     class="splunk-view"
                     data-require="app/simple_xml_examples/components/sankey/sankey"
                     data-options='{
                            "managerid": "viz_search",
                            "height": 400
                         }'>
                </div>
      </html>
    </panel>
  </row>
  <row>
    <panel depends="$showForceDirected$">
      <html>
     <h2>Force Directed</h2>
     <div id="custom" 
                          class="splunk-view" 
                          data-require="app/simple_xml_examples/components/forcedirected/forcedirected" 
                          data-options='{           
                                 "managerid": "viz_search",
                                 "height": "500px",
                                 "panAndZoom": false,
                                 "isStatic": false
                            }'>
        </div>
   </html>
    </panel>
  </row>
</form>

Hope this helps und Grüsse nach Basel!

cheers, MuS

0 Karma

dominiquevocat
SplunkTrust
SplunkTrust

hm, it did not change much for me 😕 but thanks.

0 Karma
Got questions? Get answers!

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Meet up IRL or virtually!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

Get Updates on the Splunk Community!

Recap | Agentic Operations Start with Context: Build the Right Data Foundation

Agentic Operations Start with Context: Build the Right Data Foundation   By Courtney Wright, Product Marketing ...

Recap | Assisted, Augmented or Agentic? Choose Your Splunk Starting Point

Assisted, Augmented or Agentic? Choose Your Splunk Starting Point   By Courtney Wright, Product Marketing ...

Session 2 | Beyond the Thread: Operationalizing AI with Confidence

Session 2   Beyond the Thread: Operationalizing AI with Confidence    The true power of the Cisco Data Fabric ...