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!

.conf24 | Registration Open!

Hello, hello! I come bearing good news: Registration for .conf24 is now open!   conf is Splunk’s rad annual ...

ICYMI - Check out the latest releases of Splunk Edge Processor

Splunk is pleased to announce the latest enhancements to Splunk Edge Processor.  HEC Receiver authorization ...

Introducing the 2024 SplunkTrust!

Hello, Splunk Community! We are beyond thrilled to announce our newest group of SplunkTrust members!  The ...