All Apps and Add-ons

Drilldown for Donut Custom Visualisation?

sarvesh_11
Communicator

Hey Splunkers,

There is no drilldown functionality in :
https://splunkbase.splunk.com/app/3238/.

To get that, i have tried with css, and also got the reference to write js for click events, for drill down.
But how can i integrate that js with css. Below is my code:

Donut Chart with CSS

 <panel>
   <html depends="$alwaysHideCSSStyle$">
     <style>
       g.c3-shapes.c3-shapes-WARN path.c3-shape.c3-arc-WARNING{
           fill:amber !important;
       }
       g.c3-shapes.c3-shapes-ERROR path.c3-shape.c3-arc-CRITICAL{
           fill:red !important;
       }
       g.c3-shapes.c3-shapes-ERROR path.c3-shape.c3-arc-NORMAL{
           fill:green !important;
       }
       div.c3-tooltip-container table.c3-tooltip tr.c3-tooltip-name--WARNING td.name span{
           background-color:amber !important;
       }
       div.c3-tooltip-container table.c3-tooltip tr.c3-tooltip-name--CRITICAL td.name span{
           background-color:red !important;
       }
       div.c3-tooltip-container table.c3-tooltip tr.c3-tooltip-name--NORMAL td.name span{
           background-color:green !important;
       }
       g.c3-legend-item-WARN line.c3-legend-item-tile{
           stroke:amber !important;
       }
       g.c3-legend-item-ERROR line.c3-legend-item-tile{
           stroke:red !important;
       }
       g.c3-legend-item-NORMAL line.c3-legend-item-tile{
           stroke:green !important;
       }
     </style>
   </html>
0 Karma
1 Solution

niketn
Legend

@sarvesh_11 ideal place would be to fix in visualization.js file which already handles hover and click events. But prints in console log instead of setting tokens to be used in Simple XML. Refer to Custom Visualization API for details.

Following is quick and dirty workaround I was referring to where you can use Simple XML JS extension to handle the click event through jQuery and set the token through Splunk JS token model.

alt text

Following is the Simple XML code for run anywhere example as per your question (PS: I have added id="my_donut" to the donut viz for applying specific CSS and jQuery selector rather than generic):

<dashboard script="donut_click_handler.js">
  <label>Donut with drilldown</label>
  <row>
    <panel>
      <html>
        <style>
          #my_donut g.c3-chart-arc.c3-target-NORMAL text{
            fill:black !important;
          }
          #my_donut g.c3-shapes.c3-shapes-WARN path.c3-shape.c3-arc-WARN{
              fill:orange !important;
          }
          #my_donut g.c3-shapes.c3-shapes-CRITICAL path.c3-shape.c3-arc-CRITICAL{
              fill:red !important;
          }
          #my_donut g.c3-shapes.c3-shapes-NORMAL path.c3-shape.c3-arc-NORMAL{
              fill:green !important;
          }
          #my_donut div.c3-tooltip-container table.c3-tooltip tr.c3-tooltip-name--WARN td.name span{
              background-color:orange !important;
          }
          #my_donut div.c3-tooltip-container table.c3-tooltip tr.c3-tooltip-name--CRITICAL td.name span{
              background-color:red !important;
          }
          #my_donut div.c3-tooltip-container table.c3-tooltip tr.c3-tooltip-name--NORMAL td.name span{
              background-color:green !important;
          }
          #my_donut g.c3-legend-item-WARN line.c3-legend-item-tile{
              stroke:orange !important;
          }
          #my_donut g.c3-legend-item-CRITICAL line.c3-legend-item-tile{
              stroke:red !important;
          }
          #my_donut g.c3-legend-item-NORMAL line.c3-legend-item-tile{
              stroke:green !important;
          }
        </style>
        <div>
          <div><b>Clicked Slice Label and Value</b></div>
          <div>tokLabel: $tokLabel$</div>
          <div>tokValue: $tokValue$</div>
        </div>
      </html>
      <viz id="my_donut" type="viz_donut_c3.c3donut">
        <search>
          <query>| makeresults
| eval kpi="WARN,CRITICAL,NORMAL"
| makemv kpi delim=","
| mvexpand kpi
| eval count=substr(tostring(random()),1,2)
| table kpi count</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="drilldown">none</option>
        <option name="viz_donut_c3.c3donut.expand">0</option>
        <option name="viz_donut_c3.c3donut.label_show">1</option>
        <option name="viz_donut_c3.c3donut.label_threshold">.05</option>
        <option name="viz_donut_c3.c3donut.label_value">value</option>
        <option name="viz_donut_c3.c3donut.legend_position">bottom</option>
        <option name="viz_donut_c3.c3donut.legend_show">1</option>
        <option name="viz_donut_c3.c3donut.tooltip_format">%</option>
        <option name="viz_donut_c3.c3donut.tooltip_show">1</option>
        <option name="viz_donut_c3.c3donut.tooltip_value">default</option>
      </viz>
    </panel>
  </row>
</dashboard>

Following is the JS file donut_click_handler.js that needs to be placed under your app's appserver/static folder. If you have not used SimpleXML CSS extension or JS Extension then you should see the example on Splunk Dev site: https://dev.splunk.com/enterprise/docs/developapps/webframework/usewebframework/modifydashboards/ or try out Splunk Dashboard Examples app: https://splunkbase.splunk.com/app/1603/

 require(["splunkjs/mvc",
         "jquery", 
         "splunkjs/ready!", 
         "splunkjs/mvc/simplexml/ready!"    
     ], function( mvc,
     $){ 
        var defaultTokenModel=mvc.Components.get("default");
        var submittedTokenModel=mvc.Components.get("submitted");
        var strValue;

         $(document).on("click","#my_donut g.c3-chart-arc.c3-target-WARN",function(){
            strValue=$(this).find("text").text();
            defaultTokenModel.set("tokLabel","WARN");
            submittedTokenModel.set("tokLabel","WARN");
            defaultTokenModel.set("tokValue",strValue);
            submittedTokenModel.set("tokValue",strValue);
         });

         $(document).on("click","#my_donut g.c3-chart-arc.c3-target-CRITICAL",function(){
            strValue=$(this).find("text").text();
            defaultTokenModel.set("tokLabel","CRITICAL");
            submittedTokenModel.set("tokLabel","CRITICAL");
            defaultTokenModel.set("tokValue",strValue);
            submittedTokenModel.set("tokValue",strValue);
         });

         $(document).on("click","#my_donut g.c3-chart-arc.c3-target-NORMAL",function(){
            strValue=$(this).find("text").text();
            defaultTokenModel.set("tokLabel","NORMAL");
            submittedTokenModel.set("tokLabel","NORMAL");
            defaultTokenModel.set("tokValue",strValue);
            submittedTokenModel.set("tokValue",strValue);
         });
     });
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

0 Karma

niketn
Legend

@sarvesh_11 ideal place would be to fix in visualization.js file which already handles hover and click events. But prints in console log instead of setting tokens to be used in Simple XML. Refer to Custom Visualization API for details.

Following is quick and dirty workaround I was referring to where you can use Simple XML JS extension to handle the click event through jQuery and set the token through Splunk JS token model.

alt text

Following is the Simple XML code for run anywhere example as per your question (PS: I have added id="my_donut" to the donut viz for applying specific CSS and jQuery selector rather than generic):

<dashboard script="donut_click_handler.js">
  <label>Donut with drilldown</label>
  <row>
    <panel>
      <html>
        <style>
          #my_donut g.c3-chart-arc.c3-target-NORMAL text{
            fill:black !important;
          }
          #my_donut g.c3-shapes.c3-shapes-WARN path.c3-shape.c3-arc-WARN{
              fill:orange !important;
          }
          #my_donut g.c3-shapes.c3-shapes-CRITICAL path.c3-shape.c3-arc-CRITICAL{
              fill:red !important;
          }
          #my_donut g.c3-shapes.c3-shapes-NORMAL path.c3-shape.c3-arc-NORMAL{
              fill:green !important;
          }
          #my_donut div.c3-tooltip-container table.c3-tooltip tr.c3-tooltip-name--WARN td.name span{
              background-color:orange !important;
          }
          #my_donut div.c3-tooltip-container table.c3-tooltip tr.c3-tooltip-name--CRITICAL td.name span{
              background-color:red !important;
          }
          #my_donut div.c3-tooltip-container table.c3-tooltip tr.c3-tooltip-name--NORMAL td.name span{
              background-color:green !important;
          }
          #my_donut g.c3-legend-item-WARN line.c3-legend-item-tile{
              stroke:orange !important;
          }
          #my_donut g.c3-legend-item-CRITICAL line.c3-legend-item-tile{
              stroke:red !important;
          }
          #my_donut g.c3-legend-item-NORMAL line.c3-legend-item-tile{
              stroke:green !important;
          }
        </style>
        <div>
          <div><b>Clicked Slice Label and Value</b></div>
          <div>tokLabel: $tokLabel$</div>
          <div>tokValue: $tokValue$</div>
        </div>
      </html>
      <viz id="my_donut" type="viz_donut_c3.c3donut">
        <search>
          <query>| makeresults
| eval kpi="WARN,CRITICAL,NORMAL"
| makemv kpi delim=","
| mvexpand kpi
| eval count=substr(tostring(random()),1,2)
| table kpi count</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="drilldown">none</option>
        <option name="viz_donut_c3.c3donut.expand">0</option>
        <option name="viz_donut_c3.c3donut.label_show">1</option>
        <option name="viz_donut_c3.c3donut.label_threshold">.05</option>
        <option name="viz_donut_c3.c3donut.label_value">value</option>
        <option name="viz_donut_c3.c3donut.legend_position">bottom</option>
        <option name="viz_donut_c3.c3donut.legend_show">1</option>
        <option name="viz_donut_c3.c3donut.tooltip_format">%</option>
        <option name="viz_donut_c3.c3donut.tooltip_show">1</option>
        <option name="viz_donut_c3.c3donut.tooltip_value">default</option>
      </viz>
    </panel>
  </row>
</dashboard>

Following is the JS file donut_click_handler.js that needs to be placed under your app's appserver/static folder. If you have not used SimpleXML CSS extension or JS Extension then you should see the example on Splunk Dev site: https://dev.splunk.com/enterprise/docs/developapps/webframework/usewebframework/modifydashboards/ or try out Splunk Dashboard Examples app: https://splunkbase.splunk.com/app/1603/

 require(["splunkjs/mvc",
         "jquery", 
         "splunkjs/ready!", 
         "splunkjs/mvc/simplexml/ready!"    
     ], function( mvc,
     $){ 
        var defaultTokenModel=mvc.Components.get("default");
        var submittedTokenModel=mvc.Components.get("submitted");
        var strValue;

         $(document).on("click","#my_donut g.c3-chart-arc.c3-target-WARN",function(){
            strValue=$(this).find("text").text();
            defaultTokenModel.set("tokLabel","WARN");
            submittedTokenModel.set("tokLabel","WARN");
            defaultTokenModel.set("tokValue",strValue);
            submittedTokenModel.set("tokValue",strValue);
         });

         $(document).on("click","#my_donut g.c3-chart-arc.c3-target-CRITICAL",function(){
            strValue=$(this).find("text").text();
            defaultTokenModel.set("tokLabel","CRITICAL");
            submittedTokenModel.set("tokLabel","CRITICAL");
            defaultTokenModel.set("tokValue",strValue);
            submittedTokenModel.set("tokValue",strValue);
         });

         $(document).on("click","#my_donut g.c3-chart-arc.c3-target-NORMAL",function(){
            strValue=$(this).find("text").text();
            defaultTokenModel.set("tokLabel","NORMAL");
            submittedTokenModel.set("tokLabel","NORMAL");
            defaultTokenModel.set("tokValue",strValue);
            submittedTokenModel.set("tokValue",strValue);
         });
     });
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

sarvesh_11
Communicator

Hi @niketnilay
Thanks for your inputs.

But how drilldown is working in this?
how my next panel is visible on click ?

As, all
drilldown --> all
drilldownRedirect --> true

nothing seems to be working on this visualization.

0 Karma

niketn
Legend

When any donut Slice is clicked, it set the slice name as tokLabel and value as tokValue. It is very much specific to series name for example the series NORMAL will have jQUery selector #my_donut g.c3-chart-arc.c3-target-NORMAL.

Nothing seem to be working is difficult to solve please add more details on what you have tried and what is the issue you see. Are you comfortable with JS? Can you debug JS code for issue? The above code is run anywhere example so it should work if you put JS in the right place (it may require debug/refresh/restart Splunk instance and also clear browser history).

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

sarvesh_11
Communicator

Hi @niketn ,
Thanks mate, the above thing worked for me.
Now this is good when we have 1 single panel, but i have 15 such donut panels,
so in donut_click_handler.js , i have to write 45 stanzas, giving different tokLabel, as value is same for all i.e Warn, Normal and critical?

0 Karma

niketn
Legend

@sarvesh_11 like mentioned above, best approach for you would need to handle click event already present in visualization.js to assign to your custom tokens like clickedValue and clickedLabel so that they always get assigned without coding for each and every donut/slice.

The above is just workaround example for you to handle drilldown. If you notice, the DOM selector for drilldown in Donut slice is the label of slice which is clicked for example if CRITICAL slice is clicked then the DOM selector target name is the following: c3-target-CRITICAL.

So instead of having specific CSS Selector you can have generic CSS Selector and extract the label name from selector i.e. CRITICAL. The value can always be generically assigned to Value token. This way you can have single JS for for all Donut drilldown. Also you can perform click handler for array of Donut Chart by Ids like [#donut1, #donut2...] or else take out ID based selector completely. However this will depend on your dashboard use case.

Ideally first approach is the best. Although visualization.js has already been created for donut chart along with click handler (it currently only logs to console, does not pass back to Splunk Token Model), you can refer to Custom Visualization API for better understanding of how it works. https://docs.splunk.com/Documentation/Splunk/latest/AdvancedDev/CustomVizTutorial

Please try out and confirm as this is the maximum help/hint I can provide rather than writing the code for you!

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

vin_ven27
Explorer

Is it possible to have two words Status like "Not running"? I tried to put it in:

<style>
g.c3-shapes.c3-shapes-Not Running path.c3-shape.c3-arc-Not Running{
fill:orange !important;

Tried: with underscore (Not_Running) and with d.quotes ("Not Running")

but no luck. It seems  status with space is not valid. Is there a way? Thanks

0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...