topic Re: Heatmap - Custom Visualization: How can I add a drilldown? in All Apps and Add-ons

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

graether — Wed, 15 Nov 2017 17:29:08 GMT

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.

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

aljohnson_splun — Wed, 15 Nov 2017 19:21:33 GMT

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:

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.

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

sschmerl — Thu, 16 Nov 2017 15:39:32 GMT

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

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

niketn — Thu, 16 Nov 2017 18:57:56 GMT

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

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

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

aljohnson_splun — Thu, 16 Nov 2017 21:03:25 GMT

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

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

aljohnson_splun — Fri, 17 Nov 2017 00:55:32 GMT

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.

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

maada — Sat, 18 Nov 2017 20:46:52 GMT

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

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

aljohnson_splun — Sat, 18 Nov 2017 23:52:17 GMT

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 🙂

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

richielynch89 — Mon, 30 Sep 2019 14:43:14 GMT

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.