Dashboards & Visualizations

Is there a way to take data from one panel in a dashboard and use the results in an HTML/JS panel on the same dashboard?

rlough
Path Finder

I have a panel that gets me a list of states and counts. I also have a heatmap that I made using HTML and JavaScript on the same page (on "convert to HTML" mode). Right now the numbers on my heatmap are all static, but I would like to be able to pull in the real queried data from the first panel and use it in my map.

Is this possible?

Thanks!

Note: The static values are stored in a huge JS object, so I assume that I could put variables in place of the static values if I could somehow grab those variables from the first panel.
The dynamic values are stored in a stats table.

0 Karma
1 Solution

thomrs
Communicator

Yes there is with a little JS. Off the top of my head a custom render could be made to do just this. Here is an example of one I use to make icons from URL's.

    var IconRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {
    //console.log(cell);
    return cell.field === 'icon';
        },
        render: function($td, cell) {
        $td.html(_.template('<img src="<%- icon %>" heigth=45 title="ToolTip" /> ', {
                     icon: cell.value
            }));
        }
    });

There is jQuery under the hood so just adjust the $td to you HTML id and you're off.

View solution in original post

thomrs
Communicator

Yes there is with a little JS. Off the top of my head a custom render could be made to do just this. Here is an example of one I use to make icons from URL's.

    var IconRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {
    //console.log(cell);
    return cell.field === 'icon';
        },
        render: function($td, cell) {
        $td.html(_.template('<img src="<%- icon %>" heigth=45 title="ToolTip" /> ', {
                     icon: cell.value
            }));
        }
    });

There is jQuery under the hood so just adjust the $td to you HTML id and you're off.

rlough
Path Finder

So I would do that for all 50 states? Something like

var Arizona = TableView.BaseCellRenderer.extend({
canRender: function(cell) {
return cell.field === 'count';
},
render: function($td, Arizona) {
$td.html(_.template('<%- icon %>"> '
2. $td is going to be replaced with the div ID? ie $cell1

The data that I'm pulling from is a Stats Table that looks like this:
State Count
AZ 249932
AR 32342
AL 4234
and so forth

For my map, I have an object that it consumes that looks like this:
var StatesData={Arizona, (a bunch of coordinates), value:249932, Arkansas.........

Thank you!

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