Dashboards & Visualizations

SVG Panel display problem using JQuery toggle function in BaseSplunkView

mathu
Path Finder

Hi

I've implemented a javascript (Simple XML) extension to toggle dashboard panels. The script hides some panels on page load and toggles them on a mouse click event. That helps me to keep my dashboards clean.

I use JQuery toggle() or slideToggle() functions inside an extended BaseSplunkView class.

Ths script works for panels that do not relate to SVG dashboard elements. For example it works for Single Value or HTML panels, but it does not work for chart panels.

The problem looks obvious:
When my javascript class is loaded, I call component.$el.toggle() to hide the panel. But at this time, the SVG elements are not yet painted and therefore not visible in the HTML DOM.
When I call toggle() again in case of a click event, the panel shows up, but it is empty.

When I resize the panel (or browser window) a little bit, the chart shows up immediately. That means the SVG elements are now here, but initially painted on an invisible HTML element.

So how can I tell Splunk in my javascript to refresh the SVG container after toggling the panel?

Kind regards
Mathias

0 Karma
1 Solution

mathu
Path Finder

.. after hours of debugging, the solution is that simple.

Calling the resize function on the panel element after toggling it, solves my problem.

component.$el.toggle();
component.$el.resize();

View solution in original post

mathu
Path Finder

.. after hours of debugging, the solution is that simple.

Calling the resize function on the panel element after toggling it, solves my problem.

component.$el.toggle();
component.$el.resize();
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 ...