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
  • `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. – somethinghere Nov 17 '14 at 12:10

2 Answers2

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")
parliament
  • 21,544
  • 38
  • 148
  • 238
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;