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!

Introducing the Splunk Community Dashboard Challenge!

Welcome to Splunk Community Dashboard Challenge! This is your chance to showcase your skills in creating ...

Built-in Service Level Objectives Management to Bridge the Gap Between Service & ...

Wednesday, May 29, 2024  |  11AM PST / 2PM ESTRegister now and join us to learn more about how you can ...

Get Your Exclusive Splunk Certified Cybersecurity Defense Engineer Certification at ...

We’re excited to announce a new Splunk certification exam being released at .conf24! If you’re headed to Vegas ...