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!

Observability Unlocked: Kubernetes Monitoring with Splunk Observability Cloud

 Ready to master Kubernetes and cloud monitoring like the pros? Join Splunk’s Growth Engineering team for an ...

Update Your SOAR Apps for Python 3.13: What Community Developers Need to Know

To Community SOAR App Developers - we're reaching out with an important update regarding Python 3.9's ...

October Community Champions: A Shoutout to Our Contributors!

As October comes to a close, we want to take a moment to celebrate the people who make the Splunk Community ...