Dashboards & Visualizations

How do I set token in d3 js visulization?

ravikumar_sri20
Loves-to-Learn

Experts,

I have below XML Dashboard code. The first panel displays calender heat map using d3 js library as shown below.

ravikumar_sri20_0-1659350048719.png

My requirement is, when a day on the calender is clicked, that date value needs to be passed as token to the second panel.  I could not get this working. Could you please help me ?

<form script="autodiscover.js" hideChrome="true" >
<label>Monthly Utilization</label>
<row>
<panel>
<title>Rolling Average</title>
<html>
<div id="search1" class="splunk-manager"
align="center"
data-require="splunkjs/mvc/searchmanager"
data-options='{
"search": {
"type": "token_safe",
"value":
"source=...........| timechart span=1d values(AverageVAL) as \"Average VAL\""},
"cancelOnUnload": true,
"preview": true
}'>
</div>

<div id="heat_map" class="splunk-view" align="center" data-require="app/MFDashboard/calendarheatmap/calendarheatmap2" data-options='{
"id" : "fcal",
"managerid" : "search1",
"domain" : "month",
"subDomain" : "day"
}'>
</div>
</html>

<drilldown>
<set token="Selectedday">$click.value$</set>
</drilldown>
</panel>
</row>

<row>
<panel depends="$Selectedday$">
<html>
<p> Testing... </p>
</html>
</panel>
</row>
</form>

Labels (1)
0 Karma
Get Updates on the Splunk Community!

Routing logs with Splunk OTel Collector for Kubernetes

The Splunk Distribution of the OpenTelemetry (OTel) Collector is a product that provides a way to ingest ...

Welcome to the Splunk Community!

(view in My Videos) We're so glad you're here! The Splunk Community is place to connect, learn, give back, and ...

Tech Talk | Elevating Digital Service Excellence: The Synergy of Splunk RUM & APM

Elevating Digital Service Excellence: The Synergy of Real User Monitoring and Application Performance ...