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
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
4 Answers
Reset to default 4tooltipContent was deprecated, and tooltip was moved into it's own object.
Use chart.tooltip.contentGenerator(), and pass in a function that builds the content.
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./aniketmaithani/python-nvd3#egg=python-nvd3
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
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 pletely 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.