Dashboards & Visualizations

How can I show multiple values on a tooltip from a table?

japposadas
Explorer

Hi guys, need help here, I have a table with multiple values, when I hover to a column I need to display other field values. how could I do it. I've already created a table like this https://www.splunk.com/blog/2014/01/29/add-a-tooltip-to-simple-xml-tables-with-bootstrap-and-a-custo... by Jason Conger. I just need to display more data.

Here's my table screenshot
alt text

Tags (1)
0 Karma
1 Solution

kamlesh_vaghela
SplunkTrust
SplunkTrust

Hi @japposadas,

Have you successfully implemented tooltip from this URL?

https://www.splunk.com/blog/2014/01/29/add-a-tooltip-to-simple-xml-tables-with-bootstrap-and-a-custo...

In this example, the tooltip will show only message field value.
As per your requirement, you want to display other field data in tooltip.like, on message column the tooltip should be eg. message2 field.

Can you please try below changes in your implemented tooltip from above URL.

Change in your search.

YOUR_SEARCH | table message message2 | eval message = message."#####".message2

Change in javascript.

render: function($td, cell) {
    var message = cell.value.split("#####")[0];
    var tip = cell.value.split("#####")[1];

    if(message.length > 48) { message = message.substring(0,47) + "..." }

    $td.html(_.template('<a href="#" data-toggle="tooltip" data-placement="left" title="<%- tip%>"><%- message%></a>', {
        tip: tip,
        message: message
    }));

    // This line wires up the Bootstrap tooltip to the cell markup
    $td.children('[data-toggle="tooltip"]').tooltip();
}

In above changes, I have passed message and message2 fields in single field message by changing in search and used in javascript.

| eval message = message."#####".message2

You can see in updated javascript code.

var message = cell.value.split("#####")[0];
var tip = cell.value.split("#####")[1];

I hope this will help you.

Happy Splunking

View solution in original post

niketn
Legend

@japposadas, Looking at your data you should give ** Punchcard Custom Visualization ** (https://splunkbase.splunk.com/app/3129/) a try. It will give you a lot of hover options:

1) Hover any value
2) Hover over column to see value of all rows based on selected column
3) Hover over row to see values of all columns for selected row
4) Hover over legend to see all values falling in Legend range.
5) Size and Color of bubbles will both give you a sense of volume of data.
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

Hi @japposadas,

Have you successfully implemented tooltip from this URL?

https://www.splunk.com/blog/2014/01/29/add-a-tooltip-to-simple-xml-tables-with-bootstrap-and-a-custo...

In this example, the tooltip will show only message field value.
As per your requirement, you want to display other field data in tooltip.like, on message column the tooltip should be eg. message2 field.

Can you please try below changes in your implemented tooltip from above URL.

Change in your search.

YOUR_SEARCH | table message message2 | eval message = message."#####".message2

Change in javascript.

render: function($td, cell) {
    var message = cell.value.split("#####")[0];
    var tip = cell.value.split("#####")[1];

    if(message.length > 48) { message = message.substring(0,47) + "..." }

    $td.html(_.template('<a href="#" data-toggle="tooltip" data-placement="left" title="<%- tip%>"><%- message%></a>', {
        tip: tip,
        message: message
    }));

    // This line wires up the Bootstrap tooltip to the cell markup
    $td.children('[data-toggle="tooltip"]').tooltip();
}

In above changes, I have passed message and message2 fields in single field message by changing in search and used in javascript.

| eval message = message."#####".message2

You can see in updated javascript code.

var message = cell.value.split("#####")[0];
var tip = cell.value.split("#####")[1];

I hope this will help you.

Happy Splunking

spkriyaz
Path Finder

Hi @kamlesh_vaghela,

Can this tooltip changes be applied to heatmap tooltip? I have only xaxis and yaxis value in the heatmap tooltip when I hover the heatmap blocks like below. Is it possible to add more fields to this tooltip? I have extra fields values that needs to populated like minutes, process name etc.

Could you please advice on the same? I have posted a question please refer this 

https://community.splunk.com/t5/Dashboards-Visualizations/How-to-display-more-values-in-heatmap-tool...

Thanks in advance!

0 Karma

japposadas
Explorer

Hi kamlesh_vaghela! thanks for your answer. i've already tried it and it work. 🙂 my problem is I used timechart so my header is date spanned by 1 day. do you have any idea how to get the search results and put it in the cells[ ]? thank you so much

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

HI

Yes, you can use foreach command to append column name as a value in each cell.

It is something like

| foreach "*" [ eval <<MATCHSTR>>='<<FIELD>>'."#####"."<<FIELD>>" ]

Please check the link:
https://docs.splunk.com/Documentation/SplunkCloud/6.6.3/SearchReference/Foreach

Happy Splunking

0 Karma

japposadas
Explorer

Hi kamlesh! how thanks again. i have a question. how can you get all the table headers using javascript?

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

Hi Hi @japposadas, where you want to access table headers in javascript?? In render function? And what is the purpose of same?

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