Dashboards & Visualizations

Following the instructions on the "Build a custom visualization" tutorial leads to an error. What am I doing wrong?

bk028s
Path Finder

Hi! I'm currently working through the Splunk Custom Visualization tutorial and have run into a problem. I've followed the instructions up through the "Try out the visualization" section. However, after clicking the Radial meter visualization option under "More" of the visualization tab, Splunk presents me with an error that says

"Error Rendering Radial Meter visualization"

My search is the same as the one provided in the tutorial, and I've made sure that all dependencies were installed correctly. Any idea what I might be doing wrong? I'd be glad to answer additional questions if you need to understand my setup more.

Thanks!

Edit: My search is simply:

index="_internal" | stats count

It's mostly just being used to generate a number to throw at the radial meter, as far as I can tell. It's rendered just fine on the default Radial Guage, but the tutorial's radial meter still produces the error above.

EDIT WITH SOLUTION:

The issue is with the version of d3 that I'm using.

in d3 v4 the calls to d3.scale.linear() and d3.svg.arc() in the tutorial's source code should instead be d3.scaleLinear() and d3.arc() respectively.

0 Karma
1 Solution

bk028s
Path Finder

The issue is with the version of d3 that I'm using.

in d3 v4 the calls to d3.scale.linear() and d3.svg.arc() in the tutorial's source code should instead be d3.scaleLinear() and d3.arc() respectively.

The tutorial page has been updated to specify the use of d3 version 3.5. Much appreciation to @magnew_splunk and @frobinson_splunk for helping me figure it all out.

View solution in original post

0 Karma

bk028s
Path Finder

The issue is with the version of d3 that I'm using.

in d3 v4 the calls to d3.scale.linear() and d3.svg.arc() in the tutorial's source code should instead be d3.scaleLinear() and d3.arc() respectively.

The tutorial page has been updated to specify the use of d3 version 3.5. Much appreciation to @magnew_splunk and @frobinson_splunk for helping me figure it all out.

0 Karma

magnew_splunk
Splunk Employee
Splunk Employee

Hello @bk028s,

That error comes up when an uncaught error is thrown in your javascript code. Something like using a variable that doesn't exist or a fatal syntax error. Did you try looking in the developer console of your browser? Is there a more specific error there? That will probably point you to where you might need to fix it.

Let us know if you don't find the issue.

bk028s
Path Finder

Hey, I found it.

The issue is with the version of d3 that I'm using.

in D3 v4 the calls d3.scale.linear() and d3.svg.arc() should instead be d3.scaleLinear() and d3.arc() respectively.

The visual now works perfectly. It would be wonderful to see this information added to the custom visualization tutorial; I'd like to think that my troubles may be for the greater good. ^^;

frobinson_splun
Splunk Employee
Splunk Employee

Hi @bk028s,
Thanks for troubleshooting this with @magnew. Your discovery is valuable for other users. I work on the custom viz tutorial docs and I have updated them to reflect that d3 version 3.5 should be used specifically to build the radial meter.

Thanks again!

bk028s
Path Finder

Hey, thank you! I'm glad we were able to work through everything!

magnew_splunk
Splunk Employee
Splunk Employee

Yup, thanks, I just discovered that myself. D3 changed their major version recently and we weren't being careful enough in the tutorial about versions. We'll update it to use a specific D3 version.

Thanks again for pointing this out!

bk028s
Path Finder

No, thank YOU. I wouldn't have known what to be looking for on my own.

0 Karma

bk028s
Path Finder

There are actually several errors reported in the developer console, and two of them are duplicated:

I at least see that there's a mention of the tutorial app where a preview.png is not found, but the tutorial seemed to indicate that in the absence of an icon, the default would be used (and it does appear to be used it the More section). However, I'm not sure how to interpret the other errors.

magnew_splunk
Splunk Employee
Splunk Employee

Yea, you don't need to worry about the PNG errors, but the other one is a code error. My initial guess is that your imports are out of order and you are trying to access a variable called 'linear' on the base class instead of on d3. But I can't tell for sure without looking at the code.

Look to see if the beginning of your code source file matches the tutorial. Then check your fromatData/updateView. If you get completely stuck, post your code here and I'll see if I can see it.

bk028s
Path Finder

I'm still playing around with it and trying to spot the error, but I'll go ahead and post my code anyways; you're likely a lot more experienced with spotting the errors than I am, and I'm the one that made the error in the first place, so I may be blind to it.

define([
            'jquery',
            'underscore',
            'vizapi/SplunkVisualizationBase',
            'vizapi/SplunkVisualizationUtils',
            'd3'
        ],
        function(
            $,
            _,
            SplunkVisualizationBase,
            SplunkVisualizationUtils,
            d3
        ) {

    return SplunkVisualizationBase.extend({

        initialize: function() {
            // Save this.$el for convenience
            this.$el = $(this.el);

            // Add a css selector class
            this.$el.addClass('splunk-radial-meter');
        },

        getInitialDataParams: function() {
            return ({
                outputMode: SplunkVisualizationBase.ROW_MAJOR_OUTPUT_MODE,
                count: 10000
            });
        },

        updateView: function(data, config) {

            // Guard for empty data
            if(data.rows.length < 1){
                return;
            }
            // Take the first data point
            datum = data.rows[0][0];
            // Clear the div
            this.$el.empty();

            // Pick a color for now
            var mainColor = 'yellow';
            // Set domain max
            var maxValue = 100;

            // Set height and width
            var height = 220;
            var width = 220;

            // Create a radial scale representing part of a circle
            var scale = d3.scale.linear()
                .domain([0, maxValue])
                .range([ - Math.PI * .75, Math.PI * .75])
                .clamp(true);

            // Create parameterized arc definition
            var arc = d3.svg.arc()
                .startAngle(function(d){
                    return scale(0);
                })
                .endAngle(function(d){
                    return scale(d)
                })
                .innerRadius(70)
                .outerRadius(85);

            // SVG setup
            var svg  = d3.select(this.el).append('svg')
                .attr('width', width)
                .attr('height', height)
                .style('background', 'white')
                .append('g')
                .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');

            // Background arc
            svg.append('path')
                .datum(maxValue)
                .attr('d', arc)
                .style('fill', 'lightgray');

            // Fill arc
            svg.append('path')
                .datum(datum)
                .attr('d', arc)
                .style('fill', mainColor);

            // Text
            svg.append('text')
                .datum(datum)
                .attr('class', 'meter-center-text')
                .style('text-anchor', 'middle')
                .style('fill', mainColor)
                .text(function(d){
                    return parseFloat(d);
                })
                .attr('transform', 'translate(' + 0 + ',' + 20 + ')');
        }
    });
});

skoelpin
SplunkTrust
SplunkTrust

Provide us with your search and we can start working on what the issue is

0 Karma

bk028s
Path Finder

I updated the original post with the search information. Thanks for your interest, and let me know if there's anything else I can do.

0 Karma
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 ...