Uncaught TypeError: Cannot read property 'createElementNS' of undefined
Asked Answered
S

2

8

I am using nvd3 to draw a line chart and when i pass the div to nvd3 to draw a chart its give me this error

Uncaught TypeError: Cannot read property 'createElementNS' of undefined

Here is code:

 var chartDiv = 'line-chart'+ counter++;
   tmpl = $($('#charts-panel-template').clone().html());
                tmpl.find('.feature-line-chart').attr('id', chartDiv);
 var  div=tmpl.find('.feature-line-chart#'+chartDiv);
           chartsPanel.append(tmpl);
    nv.addGraph(function() {
    var chart;
    var width = 1024, height = 500;
    chart = nv.models.lineChart()
            // .color(sparkChart.colors)
            .width(width).height(height);
    //modify the x.axes
        chart.x(function(d,i) { 
              return d.x;
        });

    //giving chart margin
    chart.margin({right: 40});

    $(div).empty();
    //create chart

    var svg = d3.select(div).append('svg')
         .datum(data)
         .transition()
         .duration(500)
         .call(chart)
         .attr('width', width)
         .attr('height', height);

my questions,

  • where i am doing wrong
  • is anything i am missing
Septa answered 17/11, 2014 at 11:40 Comment(1)
createElementNS is not even mentioned in the code you posted, so this code can;t have triggered it. Unless its something general from the library.Nucleotidase
S
3

i have got the solution i am passing class and id in the nvd3 although the nvd3 olny take id

 var  div=tmpl.find('.feature-line-chart#'+chartDiv);

become

var  div='#'+chartDiv;
Septa answered 17/11, 2014 at 12:13 Comment(0)
E
20

I just ran into the same issue.

You cannot pass a jquery reference to d3.select():

 d3.select($element) //no bueno

You must pass the actual DOM node, or the id like you eventually figured out.

d3.select($element[0])

or

d3.select("#id")
Egwin answered 24/1, 2015 at 20:2 Comment(0)
S
3

i have got the solution i am passing class and id in the nvd3 although the nvd3 olny take id

 var  div=tmpl.find('.feature-line-chart#'+chartDiv);

become

var  div='#'+chartDiv;
Septa answered 17/11, 2014 at 12:13 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.