CODEWITHSUNDEEP
javascriptpythondjangonvd3.js
Alireza Soori
Alireza Soori

Reputation: 645

django-nvd3 chart.tooltipContent is not a function

I' trying to use the pie chart example here at django-nvd3-doc and I've included the js libraries proceeded with the tutorial but the chart wont be rendered and following js error is displayed 

TypeError: chart.tooltipContent is not a function
<anonymous>
 test:23
a.render/c()


HTML OUTPUT:
`

<head>
    <link media="all" href="/static/nvd3/build/nv.d3.min.css" type="text/css" rel="stylesheet" />
<script src="/static/d3/d3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/nvd3/build/nv.d3.min.js" type="text/javascript" charset="utf-8"></script>




    <script>



data_piechart_container=[{"values": [{"value": 52, "label": "Apple"}, {"value": 48, "label": "Apricot"}, {"value": 160, "label": "Avocado"}, {"value": 94, "label": "Banana"}, {"value": 75, "label": "Boysenberries"}, {"value": 71, "label": "Blueberries"}, {"value": 490, "label": "Dates"}, {"value": 82, "label": "Grapefruit"}, {"value": 46, "label": "Kiwi"}, {"value": 17, "label": "Lemon"}], "key": "Serie 1"}];

nv.addGraph(function() {
    var chart = nv.models.pieChart();
    chart.margin({top: 30, right: 60, bottom: 20, left: 60});
    var datum = data_piechart_container[0].values;

    chart.color(d3.scale.category20().range());

chart.tooltipContent(function(key, y, e, graph) {
      var x = String(key);
          var y = String(graph.point.y);

          tooltip_str = '<center><b>'+x+'</b></center>' + y;
          return tooltip_str;
          });
    chart.showLabels(true);

        chart.donut(false);

chart.showLegend(true);




    chart
        .x(function(d) { return d.label })
        .y(function(d) { return d.value });


    chart.height(450);


        d3.select('#piechart_container svg')
        .datum(datum)
        .transition().duration(500)
        .attr('height', 450)
        .call(chart);


    });



</script>


</head>
<body>
    <h1>tere</h1>

    <div id="piechart_container"><svg style="width:600px;height:400px;"></svg></div>
</body>

`
I've encountered a error like this yesterday when I was trying to use the nvd3 js library without django-nvd , anyways this is the last shot I'm giving to this library


UPDATE : I've tried using the demo django project provided in github's repo and same error still exists

Upvotes: 0

Views: 1913

Answers (4)

TAH
TAH

Reputation: 1746

Until the developer merges the pull request with this fix, you may wish to update your requirements.txt to include this line:

-e git://github.com/aniketmaithani/python-nvd3#egg=python-nvd3

Upvotes: 2

liquidpele
liquidpele

Reputation: 76

tooltipContent was deprecated, and tooltip was moved into it's own object.

Use chart.tooltip.contentGenerator(), and pass in a function that builds the content.

Upvotes: 4

Dean Christian Armada
Dean Christian Armada

Reputation: 7364

To add up on cakan's answer and also to be specific. You need to edit these files by replacing 'chart.tooltipContent' with 'chart.tooltip.contentGenerator' on the corresponding line on the 'nvd3' module at the python site-packages.

1.) pythonx.x/site-packages/nvd3/templates/content.html at line '54' and '63'

2.) pythonx.x/site-packages/nvd3/templates/piechart.html at line '18'


Then just refresh or hard refresh your browser then the chart will appear

Upvotes: 2

clyu
clyu

Reputation: 11

I just fixed this issue. Because django-nvd3 calls the functions and templates of python-nvd3(also the wrapper for python nvd3 developed by the same person).

The answer of liquidpele is completely right. You just need to replace all the functions chart.tooltipContent to chart.tooltip.contentGenerator in your python-nvd3 templates file (update files that call that function). This dictionary may appear in your python library installed location just like /lib/python2.7/sites-packages.

Upvotes: 1

Related Questions