All Apps and Add-ons

Heatmap - Custom Visualization: How can I add a drilldown?

graether
Path Finder

Given two vectors w,v where a heatmap matrix element, the correlation coefficient corr(w,v) is calculated: How can I drilldown by clicking on the heatmap to visualize the values of w and v.

0 Karma
1 Solution

aljohnson_splun
Splunk Employee
Splunk Employee

Hi @Graether - I wrote the heatmap app. There is no drill down functionality, just a mouse over information.

In this example, you'll see a correlation matrix, where hovering over the cell will show the correlation value:

alt text

However, if you are willing to add some javascript to your dashboard, this is accomplishable with the splunkjs mvc.

First, add an id to the dashboard viz element...

<row>
    <panel>
      <viz type="heatmap_app.heatmap" id='myheatmap'>

After that, add a new javascript file to $SPLUNK_HOME/etc/apps/< whatever app you are in>/appserver/static, called setHeatmapTokens.js:

require([
    "jquery",
    "splunkjs/mvc",
    "splunkjs/mvc/simplexml/ready!"
], function($, mvc) {
    // Setup tokens 
    var submittedTokens = mvc.Components.get("submitted");
    var defaultTokens = mvc.Components.get("default");

    // Get the div container
    var div = $('#myheatmap')

     function setToken(name, value) {
         submittedTokens.set(name, value);
         defaultTokens.set(name, value);
     }

    // Add listener
    div.on('plotly_click', function (e, data) {
        var point = data.points[0]
        setToken('heatmap_x', point.x)
        setToken('heatmap_y', point.y)
        setToken('heatmap_z', point.z)
    })
});

Make sure to reference the javascript file in the dashboard

<dashboard script="setHeatmapTokens.js">

Lastly, restart splunk web or go to the _bump endpoint to load the new javascript file:

http://<your splunk url & port>/en-US/_bump

After that, you should be able to use the heatmap_x, heatmap_y, and heatmap_z tokens in the dashboard.

View solution in original post

niketn
Legend

@graether, can you check out Punchcard Custom Visualization on Splunkbase?

https://splunkbase.splunk.com/app/3129/

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

aljohnson_splun
Splunk Employee
Splunk Employee

Hi @Graether - I wrote the heatmap app. There is no drill down functionality, just a mouse over information.

In this example, you'll see a correlation matrix, where hovering over the cell will show the correlation value:

alt text

However, if you are willing to add some javascript to your dashboard, this is accomplishable with the splunkjs mvc.

First, add an id to the dashboard viz element...

<row>
    <panel>
      <viz type="heatmap_app.heatmap" id='myheatmap'>

After that, add a new javascript file to $SPLUNK_HOME/etc/apps/< whatever app you are in>/appserver/static, called setHeatmapTokens.js:

require([
    "jquery",
    "splunkjs/mvc",
    "splunkjs/mvc/simplexml/ready!"
], function($, mvc) {
    // Setup tokens 
    var submittedTokens = mvc.Components.get("submitted");
    var defaultTokens = mvc.Components.get("default");

    // Get the div container
    var div = $('#myheatmap')

     function setToken(name, value) {
         submittedTokens.set(name, value);
         defaultTokens.set(name, value);
     }

    // Add listener
    div.on('plotly_click', function (e, data) {
        var point = data.points[0]
        setToken('heatmap_x', point.x)
        setToken('heatmap_y', point.y)
        setToken('heatmap_z', point.z)
    })
});

Make sure to reference the javascript file in the dashboard

<dashboard script="setHeatmapTokens.js">

Lastly, restart splunk web or go to the _bump endpoint to load the new javascript file:

http://<your splunk url & port>/en-US/_bump

After that, you should be able to use the heatmap_x, heatmap_y, and heatmap_z tokens in the dashboard.

richielynch89
Path Finder

Hi @aljohnson_splunk

Is this heatmap available on Splunk version 7.1?
If not, are you planning on releasing it for new versions?

Thanks,
Richie.

0 Karma

maada
Explorer

Hi @aljohnson_splunk,
thanks for the token js provided - that works almost perfect for me. I'm just having some issues when i want to integrate with other scripts (e.g. for buttons to reset the token, from dashboard examples app) and i have problems that my searches are not getting updated when the token changes (if i have a fieldset defined, i have the function "search on change").
I'm looking for a solution to both: reseting the the token and automatic search on change.
Many thanks in advance!

BR Matthias

0 Karma

aljohnson_splun
Splunk Employee
Splunk Employee

Haha - It seems there are an number of you! I'm glad to hear its moving in the right direction. I think I forgot to add the "submitted" model - which will sort of trigger the token to be used in other components (like the ones you mention). I updated the code to update both "default" and "submitted".

I tested this in a dashboard where I have an input on the top for "heatmap_x" that says search when changed, and put that token into a different panel.

Then, I click on the heatmap, and the token is updated, and the search is re-executed. Please let me know if this works for you 🙂

sschmerl
New Member

Hello @aljohnson_splunk,

Thanks a lot for your Heatmap app, which I am using very often. I am also missing the drilldown function a lot. Is there a possibility to set on mouse click the x, y, z values (shown in the hover-baloon-text) as tokens? E.g. by the tokens.set function from the Splunk web framework in the JS-Code of your App. By setting a three token for the X,Y,Z coordinates a drilldown can be realized and the Heatmap App become more user-friendly particular for visual analytics tasks.

Can you give me a hint, where to add the token setting in your code?

Best regards, Sebastian

0 Karma

aljohnson_splun
Splunk Employee
Splunk Employee

Hi @sschmerl - I updated my answer with a way to capture the click data. It isn't too hard. Please let me know if you have issues.

0 Karma

aljohnson_splun
Splunk Employee
Splunk Employee

Hi Sschmerl,

I'm glad to hear you are using it often. I will look into adding the drilldown functionality and ping you here when / or if I can add it.

To add the token setting, I'll need to add a click event listener and then set the drilldown options.
See for an example http://docs.splunk.com/Documentation/SplunkCloud/6.6.3/AdvancedDev/CustomVizApiRef#Drilldown_options

Best,
Xander

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 ...