CODEWITHSUNDEEP
javascriptd3.jssvgchartsnvd3.js
omrakhur
omrakhur

Reputation: 1402

Nvd3 - scatter chart won't load despite adding all external resources

Please have a look at this JSFIDDLE. I'm trying to follow a tutorial to create a very basic scatter chart in NVD3.js, but to no avail. 

 function createBasicChart1(){

    var chart;

    nv.addGraph(function(){
        //Create chart
        chart = nv.models.scatterChart()
                .showLegend(false)                     // Remove legend (will put it back later)
                .showDistX(true)                       // Show X axis
                .showDistY(true)                       // Show Y axis
                .useVoronoi(false)                     // For now, disable hovering on points
                .color(d3.scale.category10().range())  // Colormap
                .duration(500);                        // Fade in duration


        // Generate toy data
        data = [{key: "", values:[{x:0,y:0},{x:1,y:1}, {x:3, y:3}, {x:3, y:10}]}];

        //Add chart to page
        d3.select("#basicChart1").datum(data).call(chart)

        // Register chart with  window resize event
        nv.utils.windowResize(chart.update);

        return chart
    });
}

Could you please tell what I'm missing here? I've added all the resources like the tutorial says.

Upvotes: 1

Views: 42

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102174

There is one mistake from you and one mistake from the tutorial's author.

Your mistake is that the ID of the SVG is basicChart1, not basicChart. Actually, it is on the tutorial:

When you write the javascript code, make sure to change the d3 selector id to a one that will match with the template.

The author's mistake is a little bit more strange: in his tutorial, the author never calls createBasicChart1. But, of course, unless it is an IIFE, you have to call it:

createBasicChart1()

Here is your updated fiddle: https://jsfiddle.net/5eydu463/

Upvotes: 1

Related Questions