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

[bk028s]

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.

[bk028s · Accepted 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.

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.

[magnew_splunk]

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]

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]

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]

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

[magnew_splunk]

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]

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

[bk028s]

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

• Failed to load resource: http://localhost:8000/en-US/splunkd/_raw/servicesNS/admin/search/static/appLogo.png the server responded with a status of 404 (Not Found)
• Uncaught TypeError: Cannot read property of 'linear' of WrappedExternalVisualization.js?bust=1469470407012:289 undefined
• http://localhost:8000/en-US/static/@00f5bb3fa822/app/viz_tutorial_app/radial_meter/preview.png Failed to load resource: the server responded with a status of 404 (Not Found)
• Uncaught TypeError: Cannot read property of 'linear' of WrappedExternalVisualization.js?bust=1469470407012:289 undefined
• http://localhost:8000/en-US/static/@00f5bb3fa822/app/viz_tutorial_app/radial_meter/preview.png Failed to load resource: the server responded with a status of 404 (Not Found)

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]

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]

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]

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

[bk028s]

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.