Intermittant Zoom Out Problem on timechart instances in Web Framework

[cfeckhardt]

I can certainly zoom IN by clicking and dragging my mouse down and to the right in a timeline barchart, but how do you zoom back out? I am not using the default Splunk dashboard, and there are no chart controls visible.

Thanks,
Carl

[cfeckhardt · Accepted solution]

Thanks man. I just seemed to have made it "come back" -- this is an episode of iRobot... Ghosts in the machine. All I did was force the chart to display it's legend along the right side(where previously it was suppressed with a value of 'none,' and voila' -- once the browser cache got flushed there it was.

I guess I'm done. 🙂 Thanks for the chat. Maybe this will help someone else who sees something similar.
The enclosing container was simply of class "container" and not "container-fluid" and it was the most basic grid component 'col-md-6' for a desktop page, and the chart was embedded in a wrath-content-box class.

Those details are given for our future posterity.

Carl

[cfeckhardt]

I want to clear this up right now, regarding this post.

This is NOT a Splunk REST API issue. 🙂

This has been narrowed down to a Django REST API call to a third party
module called GraphViz, and the url attribute value for the jQuery Ajax
call ends with a method call in the api of the Django project.

Sorry. But it's complicated as you can well imagine. Who to "blame?"

So many layers, and I'm new to this project and these technologies,
so it was easy to be misled.

Have a good day, community.

[cfeckhardt]

The actual problem lies in the JS script tag region instantiated just
before the closing body tag. When the Zoom OUT feature doesn't show
up in the plot, there is an AJAX call to the Splunk REST API that fails
in the browser debugger console. That REST API call is to the SVG(scalar
vector graphic) library routine that lets you pan/zoom the SVG
rendering, and there isn't a need to recall the search manager to do it.
That's why it's so fast. No search manager job latency. Just rendering
of the partial DOM associated with the chart.

But who is to blame is still what I don't know yet.

The players in this dilemma are the following:

1. jQuery
2. RequireJS
3. XMLHTTPREQUEST(Async AJAX GET)
4. SPLUNK REST API
5. SVG library routine used by the SPLUNK server

Note: The failure shown in the debugger console ONLY says that
it can't reach the SPLUNK server through it's REST API,
via the AJAX call. But occasionally, it CAN. 😞

<script style="text/javascript">
        requirejs(['jquery', 'svg-pan-zoom'], function(jquery, svgPanZoom) {
            $(document).ready(function () {
                $.ajax({
                    type: 'GET',
                    url: "/api/v2/graph/2243/svg/",
                    success: function (obj) {
                        $("#svg").html(obj.data);
                        var panZoom = svgPanZoom('#svg svg', {
                            minZoom: 0.1,
                            zoomEnabled: true,
                            controlIconsEnabled: true,
                            fit: true,
                            center: true
                        });
                        // Get the container sized correctly
                        $("#svg").css({
                            width: "100%", height: $("#svg svg").height() + 40,
                            'max-height': '600px'
                        });
                        // Now set the svg to use 100%
                        $("#svg svg").css({width: "100%", height: "100%", 'max-height': '100%'});
                        // Get the menu in the right spot
                        panZoom.resize();
                        // On any move readjust it.
                        $(window).resize(function () {
                            panZoom.resize();
                            panZoom.fit(true);
                            panZoom.center(true);
                        })
                    }
                });
            });
        });
    </script>

[martin_mueller]

There seems to be a zoomOut() function in highcharts if your JS goes that deep... at least that's what the event handler behind the button calls.

[martin_mueller]

It's hard to debug custom solutions from over here 😕 so "it should be there" is all I've got.

[cfeckhardt]

understood

[martin_mueller]

There should be a Reset Zoom thingy in the top right corner.

[cfeckhardt]

Thanks for the quick reply, Martin. Yes, there should be, but it's not there. I now suspect it might related to the encapsulation using Bootstrap's wrath-content-box in the grid layout. I will try to fix that and see if the link to the reset button comes back. The Splunk, default dashboard definitely shows what you've just said exists.

Best Regards,
Carl